Hugo使用Github Action自动部署博客到Github Pages

最后编辑于 2021-03-11

github actions提供了免费的CI/CD功能，能够响应github repo的事件执行一系列自动化的操作。

hugo可以生成静态博客，但是没有像hexo那样内置部署到github的功能，但官方也提供了部署到github pages的文档。

hugo手动部署到github pages很简单：

使用hugo或hugo --minify生成静态网页
将静态网页push到建好的github pages repo中，一般是<username>/<username>.github.io

而设置github actions自动部署稍微麻烦点：

我将博客源码分开存放到一个private repo里，也可以将源码放到github pages repo中，但这样其他人能获取文章的源文件。分开存放这种情况需要获取一个personal_token或者deploy_key，这里选择personal_token的方式，这种方式更简单，后者可以自行了解。

首先点击github头像在下拉栏里进入Setting-Developer Settings-Personal access tokens

选择Generate new token

生成personal token

在上方填入名字，并勾选repo里的所有选项：

填入名字

还有admin:repo_hook

repo_hook

点击Generate token生成token，并先复制保存该token。

然后执行以下几步：

在源码repo里新建一个github-actions分支：git checkout -b github-actions
在repo根目录新建嵌套的两个文件夹.github/workflows
在workflows里新建一个后缀为.yml的配置文件，名字自取。
写进去以下配置（从hugo官方文档修改而来）：

 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
name: github pages # 名字自取

on:
  push:
    branches:
      - github-actions  # 这里的意思是当 main分支发生push的时候，运行下面的jobs，这里先改为github-actions

jobs:
  deploy: # 任务名自取
    runs-on: ubuntu-18.04	# 在什么环境运行任务
    steps:
      - uses: actions/checkout@v2	# 引用actions/checkout这个action，与所在的github仓库同名
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive) 获取submodule主题
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo	# 步骤名自取
        uses: peaceiris/actions-hugo@v2	# hugo官方提供的action，用于在任务环境中获取hugo
        with:
          hugo-version: 'latest'	# 获取最新版本的hugo
          # extended: true

      - name: Build
        run: hugo --minify	# 使用hugo构建静态网页

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3	# 一个自动发布github pages的action
        with:
          # github_token: ${{ secrets.GITHUB_TOKEN }} 该项适用于发布到源码相同repo的情况，不能用于发布到其他repo
          external_repository: tomial/tomial.github.io	# 发布到哪个repo
          personal_token: ${{ secrets.ACTION_ACCESS_TOKEN }}	# 发布到其他repo需要提供上面生成的personal access token
          publish_dir: ./public	# 注意这里指的是要发布哪个文件夹的内容，而不是指发布到目的仓库的什么位置，因为hugo默认生成静态网页到public文件夹，所以这里发布public文件夹里的内容
          publish_branch: main	# 发布到哪个branch

将上面的内容commit并push到github之后，可以在源码repo的Actions一栏里看到上面的任务已经自动运行了，但是现在还没有添加上面生成的personal access token，源码repo是没有更改其他repo的权限的，所以任务会失败，但是说明github actions已经被引入到项目中，开始正常工作了。

github actions

接下来在源码repo中添加上面的personal access token：

进入repo的Settings-Secrets一栏，选择New repository secret

secrets

在下面填入刚才生成的token，名字注意需要与上面yml文件里XXX相同

personal_token: ${{ secrets.XXX }}

添加token之后，进入github actions里点击刚才失败的任务，点击右上角Re-run jobs

rerun jobs

这时应该能够成功运行该任务，这说明自动部署已经开始在工作了，只需要将github actions配置文件里的github-actions部分改成main，再将其与main分支合并即可，以后往main分支push新文章时github actions会自动生成静态博客并发布到github pages中。

1
2
3
4
on:
  push:
    branches:
      - github-actions # 改为main

参考资料：

Host on GitHub | Hugo

Workflow syntax for GitHub Actions

peaceiris/actions-gh-pages

peaceiris/actions-hugo