基于 Github Actions 自动构建发布 Hugo 博客

前言

Hugo 是目前流行的开源静态网站生成器中的一个，使用它生成最终的静态页面放在 Web 服务器上即可完成部署。

通常来说，可能是工作流是这样：本地写文章 -> 本地构建页面 -> 上传 public 文件夹到云服务器。这个步骤有些繁琐，而本文简化了构建和上传步骤。

这里，我们介绍如何基于 Github Actions 自动构建静态页面并发布到云服务器上实现页面自动更新内容。

本文基于 Stack 主题的 CaiJimmy/hugo-theme-stack-starter 模板，这样帮我们省事不少，因为自带了 Github Actions ，我们只需要修改模板里的 .github/workflows/deploy.yml 文件即可实现自动发布到云服务器上。

前置条件：

Linux 系统的云服务器
基于 CaiJimmy/hugo-theme-stack-starter 创建了自己的仓库
会 Git 命令

当然，其他主题也会有类似的快速开始的模板，大同小异。

实现步骤

修改 .github/workflows/deploy.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
47
48
49
50
51
52
53
54
55
56
57
name: Deploy to Cloud Server

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

jobs:
    build:
        runs-on: ubuntu-latest

        permissions:
            # Give the default GITHUB_TOKEN write permission to commit and push the
            # added or changed files to the repository.
            contents: write

        steps:
            - uses: actions/checkout@v3

            - name: Cache Hugo resources
              uses: actions/cache@v3
              env:
                  cache-name: cache-hugo-resources
              with:
                  path: resources
                  key: ${{ env.cache-name }}

            - uses: actions/setup-go@v4
              with:
                  go-version: "^1.17.0"
            - run: go version

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"
                  extended: true

            - name: Build
              run: hugo --minify --gc

            - name: Deploy to cloud server
              uses: burnett01/rsync-deployments@6.0.0
              with:
                  # -a: 表示以归档模式进行同步，保留文件的所有属性和权限
                  # -v: 表示输出详细的同步过程信息
                  # -z: 表示在传输文件时进行压缩，以减少传输时间和带宽
                  # -r: 表示递归地同步目录及其子目录
                  # --delete: 表示在目标目录中删除源目录中不存在的文件
                  switches: -avzr --delete
                  path: ./public
                  remote_path: /home/nginx/html/
                  remote_host: ${{ secrets.DEPLOY_HOST }} # 远程主机 IP
                  remote_port: ${{ secrets.DEPLOY_PORT }} # ssh 端口，默认为 22
                  remote_user: ${{ secrets.DEPLOY_USER }} # ssh user
                  remote_key: ${{ secrets.DEPLOY_KEY }} # ssh 私钥（云服务器创建密钥，下载的key.pem文件）

代码里有详尽的注释，这里还是展开介绍一下吧。如果你熟悉 Github Actions 的话，其实应该很好理解。不熟悉的话也没关系，照抄就行了。

重点在于最后一步:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
 - name: Deploy to cloud server
              uses: burnett 01/ rsync-deployments@6.0.0
              with:
                  # -a: 表示以归档模式进行同步，保留文件的所有属性和权限
                  # -v: 表示输出详细的同步过程信息
                  # -z: 表示在传输文件时进行压缩，以减少传输时间和带宽
                  # -r: 表示递归地同步目录及其子目录
                  # --delete: 表示在目标目录中删除源目录中不存在的文件
                  switches: -avzr --delete
                  path: ./public
                  remote_path: /home/nginx/html/
                  remote_host: $ {{ secrets.DEPLOY_HOST }} # 远程主机 IP
                  remote_port: $ {{ secrets.DEPLOY_PORT }} # ssh 端口，默认为 22
                  remote_user: $ {{ secrets.DEPLOY_USER }} # ssh user
                  remote_key: $ {{ secrets.DEPLOY_KEY }} # ssh 私钥（云服务器创建密钥，下载的 key. pem 文件）

使用 burnett 01/rsync-deployments 工作流，原理就是利用 Linux 的 rsync 命令将文件同步到对应的云服务器。

remote_path就是指云服务器上的站点挂载目录，比如我这里使用的 nginx ，挂载目录是 /home/nginx/html/
remote_host 指云服务器的公网 IP
remote_port是 ssh 登录的端口，默认是 22，如果自己修改过，填上对应的端口即可
remote_user就是指云服务器的用户名
remote_key 云服务器的密钥，这个需要注意，不是 ssh 登录密码，而是通过云服务器厂商的控制台创建的密钥。比如，我这里用的是阿里云的服务器，在云服务器 ECS 页面，网络与安全 - 密钥对这里创建一个，会得到一个 xxxx. pem 的文件，保存好这个文件，后面会用到。

然后，前往 GitHub 博客仓库，在 Settings - Secrets and variables - Actions 界面添加 secret key。

创建 secret：

DEPLOY_HOST 填入公网 IP
DEPLOY_PORT 填入 ssh 端口
DEPLOY_USER 填入用户名
DEPLOY_KEY 填入 xxx. pem 文件的内容

之后，登录自己的云服务器，查看是否安装 rsync，同时查看是否处于运行中：

1
2
3
4
5
6
~# systemctl status rsync
○ rsync. service - fast remote file copy program daemon
     Loaded: loaded (/lib/systemd/system/rsync. service; disabled; vendor preset: enabled)
     Active: inactive (dead)
       Docs: man: rsync (1)
             man: rsyncd.conf (5)

Active: inactive (dead)就说明未启动，我们设置为开机自动：

1
2
systemctl enable rsync
systemctl start rsync

然后再使用 systemctl status rsync 可以看到：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
~# systemctl status rsync
○ rsync. service - fast remote file copy program daemon
     Loaded: loaded (/lib/systemd/system/rsync. service; enabled; vendor preset: enabled)
     Active: inactive (dead)
  Condition: start condition failed at Thu 2023-11-30 23:29:42 CST; 3 days ago
             └─ ConditionPathExists=/etc/rsyncd. conf was not met
       Docs: man: rsync (1)
             man: rsyncd.conf (5)

Nov 30 23:29:42 ecs systemd[1]: Condition check resulted in fast remote file copy program daemon being skipped.

多了 Condition: start condition failed at Thu 2023-11-30 23:29:42 CST; 3 days ago这一行之后，就可以使用了

验证

1
2
3
git add -u
git commit -m "add actions"
git push

git 三部曲之后前往 GitHub 查看结果

同时，可以查看自己的博客是否已经更新。

总结

本文介绍了 Github Action 自动构建发布到云服务器上的方法，当然也可直接发布到 GitHub Pages 上，由于这样更简单，可直接参考基于 Github Action 自动构建 Hugo 博客 - (lixueduan.com) 。

基于 Github Action 自动构建 Hugo 博客 - (lixueduan.com)

前言

实现步骤

验证

总结

预览: