青梅梦呓

和世界交手的这许多年,你是否光彩依旧,兴致盎然

0%

使用GitHub Actions 自动构建部署Hexo博客

之前一直在使用Travis-CI部署Hexo博客,博客的源文件一直都在私有仓库中,只能只用https://travis-ci.com/, 眼看自己的100次机会很快就要用完了,Github 发布Github Actions了, 就简单折腾了一些时间,现在也使用了一段时间了 分享下我的使用过程

我个人比较坚持将代码尽可能的分离,参考我的上一篇博客使用Git Submdule 分离Hexo主题。 另外,
Hexo和NexT配置文件中包含一些不太适合公开的信息,比如leancloud的AK SK , 还有一些ApplicationID等等。这两个部分在我使用Github-actions的过程中造成了不少使用上的麻烦,解决的过程我尽可能详细的在文章中记录下来,方便下次查阅。

Ps: 感谢xirikm博主的邮件答复和耐心解惑

关于GitHub Actions

GitHub Actions 是Github推出的又一款持续继承服务,功能类似于Travis-CI,但是直接与Github集成,可以在github页面直接查看构建和部署的过程,方便不少。
还有就是我的博客源文件仓库是私有仓库,只能免费使用Travis-ci.com构建一百次。 要想使用travis-ci.org还必须得公有仓库,Actions倒是没有这方面的条件。
此外 Github还推出了一个Actions MarketPlace, 里面包含了不少他人提交的Actions; 还有人搞了一个
awesome
这就免去了重复写actions的过程。

官方文档给出了非常详解的解释和用例,具体请移步这里 , 中文文档翻译的稀碎,我英文不太好,还是有选择的看了些英文的文档。

基本概念

  • workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。
  • job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。
  • step(步骤):每个 job 由多个 step 构成,一步步完成。
  • action (动作):每个 step 可以依次执行一个或多个命令(action)。

准备工作

我的博客是有三个仓库 一个私有的博客主题文件仓库(NexT主题,fork后自己拉分支更新自己的配置), 一个私有的博客源文件仓库, 使用git submodule 引用自己的私有主题仓库。 一个公有的github Page 仓库。

需要获取一个GitHub Personal Access Token 用来推送构建好的文件到公有的 GitHub Pages仓库, PAT(Personal Access Token)的创建过程:点击 GitHub 用户设置页面 最下方的 Developer setting ,然后选择 Personal access tokens 来生成一个 token,由于我们只需要能够对普通仓库 push 就行了,所以把 repo 部分勾上即可。

Ps: 生成的 token 只会显示一次,一定要及时保存下来,否则就只能删除重新创建了

创建两个安全环境变量: 点开博客源文件仓库上方的 Settings,点到左侧的 Secrets 项,添加两个环境变量 GH_REF 、GH_TOKEN,值分别填写自己的 GitHub Pages 仓库地址(不包含 https:// )和刚刚申请到的PAT

具体步骤

准备工作做好之后就可以写GitHub Actions 配置文件了。

触发条件和运行环境

设置在master分支上push操作的时候触发构建部署动作 使用最新的 Ubuntu 系统作为编译部署的环境,同时设置一个全局环境变量将时区修改为 Asia/Shanghai,具体的配置部分为:

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

on:
push:
branches:
- master
env:
TZ: Asia/Shanghai

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

steps:
............

检出代码和submodule

由于我的主题文件是私有仓库,需要在检出的时候使用PAT。另外,.gitmodules文件中的url要是https格式而非ssh格式参考这个issue,还有这个社区文档

具体配置部分为:

1
2
3
4
5
6
7
8
9
10
11
12
steps:
- name: Checkout codes
uses: actions/checkout@v2

- name: Checkout Private submodules
uses: actions/checkout@v2
with:
repository: yangfan16/hexo-theme-next
token: ${{ secrets.GH_TOKEN }}
path: themes/next

............

安装依赖

官方不建议直接缓存 node_modules 目录,所以这里设置的是 npm 的下载缓存目录 ~/.npm,这样后面仍需要使用 npm install 来安装依赖。使用的是 package-lock.json 文件的 hash 值来标识缓存是否可以命中,避免每次都要重新下载,从而加快构建速度。 除此之外使用gulp压缩混淆前端代码。

具体的配置部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '13.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 clean && hexo generate

- name: Execute gulp task
run: gulp
............

部署博客

网上的解决方案大多是生成SSH and GPG keys 然后在配置文件中加载私钥。 步骤繁杂,配置文件中一堆手写ssh密钥,不安全也不优雅,需要先安装Hexo的环境,

我这边直接clone代码,然后push到我的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 "yangfan"
git config user.email "yangfan9915@gmail.com"
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
52
53
54
55
56
57
58
name: MyBlog 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: Checkout Private submodules
uses: actions/checkout@v2
with:
repository: yangfan16/hexo-theme-next
token: ${{ secrets.GH_TOKEN }}
path: themes/next

- name: Setup node
uses: actions/setup-node@v1
with:
node-version: '13.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 clean && 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 "yangfan"
git config user.email "yangfan9915@gmail.com"
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

总结

将博客的构建部署方式更换为Github Actions之后非常方便,有问题排查也很方便,到目前为止,感觉还是比较舒服的