博客主题升级与 GitHub Actions 自动部署

距离 上一次博客整理 过去有一段时间了，由于 jsDelivr 被撤销备案，加上自己也有在不同设备编写博文的需求，升级主题并利用 GitHub Actions 自动部署静态博客也就这么提上了日程。

注：本篇仅作流水账式记录。

整理博客的 Git repo

先前我将博客的中文站和英文站分别放在了两个文件夹中（点 此处 回顾），现在看了看目前 Hexo 对多语言的支持，还是不能满足在切换语言的时候分隔不同语言版本的博文，因此总体思路是不变的：我仍然实质上有中文站和英文站两个独立的 Hexo 工程，将生成的中文静态页拷贝到英文站的 public/ 下，部署时以 URL 的 /zh-hans 区分出不同语言的版本。

我以中文站和英文站的上级目录作为 Git repo：

.
├── .git
├── .github
├── blog
└── blog_zh-hans

.github 下会放置 GitHub Actions 的配置文件，后面会提到；blog 和 blog_zh-hans 分别是英文站和中文站的 Hexo 工程。

首先用 git subtree 将自己修改过的 Fluid 主题拉到 blog/themes/ 和 blog_zh-hans/themes 下；如果原先 themes/ 目录下有 fluid/ 一类的原主题文件夹，最好先对比一下，并将更新 push 到 自己的远端上游 后删除本地的文件夹：

# In the parent directory of blog and blog_zh-hans
git subtree add --prefix=blog/themes/fluid https://github.com/BrandoZhang/hexo-theme-fluid.git self-deployed --squash
git subtree add --prefix=blog_zh-hans/themes/fluid https://github.com/BrandoZhang/hexo-theme-fluid.git self-deployed --squash

如果不做这一步操作，由于 Fluid 主题本身是一个 Git repo，我在博客 repo 进行 Git 操作时会忽略掉主题文件，导致 GitHub Actions 无法安装自定义主题。

将 blog/themes/_config.yml 的内容同 blog/_config.fluid.yml 进行比较，更新配置文件；同理更新 blog_zh-hans/_config.fluid.yml。

将博客用到的静态资源，如头像、背景图等放到博客目录的 source/img/ 下，而不是主题的 source/img/ 下。

安装 Hexo 插件

支持 Git 部署：

npm install hexo-deployer-git --save

支持插入视频：

npm install hexo-tag-dplayer --save

配置 GitHub Actions

1. 首先设置 repo 的 Deploy Key.
2. 新建 .github/workflows/deploy.yml：

name: Hexo Deploy

on:
  push:
    branches:
      - biligual-source

env:
  TZ: Asia/Shanghai

jobs:
  build:
    runs-on: ubuntu-latest
    if: github.event.repository.owner.id == github.event.sender.id

    steps:
      - name: Checkout source
        uses: actions/checkout@v2
        with:
          ref: biligual-source

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '12'

      - name: Setup environment
        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 "zhang@brando.dev"
          git config --global user.name "BrandoZhang"

# If you would like to debug, uncomment the following two
#      - name: GitHub Actions debug
#        uses: mxschmitt/action-tmate@v3

      - name: Generate blog for en
        working-directory: ./blog
        run: |
          npm install -g hexo-cli && npm install
          hexo clean
          hexo generate
          mkdir -p ./public/zh-hans

      - name: Generate blog for zh-hans
        working-directory: ./blog_zh-hans
        run: |
          rm -rf node_modules && npm install --force
          npm install hexo-cli && npm install
          hexo clean
          hexo generate

      - name: Deploy to GitHub
        working-directory: ./blog
        run: |
          cp -r ../blog_zh-hans/public/. ./public/zh-hans/
          hexo deploy

3. 以后更新博文时将改动提交到 biligual-source 分支即可自动生成静态页面并部署。

Reference

Nuevo 的记录多语言改造和主题魔改历程
Igerm 的完美的Hexo多语言解决方案
利用 Github Actions 自动部署 Hexo 博客