Featured image of post Hugo + Serv00 + GitHub Actions:打造全自动博客部署流水线

Hugo + Serv00 + GitHub Actions:打造全自动博客部署流水线

本文详细介绍如何结合 Hugo 静态网站生成器、Serv00 虚拟主机和 GitHub Actions 自动化工作流,实现博客内容的全自动构建与部署,让你专注于写作。

Hugo + Serv00 + GitHub Actions:打造全自动博客部署流水线

对于静态博客而言,每次写完文章都要手动构建并上传到服务器,无疑是一种重复且繁琐的劳动。本文将手把手教你如何利用 Hugo(一个超快的静态网站生成器)、Serv00(一个提供免费套餐的虚拟主机服务)和 GitHub Actions(GitHub 的自动化工作流工具)三者结合,构建一个全自动的博客部署系统。从此,只需专注于写作,其余一切交给自动化流程。

核心原理

整个自动化流程的核心思想非常简单:

  1. 写作与提交:你在本地使用 Hugo 编写 Markdown 格式的博客文章。
  2. 触发构建:当你将包含新文章的代码推送到 GitHub 仓库时,会自动触发 GitHub Actions 工作流。
  3. 自动构建:GitHub Actions 会在云端服务器上拉取你的代码,安装 Hugo,并执行 hugo 命令,生成最终的静态网站文件(通常在 public 目录)。
  4. 自动部署:构建完成后,GitHub Actions 会通过安全的 SSH 连接,将生成的静态文件自动同步到你的 Serv00 主机上。
  5. 即时生效:部署完成后,你的博客网站就会立即更新,全球用户都可以访问到最新内容。

前提条件

在开始之前,请确保你已经完成以下准备工作:

  • 一个 GitHub 账号,并已创建一个用于存放 Hugo 博客源代码的仓库(例如 my-blog-source)。
  • 一个 Serv00 账号,并已成功添加一个网站(域名可以是 Serv00 提供的免费子域名,也可以是你自己的自定义域名)。
  • 本地已安装 Hugo。

第一步:配置 Serv00 服务器

Serv00 的网站文件通常存放在 ~/domains/your-domain.com/public_html 目录下。为了让 GitHub Actions 能够自动上传文件,我们需要配置 SSH 密钥认证。

1. 在 Serv00 上创建 .ssh 目录

登录你的 Serv00 账户,通过 SSH 连接到你的服务器(或使用面板中的终端功能),执行以下命令:

1
2
mkdir -p ~/.ssh
chmod 700 ~/.ssh

2. 生成并配置部署密钥

在你的本地电脑上,生成一对新的 SSH 密钥,专门用于部署。不要使用你常用的 GitHub SSH 密钥。

1
2
# 生成新的密钥对,例如命名为 id_rsa_serv00_deploy
ssh-keygen -t rsa -b 4096 -C "github-actions-deploy" -f ~/.ssh/id_rsa_serv00_deploy

此命令会生成两个文件:id_rsa_serv00_deploy(私钥)和 id_rsa_serv00_deploy.pub(公钥)。

3. 将公钥上传到 Serv00

将公钥内容(id_rsa_serv00_deploy.pub 文件的全部内容)追加到 Serv00 服务器的 ~/.ssh/authorized_keys 文件中。

1
2
3
4
5
6
# 如果 authorized_keys 文件不存在,先创建它
touch ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

# 将公钥内容粘贴进去
echo "你的公钥内容" >> ~/.ssh/authorized_keys

现在,任何持有对应私钥的客户端都可以通过 SSH 无密码登录到你的 Serv00 服务器。

第二步:配置 GitHub 仓库 Secrets

为了安全地在 GitHub Actions 中使用你的 Serv00 私钥和服务器信息,我们需要将它们存储在仓库的 Secrets 中。

  1. 进入你的 GitHub 博客源码仓库。

  2. 点击 Settings -> Secrets and variables -> Actions

  3. 点击 New repository secret,创建以下三个 Secret:

    • Name: SERV00_HOST Value: 你的 Serv00 服务器地址(例如 s4.serv00.com)。
    • Name: SERV00_USERNAME Value: 你的 Serv00 SSH 用户名。
    • Name: SERV00_SSH_PRIVATE_KEY Value: 将你刚刚生成的 私钥 id_rsa_serv00_deploy全部内容(包括 -----BEGIN OPENSSH PRIVATE KEY----------END OPENSSH PRIVATE KEY-----)粘贴进来。
    • Name: SERV00_REMOTE_PATH Value: 你的域名网站根目录(例如 /home/your-username/domains/your-domain.com/public_html)。
    • Name: SERV00_SSH_PASSPHRASE Value: 私钥的密码,如果有的话就填入。
    • Name: SERV00_PORT Value: SSH 端口,一般为 22,选填。

hugo_github_action_10.png

hugo_github_action_11.png

第三步:创建 GitHub Actions 工作流

在你的 Hugo 博客源码仓库根目录下,创建一个 .github/workflows 目录。然后,在该目录下新建一个 YAML 文件,例如 deploy-to-serv00.yml

将以下内容粘贴到 deploy-to-serv00.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
name: Deploy Hugo to Serv00

on:
  push:
    branches: [ "main" ]
  #workflow_dispatch: #打开此项为手动触发,默认自动触发

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    # 1. 检出代码
      - name: Checkout code
        uses: actions/checkout@v4
	# 2. 安装 Hugo
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
        # hugo 版本最好与本地环境一致
          hugo-version: '0.147.9' 
          extended: true
	# 3. 构建静态网站
      - name: Build with Hugo
        run: hugo --minify
	# 4. 部署到 Serv00
      - name: Deploy to Serv00
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.SERV00_HOST }}
          username: ${{ secrets.SERV00_USERNAME }}
          key: ${{ secrets.SERV00_SSH_PRIVATE_KEY }} 
          passphrase: ${{ secrets.SERV00_SSH_PASSPHRASE }}
          port: ${{ secrets.SERV00_PORT }}
          # 构建后的文件会放在 public 目录下,需要将里面的内容同步到服务器
          source: "public" 
          target: ${{ secrets.SERV00_REMOTE_PATH }}
          strip_components: 1 

重要提示:请务必将 TARGET 字段中的 your-domain.com 替换为你在 Serv00 上实际使用的域名。

工作流解析

  • on: 定义触发条件,这里设置为当代码推送到 main 分支时自动运行。
  • uses: actions/checkout@v4: 拉取你的仓库代码。
  • uses: peaceiris/actions-hugo@v3: 一个社区提供的 Action,用于在工作流环境中安装指定版本的 Hugo。
  • run: hugo --minify: 执行 Hugo 命令构建网站,并对生成的文件进行压缩。
  • uses: appleboy/[email protected]: 这是一个用于通过 SCP (Secure Copy Protocol) 安全地将文件从 GitHub Actions 运行器复制到远程服务器的 Action 。strip_components: 1 参数用于在复制时去掉 public 这一层目录,直接将 public 目录下的文件和文件夹复制到目标目录中,这正是我们部署网站所需要的结构

第四步:测试与验证

现在,一切准备就绪!

  1. 在本地写一篇新的博客文章。

  2. 将更改提交并推送到 GitHub 仓库的 main 分支。

    1
    2
    3
    
    git add .
    git commit -m "Add new post"
    git push origin main
    
  3. 推送完成后,前往你的 GitHub 仓库,点击 Actions 标签页,你应该能看到一个名为 “Deploy Hugo to Serv00” 的工作流正在运行。

  4. 等待工作流成功完成(通常只需要几十秒到一分钟)。

  5. 刷新你的博客网站,新文章应该已经出现在网站上了!

本博客所有内容无特殊标注均为大卷学长原创内容,复制请保留原文出处。
Built with Hugo
Theme Stack designed by Jimmy