通过 GitHub Actions 实现 Hexo 博客的自动部署
2022-02-13 10:06:43 #Hexo  #Docker 

现在的博客编译环境是在本地，有时候如果想要改一下博客的内容，必须要本地电脑才可以编译，再部署到服务器

现在改变想法，通过 VSCode 的在线编辑器实现对 GitHub 中的仓库做修改，GitHub Actions 追踪修改情况并提供容器建立编译环境，同步静态页面到我的服务器上

❗ 文末有疑难注意点，需要特别关注

整体流程

  1. 在 VSCode 的在线编辑器上打开 GitHub/blog 仓库中需要修改的文章，在编辑器中直接修改；也可以 git clone 下来在 Typora 中修改
  2. 修改完后通过编辑器 OR git push 到仓库里
  3. GitHub Actions 追踪仓库的变更情况，发现有提交时启动
  4. 在 GitHub 提供的容器上建立临时的 Hexo 编译环境，通过 rsync 将编译好的静态页面同步到我的服务器上

仓库目录

GitHub/blog 仓库中需要保存有主题文件、配置文件和 markdown

.github/workflows/deploy.yml在 GitHub 中创建

1
2
3
4
5
6
7
.
├── .github/workflows/deploy.yml
├── scaffolds/
├── source/
├── themes/
├── _config.yml
└── package.json

建立 GitHub Actions 服务

image-20211106142920864

随便选一个，然后修改deploy.yml配置文件，需要注意它的路径一定是.github/workflows/deploy.yml；以及注意追踪的分支是否设置正确，我这里设置的是main分支

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

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-20.04

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

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

      # 建立编译环境
      - name: npm install
        run: |
          npm install hexo-cli -g
          npm install
        env:
          CI: true

      # 编译
      - name: hexo build
        run: |
          hexo clean
          hexo generate

      # rsync 将生成的静态页面同步到个人服务器
      - name: hexo deploy
        uses: easingthemes/ssh-deploy@main
        env:
          ARGS: "-avz --delete"
          SOURCE: "./public/"
          TARGET: ${{ secrets.SERVER_TARGET }}
          REMOTE_USER: ${{ secrets.SERVER_USER }}
          REMOTE_HOST: ${{ secrets.SERVER_HOST }}
          REMOTE_PORT: ${{ secrets.SERVER_PORT }}
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}

      # 百度收录
      - name: hexo sumbit
        run: |
          hexo deploy

关于hexo deploy中的变量需要注意

通过项目的setting > secrets保存这些变量的具体值，这样关于密钥等信息就不会被看见

关于 easingthemes/ssh-deploy 可以看一下，了解相应变量的意义

在本地电脑上生成 ssh 密钥对，公钥见下一节建立服务器容器中的操作

1
ssh-keygen -m PEM -t rsa -b 4096

SERVER_TARGET：同步到服务器的目标地址，这里是 nginx 的部署目录/home/www/hexo

SERVER_USER：发起连接的用户，我图省事直接用的root

SERVER_HOST：云服务器的 IP 地址或域名

SERVER_PORT：部署时用到的端口，比如5022，在下一节内容中也会用到

SERVER_SSH_KEY：~/.ssh/id_rsa中记录的私钥

image-20211106144030464

建立服务器容器

在服务器上建立 docker 容器，编写 Dockerfile。具体配置文件可见 Dockerfile/blog，并下载

1
2
3
4
5
6
7
.
├── authorized_keys
├── Dockerfile
├── nginx.conf
├── rsyncd.conf
├── run.sh
└── README.md
  • authorized_keys：用以存储上一节中生成的公钥，需要填入公钥内容
  • Dockerfile：用以定制镜像，无需改动
  • nginx.conf：Nginx 的配置文件，无需改动
  • rsyncd.conf：rsync 的配置文件，无需改动
  • run.sh：容器拉起进程的启动脚本，无需改动

打开Dockerfile/blog/目录，编辑authorized_keys，保存公钥；然后在当前目录定制镜像

1
docker build -t blog:v1 .

image-20220213235016810

启动容器，这里用于部署的5022端口也与上一节 GitHub 中设置的SERVER_PORT对应

1
docker run -d -h blog --name blog -p 5080:80 -p 5022:22 blog:v1

容器中启动了对应的进程

image-20220213235441250

测试

本次测试就是将本文通过 web 编辑器同步到 GitHub 仓库，然后查看 GitHub Actions 的构建流程

image-20211106144609081

image-20211106144618651

也可以看到博客上部署出来了

image-20211106144703871

结语

我一直都想要将笔记本上的代码环境隔离出来，通过 Windows 10 运行各种软件、游戏，通过 WSL2 实现编译工具链或者脚本环境。唯一不爽的就是 Hexo 的编译环境一直在 Windows 里，现在终于独立出来了，可以清理 Windows 上的环境了

疑难点

  1. 在本地创建的.github/workflows/deploy.yml，无法通过git push到 GitHub 仓库，需要在仓库的 Actions 中手动创建

  2. .github/workflows/deploy.yml中的- name: npm install环节用于建立编译环境。有需要的插件可以在仓库中package.json文件的dependencies中添加，如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    {
      "dependencies": {
        "hexo": "^6.0.0",
        "hexo-generator-archive": "^1.0.0",
        "hexo-generator-category": "^1.0.0",
        "hexo-generator-index": "^2.0.0",
        "hexo-generator-tag": "^1.0.0",
        "hexo-renderer-ejs": "^2.0.0",
        "hexo-renderer-marked": "^5.0.0",
        "hexo-renderer-stylus": "^2.0.0",
        "hexo-server": "^3.0.0",

        "hexo-filter-mathjax": "*",
        "hexo-abbrlink": "*",
        "hexo-baidu-url-submit": "*",
        "hexo-lazyload-image": "*",
        "hexo-generator-search": "*",
        "hexo-generator-searchdb": "*",
        "hexo-wordcount": "*",
        "hexo-generator-sitemap": "*",
        "hexo-generator-feed": "*"
    }

    上半部分为 Hexo 默认插件，下半部分为自用插件

  3. - name: hexo sumbit中虽然用到了hexo deploy命令，但实际上是为了利用hexo-baidu-url-submit插件将_config.yml中记录的百度收录提交

    并不像以往在本地环境，利用诸如hexo-deployer-git等插件来推送渲染后的页面；而是利用- name: hexo deploy环节中使用的easingthemes/ssh-deploy进行推送