使用 GitHub Actions 自动构建 Hexo 博客

换到 GitHub Actions 构建博客有一段时间了,基本没出什么大问题,功能方面跟之前用的 Travis CI 差不多,但这个是直接与 GitHub 集成,可以在仓库页面查看构建日志,还是要方便许多。

承接前面的文章:使用 Travis CI 实现 Hexo 博客自动部署,在这里继续分享一下我的 GitHub Actions 配置。

准备工作

这一步跟之前的文章 使用 Travis CI 实现 Hexo 博客自动部署 中要求的一样,我们需要一个 GitHub 帐号、一个 GitHub Pages 仓库、一个 Hexo 博客备份仓库/分支。另外我们还需要获取一个 GitHub Personal Access Token 用来推送构建好的文件到我们的 GitHub Pages 仓库。具体的操作这里不再重复叙述,有需要了解的可以去看之前的文章。

点开博客备份仓库上方的 Settings,点到左侧的 Secrets 项,添加两个秘密环境变量 GH_REFGH_TOKEN,值分别填写自己的 GitHub Pages 仓库地址(不包含 https:// )和刚刚申请到的 GitHub Personal Access Token。

配置过程

准备工作做好后就可以开始编写 GitHub Actions 配置文件了,这里对 Hexo 博客编译部署的步骤进行拆分讲解。

触发条件和运行环境

我们设置在 master 分支上发生 push 操作时触发构建,使用最新的 Ubuntu 系统作为编译部署的环境,同时设置一个全局环境变量将时区修改为 Asia/Shanghai(修改原因见 https://xirikm.net/2020/215-1.html ),具体的配置内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
name: Blog CI/CD

on:
push:
branches:
- master

env:
TZ: Asia/Shanghai

jobs:
blog-cicd:
name: Hexo blog build & deploy
runs-on: ubuntu-latest
steps:
............

建立工作环境

上面的大前提确定后就可以来开始建立我们的工作环境了(注: 后续所有步骤的配置都是接在上面 steps 块下的,不要弄混了层级关系)。

首先检出代码,设置一下 node 环境,我们这里使用 12.x 版本的 node.js :

1
2
3
4
5
6
7
- name: Checkout codes
uses: actions/checkout@v2

- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '12.x'

然后设置一下缓存目录以避免每次都要重新下载,从而加快构建速度(官方不建议直接缓存 node_modules 目录,所以这里设置的是 npm 的下载缓存目录 ~/.npm,这样后面仍需要使用 npm install 来安装依赖)。这里使用的是 package-lock.json 文件的 hash 值来标识缓存是否可以命中:

1
2
3
4
5
- name: Cache node modules
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

最后就是安装依赖了,这个根据自己的需要操作就行,由于我使用了 gulp 任务来压缩 Hexo 生成的文件,所以我这里除了 hexo-cli 还全局安装了 gulp

1
2
3
4
- name: Install dependencies
run: |
npm install hexo-cli gulp -g
npm install

生成部署文件

这一步简单点 hexo g 就行了,我这里多加了一步执行 gulp 任务的操作(将其放在两个 step 中而不是一次性执行是为了方便在日志中看到每个操作消耗的时间):

1
2
3
4
5
- name: Generate files
run: hexo generate

- name: Execute gulp task
run: gulp

部署博客

我们先将 GitHub Pages 仓库克隆过来,将其中的 .git 目录移到存放部署文件的 public 目录中(为了保留 GitHub Pages 仓库的提交历史),然后进入 public 目录设置一下提交用户名和邮箱,add 所有文件并提交,最后利用保存在秘密环境变量中的 GitHub Personal Access Token 推送到 GitHub Pages 仓库中就可以了:

1
2
3
4
5
6
7
8
9
10
- name: Deploy blog
run: |
git clone "https://${{ secrets.GH_REF }}" deploy_git
mv ./deploy_git/.git ./public/
cd ./public
git config user.name "yourname"
git config user.email "youremail"
git add .
git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
git push --force --quiet "https://${{ secrets.GH_TOKEN }}@${{ secrets.GH_REF }}" master:master

完整配置文件

我的博客源文件放在私人仓库中,没有公开访问,所以这里再贴一下完整的配置文件:

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: Blog CI/CD

on:
push:
branches:
- master

env:
TZ: Asia/Shanghai

jobs:
blog-cicd:
name: Hexo blog build & deploy
runs-on: ubuntu-latest

steps:
- name: Checkout codes
uses: actions/checkout@v2

- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '12.x'

- name: Cache node modules
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

- name: Install dependencies
run: |
npm install hexo-cli gulp -g
npm install

- name: Generate files
run: hexo generate

- name: Execute gulp task
run: gulp

- name: Deploy blog
run: |
git clone "https://${{ secrets.GH_REF }}" deploy_git
mv ./deploy_git/.git ./public/
cd ./public
git config user.name "yourname"
git config user.email "youremail"
git add .
git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
git push --force --quiet "https://${{ secrets.GH_TOKEN }}@${{ secrets.GH_REF }}" master:master