前言

捡起了好久没有更新的博客。

在AI 的帮助下，我完成了整个环境的重新搭建。

由于我使用的hexo 框架和版本都比较老了，所以有些地方可能不适应于新版本的主题，在接入时还请注意。

参考视频： https://www.bilibili.com/video/BV1xTgTemEDU/

视频文档： https://xiamu-ssr.github.io/Hexo/2024/06/19/2024-H1/2024-06-19-12-31-52/

准备工作

使用Github Actions 服务，将hexo 部署到 Github Pages。

与参考内容不同的是，我使用了两个仓库来实现。

参考内容中，使用了同一个项目，两个分支。其中一个分支用于提交博客源文件，另一个分支用于存放生成的静态网页文件。

考虑到将博客源文件内容暴露出来会有一定的风险，于是我的方案是使用两个仓库来实现。其中，Private 的仓库用于存放博客源文件，Public 的仓库用于存放页面。

我之前是有hexo 环境的，会和从头开始实现有所区别，在接下来的内容中，我将会分别说明。

关于Github Actions 服务的用量，Public 仓库可以免费使用，但是Private 的仓库会有一定的限制。但是如果只是作为hexo的资源站，免费的额度也是可以覆盖的。

hexo准备

安装并初始化hexo，如果已有hexo环境，可跳过这一步。

1
2
3
4
npm install -g hexo-cli
hexo init blog
cd blog
npm install

如果是已有hexo环境，在其他地方做过备份的。可以删除node_modules目录和package-lock.json，然后重新安装：

1
2
cd blog
npm install

仓库准备

在github上新建两个仓库，一个Private的blog_base，一个Public 的username.github.io；

已有Github Pages 的，可以不用重新创建username.github.io，只创建博客源文件仓库。

Token准备

使用Github Actions ，需要生成Personal access tokens，而且至少要包含repo 权限。把这个Token 配置给Github Action， 它才有权限去执行自动部署。

首先是Token 的创建：

单击头像 -> Settings -> Developer Settings -> Personal access tokens -> Tokens (classic)

这里是所有Tokens的列表，下面我们继续创建：

Generate new token -> Generate new token (classic)

新打开的界面中，我们需要给这个token 命名，随便命名即可，比如blog_base。

在下面的权限列表中，勾选repo，workflow 两项。

记录token的有效期，有效期到期后需要给Github Actions 配置新的token。

完成创建后，去到blog_base 仓库进行配置。首先打开该仓库，点击上方的Settings -> Secrets and variables -> Actions

点击 New repository secret 创建，Name设置为：GH_TOKEN（可随意设置，后面保持一致即可），Secret 粘贴刚才生成出来的token内容，就是一串以ghp_为开头的字符串。

修改_config.yml

为了设置推送的地址，需要在_config.yml 中配置推送地址。这里选择Public 的Github pages 仓库地址：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourusername/your-repo.git
  branch: master

配置Github Actions 工作流

在blog_base 目录创建.github文件夹，再在.github文件夹下创建workflows文件夹，然后创建deploy.yml，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
name: Deploy Hexo to GitHub Pages

on:
  push:
    branches:
      - main  # 当推送到 main 分支时触发

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          submodules: false  # 禁用子模块检查

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '12'

      - name: Install Dependencies
        run: npm install

      - name: Install Hexo Git Deployer
        run: |
          npm install hexo-deployer-git --save
          npm install hexo-cli -g

      - name: Clean and Generate Static Files
        run: |
          hexo clean
          hexo generate

      - name: Configure Git
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'

      - name: Deploy to GitHub Pages
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}
        run: |
          cd public/
          git init
          git add -A
          git commit -m "Create by workflows"
          git branch -M master
          git remote add origin https://${{ secrets.GH_TOKEN }}@github.com/yourusername/your-repo.git
          git push -f origin master

这里最后一步是将生成的内容，推送到你配置的仓库的master 分支，我的Github Pages就是设置的这个分支。

配置里的node-version 这个参数需要注意。旧版的hexo 使用新版的node 可能会生成失败。我的主题使用的hexo 版本比较老，使用12版本是可以生成的，最新的24 反而无法生成，这里可以按需修改版本。

这个工作流的意思就是，使用ubuntu-latest作为基础环境，然后安装各种依赖，随后hexo generate生成博客网站静态文件夹，最后再推送到设定的仓库和分支。

配置Github Pages

到Github Pages 仓库，点击Settings，设置page来源的分支。

推送并查看是否能够生效。

在这里，介绍一下我的.gitignore文件:

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
public/
.deploy*/
node_modules/

.DS_Store文件和Thumbs.db文件。这两个文件分别是Mac系统和Win系统生成的垃圾。

public 目录存放的是本地生成的静态页面，这个也不必上传。Github Actions 会自动生成。

node_modules 目录一定不能上传，需要排除掉。因为它太大了，不方便版本控制。而且不同平台需求的可能都不同。本地环境和运行Github Actions 的虚拟机环境不可能保证一致的。

其他注意事项

如果你之前是有Github Pages的，需要做好备份，防止文件丢失。

我就出现了CNAME文件和其他文件丢失的情况，这里需要注意。

自定义域名

如果嫌username.github.io 的网址不够优雅，可以注册域名，然后配置解析。

在购买域名后，进行以下设置：

Github 配置

进入Github Pages 仓库，单击Settings 切页。

在左侧边栏点击Pages。

Custom domain 配置为：

1
www.yourdomin.xxx

然后勾选Enforce HTTPS

域名解析

在域名解析中，做出以下设置：

1
2
3
4
5
6
7
8
www  CNAME  yourusername.github.io
@  AAAA  2606:50c0:8003::153
@  AAAA  2606:50c0:8002::153
@  AAAA  2606:50c0:8001::153
@  AAAA  2606:50c0:8000::153
@  A  185.199.111.153
@  A  185.199.110.153
@  A  185.199.108.153

这里参考Github的文档：https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site

创建CNAME

需要在Github Pages 网站的根目录创建CNAME文件，内容是在第一步中配置的www.yourdomin.xxx