利用 Github Action 部署 Hexo

先说说怎么在本地预览

不知道是我的 hexo 有问题还是它的设计有缺陷,我经常能遇到利用 hexo -s 启动起来测试服务器以后改东西也仍然会无法及时更新,然后我决定尝试利用 hexo g --watch 配合一个静态服务器(我用的是 Caddy,一个轻量又强大的服务器),测试下来发现成功率比 hexo -s 高不少。

前言

博客好久没管了,因最近 女朋友 想不开开始研究博客,故我也想起我自己的博客,就来折腾一下。受限于技术博客的简洁又复杂,大体上没什么可改的,主题也很满意,于是我的折腾便从主题的更新和部署下手了。

主题一直用的 NexT.Mist,从 NexT v3 一直用到了现在的 v7,比较满意的是 NexT 从 v6 全面社区化开始就增加了可以不修改主题模板而自定义配置的功能,v7 更是新增了数据目录,可以说是对于使用者非常友好了。
我的博客之前一直都是将 NexT 主题文件放入了代码仓库(v5 及之前的时代我更是完全没有把博客放入版本控制,就是因为主题更新复杂),这次的折腾改成了 submodule,以后的更新等便更加方便了。

而另一个改动就是利用 Github Action 进行部署。之前我的博客是利用 TravisCI 从 Github 拉取代码后传到 Coding 进行部署的,前不久 Github Action 发布我就一直打算迁移,还有就是 Coding 经常变动而且总是挂,这次打算回归使用 Github Pages + Cloudflare CDN(嗯完全不考虑国内用户了)。

之后都是一些小改动了,比如将 Disqus 评论切换成了更「智能」的 DisqusJS、合并了百度与 Google 的 sitemap,添加了一些个人联系方式等,就不细说了。

GitHub submodule 管理主题

偷懒,直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 首先把 next 主题 fork 一份
# 添加 submodule
cd themes
git submodule add https://github.com/ImSingee/hexo-theme-next next
# 设定本地使用 SSH 推送
git config submodule."themes/next".url [email protected]:ImSingee/hexo-theme-next.git
git remote remove origin
git remote add origin [email protected]:ImSingee/hexo-theme-next.git
# 新建 publish 分支
cd next
git branch -b publish
git push origin publish
git branch --set-upstream-to=origin/publish publish
# 将默认的拉取路径设定为 publish 分支
cd ../..
echo " branch = publish" >> .gitmodules

另外修改 .gitmodules 文件

我选择了 fork 一份 next 主题而不是直接使用 next 官方仓库,原因有以下几种

  1. 保证了后续部署过程中的版本稳定
  2. 可以自由的对主题进行一定的修改,后续升级的时候不会丢失这些修改信息
  3. 最主要的原因是,NexT 的 menu 必须有 Archives,但是我并不想要,这个菜单不能去掉应该是 bug,但是在修复前我只能选择自己克隆一个目录修改了

另外就是,我这里对 submodule 使用的是 https 格式,主要考虑到 https 格式的链接可以免登录直接 clone 而 ssh 格式则必须登录;而另外设定本地使用 SSH 则是为了防止推送时需要输入 github 密码

为了方便进行一些修改!

利用 Github Action 部署 Hexo

好了终于到了核心环节了,先上 Github Action 代码

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
name: Deploy Blog

on:
push:
branches:
- master

jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source
uses: actions/checkout@v2
with:
path: main
- name: Checkout submodules
run: |
cd main
auth_header="$(git config --local --get http.https://github.com/.extraheader)"
git submodule sync --recursive
git -c "http.extraheader=$auth_header" -c protocol.version=2 submodule update --init --force --recursive --depth=1
- name: Setup node and yarn
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: Install hexo dependencies
run: |
cd main
yarn
npm i -g hexo-cli
- name: Generate blog
env:
TZ: Asia/Shanghai
run: |
cd main
hexo clean
hexo generate
ls
- name: Checkout gh-pages
uses: actions/checkout@v2
with:
path: gh-pages-pre
ref: gh-pages
fetch-depth: 0
- name: Publish to gh-pages
env:
TZ: Asia/Shanghai
run: |
mv main/public gh-pages
cp -r gh-pages-pre/.git gh-pages/
cd gh-pages
git config --local user.email "[email protected]"
git config --local user.name "GitHub Action"
git add .
git commit -m "Auto Delopy at `date +"%Y-%m-%d %H:%M"`"
git push origin gh-pages

主要做了以下几件事

  • 检出文章代码至 main 目录
  • 下载 submodule(默认 checkout 是不会拉取 submodule 的)
  • 下载 node 与 yarn
  • 安装依赖于 hexo-cli(hexo-cli 似乎只能用 npm 安装,我用 yarn 安装后续会提示找不到文件)
  • 生成博客(注意需要设定时区,不然 RSS 的时间等可能会出问题)
  • 检出原来存储博客文章的仓库及相应的分支至 gh-pages-pre 目录
  • 将文章存至相关目录并部署(注意需要设定时区,不然提交记录的时间会出问题;注意需要在 push 前设定用户信息)

总体而言各种奇奇怪怪的坑还是不少的(也可能是因为我其他 CI 工具也不熟练,但是,安装完 hexo-cli 并成功转眼就没了是什么操作!),网上也并没有一个很好的方案,希望有同样困惑的人可以看到这篇文章并解决 XD

后续

突然想开一个 Markdown 写作工具的坑,大概如下

  • Mac 可用
  • 所见即所得
  • 支持 Hexo Front-Matter
  • 文件列表显示标题,而不是文件名
  • 可以自动更新更新时间
  • 可以方便的利用模板新建文章
  • 可以辅助添加 <!-- more --> 标签,或是生成摘要
  • 可以管理 Category 与 Tag
  • 可以一键预览、发布
  • 可以管理图片、一键上传至 CDN

哎这么多年了竟然没人做(Typora 要是支持插件就好了),等我有空了(立 flag 时间到)我就做一个……