之前博客使用的是Jekyll在Github Page搭建个人博客，但是不知道什么原因，该主题的CSS样式和布局出现了问题，在博客页面并没有生效。

而在2024-3-10的时候学校钉钉平台推送了Kitex 负载均衡源码解读之加权负载均衡算法 | NX の 博客 (nickxu.me)，发现他博客的主题风格很喜欢，加上前文说的博客的CSS渲染出现问题，于是决定尝试搭建与之相同的博客页面。

一、参考教程

Hexo：提供了最基本的Hexo文档，讲解了如何生成部署

Butterfly：一个Hexo下、卡片布局风格的主题，提供了该主题的自定义配置

二、安装Hexo

基本过程：

我准备这次采用先用Hexo生成静态文件，再将HTML发布到github代码库并用GitHub Pages部署。

根据Hexo文档介绍，安装 Hexo 相当简单（真的吗qwq），只需要先安装下列应用程序即可：

如果您的电脑中已经安装上述必备程序，你可以直接前往 安装 Hexo 步骤。

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

我在此之前已经有安装了这两个应用程序，就直接开始进行Hexo的安装。

在你想要的目录下git bash here，使用 npm 安装 Hexo。

1
npm install -g hexo-cli

然后之后就可以运行以下指令在本地生成一个Hexo：

1
2
3
4
hexo init <folder>   	#在当前目录下的<folder>文件夹内生成一个Hexo，若不填，则直接在该目录下生成
cd <folder> 			#跳转至改文件夹
npm install

接下来就可以参考文档里的介绍，去了解各个文件夹的功能和配置文件（_config.yml）的使用了。

常用命令：

1
2
3
4
5
6
7
8
9
10
11
#将course下的MarkDown文件生成Html
#可简写成hexo g，其他选项参考文档
hexo generate 

#将public下生成的文件本地部署
#可简写成hexo s
hexo server

#部署生成的文件到云端/github，后续用
#可简写hexo d
hexo deploy

遇到问题：

我第一次使用hexo init的时候出现了hexo: command not found的报错，但是我现在忘记了怎么解决的了。😀

三、安装Butterfly主题

过程：

若前面的Hexo安装完成，这里基本上按照Butterfly作者写的教程就能正常按照。

Butterfly

注意：

其中需要注意：

  • 通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成。
  • 用git安装git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly安装在themes/butterfly
  • 主题的_config.yml和Hexo的_config.yml是不一样的，按照教程按照时需要注意是哪一个。

我个人推荐使用Git安装，这样找主题的_config.yml比较方便。

四、部署到Github Pages

建立代码库和连接

由于我之前已经进行了GitHub代码库的建立，所以这次并没有进行这一步，若没有做，需要去参考其他文章进行建立。

大致过程如下：

  1. 创建 SSH 密钥
  2. 添加密钥
  3. 进行连接
  4. 创建Github Pages库

使用 hexo-deployer-git部署

  1. 首先需要安装hexo-deployer-git。
    1
    npm install hexo-deployer-git --save
  2. 在Hexo的_config.yml下修改配置。（注意不是themes主题下的_config.yml！）
1
2
3
4
5
6
deploy:
  type: git
  	# 填入代码库的SSH地址
  repo: git@github.com:XXX/XXX.github.io.git
  	#这里注意自己的库是master还是main，github之后的版本讲主分支改成了main
  branch: master

3.执行hexo clean和hexo d部署

使用Github Actions部署网站

  1. 进入自己的GithubPages库。
  2. 进入Setting页面，其中有个Build and deployment分支，将Source选为Github Actions。
  3. 点击右边的Static HTML的configure。
  4. 直接点击右侧绿色按钮Commit Change，一路确认。

这个时候你的库中会出现有个.github/workflows，里面有个static.yml文件，在每次hexo d后，github就会通过这个文件去运行部署网站。

设置完成后，过一段时间，就可以进入https://你的用户名.github.io进入博客了。

个人遇到问题和注意

这里有个官方提示：

这一切是如何发生的？
当执行 hexo deploy 时，Hexo 会将 public 目录中的文件和目录推送至_config.yml中指定的远端仓库和分支中，并且**完全覆盖**该分支下的已有内容。

这里我就遇到这个问题：

当我每次hexo d后，我的Github Pages并没有更新，但是我的文件是已经上传上去了，经过检查发现，每次推送后，.github文件夹直接消失，也就是官方所说的，我之前的东西被完全覆盖了，因此，如果你有写README.md也会消失。

之后在询问了 NX 大佬后，他给出的建议是在本地Hexo文件下的source文件夹或者是.deploy_git主动添加这些文件。

经过试验，在.deploy_git下添加.github/workflows/static.yml，就可以把这个配置文件也推送上去，那么README.md应该也同理。

后续

之后就是通过修改主题的配置文件简单美化网站，把之前的markdown文件放入_post里，完成网站。