前面写过把 Hexo 生成的静态网页部署到 Github Pages,虽然使用了 CloudflareCDN 加速优化,由于现在的网络限制,访问速度很不理想,加速也可能变减速,还有使用了 Github Pages,项目仓库就不能设为私有。

可以通过使用 Vercel 部署静态网页来稍微改善一下访问速度,这样也可以把项目仓库设为私有,网上把静态网页部署到 Vercel 的教程很多,部署也比较简单,这里就不多加介绍了。

实际使用中 Vercel 会有明显的卡顿,更换到 Cloudflare Pages 部署。

而且通过本机 hexo d 上传生成的静态网页到 Github,受限于一些网络限制,推送到 Github 仓库时经常会因为网络原因导致推送失败。

那么把 Hexo 的源码上传到 Github,使用 GitHub Actions 来自动部署 Hexo,省去了本地部署网络的干扰,不仅更便捷,而且源码上传 Github,源码仓库也可以设为私有,更可以多一重备份,多一重安全。

一、Hexo

  1. 测试一下本地是否可以正常运行推送

建议先熟练本地部署。部署命令

  • 清除缓存文件
1
hexo clean
  • 生成静态文件
1
hexo generate
  • 部署网站
1
hexo deploy
  1. 确认 _config.yml 文件中有类似如下的配置

修改为自己的用户名和仓库名

1
2
3
4
deploy:
type: git
repo: git@github.com:test/hexo.git
branch: main

注意,仓库路径使用 git 路径的 SSH 方式,而不是 https 链接的方式,虽然本地部署的时候使用 https,可以正常部署,但是使用 GitHub Actions 自动部署的时候,会出现错误 err: Error: Spawn failed 导致自动部署失败。

二、生成密钥

可以参考文章 使用 Hexo 在个人电脑搭建博客网站并发布在 Github Pages 来生成密钥。

1
ssh-keygen -t rsa -b 4096 -C "your github name" -f github-deploy-key -N ""

这会在当前目录生成两个文件:

  • github-deploy-key —— 私钥
  • github-deploy-key.pub —— 公钥

三、GitHub 配置秘钥

我们把私钥放到我们存放 Hexo 源码仓库里面,用于触发 Actions 时使用。

公钥放到 静态网页 存放的仓库里面,用于 Hexo 自动部署时的写入工作。

3.1、配置私钥

首先在 GitHub 上打开保存 Hexo 源码的仓库,源码仓库可以设为私有,访问 Settings -> secrets and variables,选择 New Repository secrets,名字部分填写:HEXO_DEPLOY_KEY,注意大小写,这个后面的 GitHub Actions Workflow 要用到,一定不能写错。

Value 的部分填入 github-deploy-key 中的内容。

3.2、配置公钥

接下来我们需要访问存放静态网页的仓库,也就是 Hexo 部署以后的仓库,访问 Settings -> Deploy keys,按 Add deploy key 来添加一个新的公钥。

Title 中输入:HEXO_DEPLOY_PUB 字样,当然也可以填写其它自定义的名字。

Key 中粘贴 github-deploy-key.pub 文件的内容。

注意:一定要勾选 Allow write access 来打开写权限,否则无法写入会导致部署失败。

四、创建 Workflow

首先在 Hexo 的仓库中创建一个新文件:.github/workflows/deploy.yml,文件名可以自己取,但是一定要放在 .github/workflows 目录中,文件的内容如下

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

on:
push:
branches:
- main
env:
TZ: Asia/Shanghai # 不设置时间会与本地时间不一致。

jobs:
build:
runs-on: ubuntu-latest # 使用最新的 Ubuntu 系统作为编译部署的环境
if: github.event.repository.owner.id == github.event.sender.id

steps:
- name: Checkout source
uses: actions/checkout@v3 # 使用v2,会报错,更新到v3无报错。
with:
ref: main

- name: Setup Node.js
uses: actions/setup-node@v3 # 使用v1,会报错,更新到v3无报错。
with:
node-version: '16.x' # 更新到较新版本,12版本已淘汰。

- name: Setup Hexo
env:
ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
run: |
mkdir -p ~/.ssh/
echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
chmod 700 ~/.ssh
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "test@users.noreply.github.com"
git config --global user.name "test"
npm install hexo-cli -g
npm install

- name: Deploy
run: |
hexo clean
hexo generate
hexo douban # 如果没有安装豆瓣插件,这个命令就不需要
hexo deploy

简单解释一下,当我们推送内容到远程 main 分支的时候,就会触发这个 Workflow

使用 Ubuntu 最新版作为 hexo deploy 的系统。

首先 checkout 源代码,然后设置使用最新的 Node.js v16 LTS 作为 node 解释器。

接下来就是创建 SSH 相关的配置文件,注意 secrets.HEXO_DEPLOY_KEY 就是对应我们之前设置的私钥,所以名字一定不要搞错。

git config 相关的名字和邮件地址替换成大家自己使用的就好了。

最后就是安装 Hexo CLI,各个依赖模块和部署了。

五、验证

GitHub Actions 页面查看运行结果,前面有绿色钩钩的,就表示部署成功,红色叉叉的表示失败。如果部署失败,还会收到 GitHub 的邮件提醒。

生成的静态页面会自动写入到网页仓库,这样每次更改内容的时候,就不用再本地部署上传了,直接推送源码到 Github 触发自动部署,而网页仓库更新时会自动触发 Cloudflare Pages 的自动部署。

参考文章:GitHub Actions 来自动部署 Hexo