使用 Github Action + Vercel 为 Hexo 的 Pandoc 渲染器提供支持

发表于 分类于 Waline： 本文字数： 977 阅读时长 ≈ 3 分钟

前些日子，笔者把 Hexo 的 Markdown 渲染器更换为 hexo-renderer-pandoc，以便获得更好地数学公式渲染体验。

替换的过程并不是非常顺利——该渲染器需要有 pandoc 的后端渲染程序支持，但博客先前采用的是 Vercel 部署，而 Vercel 并没有办法安装 pandoc 程序，无法为渲染插件提供支持。

经过研究，笔者采用了一种新的部署方式，即通过 Github Action 进行内容生成，并使用 Vercel 进行静态页面托管。

此过程需要一些操作步骤，特此记录。

部署流程变化示意图

原部署方式：

graph LR

A["Hexo源码\n(Github仓库A)"]
B["Hexo g 生成页面\n(Vercel)"]
C["网页公网访问\n(Vercel)"]

A--"被抓取"-->B-->C

现有部署方式：

graph LR

A["Hexo源码\n(Github仓库A)"]
B["环境部署、生成页面\n(仓库A, Action)"]
C["静态页面\n(Github仓库B)"]
D["网页公网访问\n(Vercel)"]

A-->B--"推送"-->C--"被抓取"-->D

详细操作步骤

建立 GITHUB 仓库

在 Github 网站建立两个仓库，名称任意。其中一个仓库用于存放 Blog 文件的源码（以下称 仓库A），另一个用于存放生成以后的静态内容，即 public 目录下的内容（以下称 仓库B）。

建立 Github Action 配置文件

在本地的博客文件夹内，新建 .github/workflows 目录，在目录下新建一个 deploy_pub.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
name: Hexo Deploy

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout source
      uses: actions/checkout@v3
    
    - name: Setup pandoc
      uses: nikeee/setup-pandoc@v1
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '>=18'

    - name: Set SSH Key
      env:
        ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
        ACTION_GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
        ACTION_GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
      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 "$ACTION_GIT_USER_EMAIL"
        git config --global user.name "$ACTION_GIT_USER_NAME"

    - name: Setup Hexo and dependencies and Deploy
      run: |
        cd hexo-dir
        npm install hexo-cli -g
        npm install
        hexo clean
        hexo d

注意，其中的分支名可能是 "main"，根据自己的需要修改。文件中的 “uses” 引用也可以依据情况修改，使用较新的版本。

修改博客 _config.yml

修改站点的 config 文件，设置 deploy 的目标地址为 仓库B，填入：

1
2
3
4
deploy:
 - type: git
   repo: git@github.com:你的用户名/仓库B的名称.git
   branch: master

生成 deploy key 密钥对

使用 ssh-keygen 生成：

1
ssh-keygen -t rsa -f ./deploy_key -C hexo_deploy

密钥的密码留空。

执行完毕后，我们可以在当前目录下得到用于部署的密钥对。

设置 Github Repo Secrets

打开 Github 网站，转到 仓库 A 的设置页面，点开 Secrets and variables ，新建三个 Repository secret。

其中：

  • HEXO_DEPLOY_KEY 填写 deploy_key 的私钥

  • GIT_USER_NAME 填写用于 push 的 git 用户名

  • GIT_USER_EMAIL 填写用于 push 的 git 邮箱

设置 Github Repo Deploy Key

打开 Github 网站，转到 仓库 B 的设置页面，点开 Deploy keys ，点击 add deploy key。

名称任意，内容填写生成的 deploy_key 的公钥。

注意，需要勾选 Allow write access。

推送与检查

将本地的 仓库 A 推送至 Github 上。推送完毕后，Action 应当自动运行。如果未运行，可以再 commit 和 push 一次，触发一下。

在 Action 运行完毕且没有报错的情况下，我们可以打开 仓库B ，此时，仓库中应当存放有生成以后的静态内容。

Vercel 导入

确认 仓库 B 中存在内容后，打开 vercel 网站，新建一个 Project，导入 仓库B 。由于不需要 Vercel 进行博客内容生成，因此，其模板选用 other。等待 vercel 部署完成，然后配置一下自定义域名，即可访问博客。

后续

在后续使用过程中，如果更新了博客，只需要将其推送到 仓库 A。余下的工作将由 仓库 A 的 Action 和 仓库 B 的 Production 流程自动完成，无需我们干预。