上线使用效果

每次提交代码,就会自动部署,自动更新个人网站.

已上线-GitHub Actions 自动化部署 Hugo for GitHub Pages_云原生

GitHub Actions 自动化部署 Hugo for GitHub Pages

GitHub 提供了直接在 GitHub 仓库中创建软件生命周期工作流(workflow)的功能,极大地方便了持续集成、持续部署的实现。

本文将使用 GitHub Actions 实现 Hugo 博客自动部署到自建 VPS。基本思路是在每次 push 到 GitHub 之后触发 Actions 将最新代码 checkout 到另一个仓库,Github Page.

创建workflows

在 GitHub 仓库的 Actions 页面可看到大量的基于各种服务的模板,也可点击 set up a workflow yourself 生成一个通用模板,并在此模板基础上修改。修改保存后的工作流将以 commit 的形式提交到 ​​.github/workflows​​​ 目录下。本文所述工作流的完整配置详见 ​​main.yml​​,下面对此工作流逐一拆解。

触发时机

GitHub 生成的通用模板是在 master 分支的 push 和 pull request 事件时触发,按需修改为仅在 push 时触发:

on:
push:
branches: [ master ]

git checkout

工作流的第一步是检出最新代码到 GitHub Actions 的虚拟环境中,通过 ​​actions/checkout​​ 实现。

uses: actions/checkout@v2

安装 Hugo

uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.55.5'
extended: true

构建

安装了 Hugo 之后,就可以像往常一样使用 Hugo 的各种子命令了。直接在使用 ​​hugo --minify​​ 构建即可。

- name: Build
run: |
hugo --minify

部署

虽然 Hugo 提供了 ​​hugo deploy​​ 命令实现部署操作,但此命令仅支持部署到 Google Cloud Storage (GCS)、Amazon S3 和 Azure Storage 服务器,对于小众 VPS 无能为力。

由于 Hugo 生成的是静态网站(默认在 ​​public​​​ 目录下),对静态网站的部署其实就是将 ​​public​​ 目录同步到

peaceiris/actions-gh-pages@v3

个人博客源码-部署流程

name: build-and-deploy
on:
push:
branches:
- main # Set a branch name to trigger deployment
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- name: Git checkout
uses: actions/checkout@v2
with:
submodules: true # Fetch Hugo themes (true OR recursive)

- name: Setup hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.74.3'
extended: true

- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.TOKEN }}
external_repository: xxx/xxx.github.io # Pages 远程仓库
publish_dir: ./public
# keep_files: true
publish_branch: master
cname: shenhonglei.com