建站第十一篇 Hugo+Github Pages+Github Action博客方案之三——配置Github Action实现自动发布

本系列包括三部分：

搭建本地服务
发布到Github Pages
配置Github Action实现CI/CD

本篇为第三部分——配置Github Action实现CI/CD。

本方案以第一篇Hugo搭建的博客为例，但不限于Hugo，所有的博客生成器都可以采用此方案。

为什么要配置自动发布

基于前两个部分组成方案中，一次更新过程如下：

在本地写好md文章
用hugo发布到public/目录下
复制到本地仓库(也可以将git本地仓库配置到public/目录下，但因为我同时也在用git管理md，这么做会将两个项目的git纠缠在一起，不够清爽，违背我的审美)
再推到远程仓库

这样做的弊端是：

本地必须管理两个git仓库，一个是hugo-md源码库，另一个是生成的静态网页库，增加了更新文章的复杂度；
发布必须先发一个本地，然后手动上传，也增加了出错的风险。

一个理想的状态是，我只负责写文，和将好的md提交到git备份，然后就可以坐等网站内容更新了。github官方提供的GitHub Action正可以满足这个需求。

这样的需求下，整个Github Action只需要做两件事：

编译，生成静态文件
部署，把静态文件移动到合适的位置
- 比如放到某个云服务器上
- 或者放到 Github Pages

然后我们再通过git push来触发Github Action就可以了。

准备

需要我们在github上准备两个仓库：

一个是存放博客源码的私有仓库
另一个是上一篇创建的Github Pages公开库

主要流程

配置私有库的Github Action
配置合适的token

具体实现

配置私有库的Github Action

在hugo博客根目录下，创建放置Github Action配置文件的目录 .github/workflows；
在 .github/workflows目录下，创建一个yml文件，这就是Github Action需要的一个工作流的配置，如果需要多个工作流可以创建多个yml文件； Hugo的官方文档Build Hugo With GitHub Action 中也推荐采用GitHub Actions作为持续集成部署方案，并提供了yml文件示例:

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

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

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

整个 Action 一个包含 4 个步骤：

拉取代码
准备 hugo 环境
使用 hugo 编译生成静态文件
把生成的静态文件发布到 Github Pages

可以根据自己的情况修改配置参数，最好和本地配置一致，可以避免版本不同造成的问题。我改了以下几处：

jobs.build-deploy.runs-on改为macos-latest（为了和本地版本一致）
jobs.build-deploy.steps.uses.with.hugo-version改为 “0.88.1” （为了和本地版本一致）
token改用personal_token（github_token不支持外部库，我们采用的两个仓库的方案不能使用github_token）
增加cname配置自己的自定义域名

最终我的yml配置文件是这样的：

name: dd299blog
on:
  push:
    branches:
      - main
jobs:
  build-deploy:
#    runs-on: ubuntu-20.04
    runs-on: macos-latest
    steps:
      - name: Check out source
        uses: actions/checkout@v2

      - name: Setup hugo
        uses: peaceiris/actions-hugo@v2
        with:
#          hugo-version: "latest" # 可以修改为你使用的 Hugo 版本
          hugo-version: "0.88.1" #
          extended: true # 设置是否需要 extended 版本

      - name: Build
        run: hugo

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }} # 另外还支持 deploy_token 和 github_token
          external_repository: DeeWooo/DeeWooo.github.io # 修改为你的 GitHub Pages 仓库
          publish_dir: ./public
#          keep_files: false
          publish_branch: master
          # 如果使用自定义域名，还需要添加下面一行配置
          cname: www.goodfun.me

配置合适的token

首先，需要生成一个Personal access tokens

在个人GitHub页面，依次点击Settings->Developer settings->Personal access tokens进入如下页面：

点击Generate new token出现如下界面，在Note中输入名称，在Select scopes选择workflow
将生成的token复制出来为后续创建secret做准备，注意必须及时复制，一旦离开此页面后续就无法查看其值，只能重新创建新token。
进入对应的GitHub项目下，依次点击Settings->Secrets->Actions进入添加Action secrets的界面，点击New repository secret按钮
在出现的界面中name部分输入在yml中设置的值，Secret部分输入步骤3中记录的token值，然后点击Add secret按钮

需要注意的是name的值不能以GITHUB_开头，否则创建会出错

在流水线中将personal_token值设置为步骤5中secret的名称，类似${{ secrets.PERSONAL_TOKEN }}s，至此personal_token设置过程完毕。

在这里需要特别说明一下， hugo官网的例子用的是github_token，然而实操时才发现github_token不支持外部库，我们采用的两个仓库的方案不能使用github_token。 Github Action除了github_token之外，还支持deploy_token和personal_token。出于方便考虑，我选择了personal_token。

至此整个设置过程完毕！

结论

完成上述配置后，当我们完成一篇md文章后，用git命令push到远程仓库时，即可触发GitHub Action，按工作流的配置自动生成静态页面文件，并推送到GitHub Pages仓库。而 GitHub Pages 仓库更新后，又会自动触发官方页面部署 CI，实现网站的自动发布。

到此，我们已经实现了 Hugo 博客本地搭建及版本管理、GitHub Pages 自动部署网站发布，实现了完整的自动发布系统。现在每当我完成内容编辑后，只需要推送代码，等待几分钟，即可通过我们的自定义域名访问更新后的网站。

参考文章

《Hugo + GitHub Action，搭建你的博客自动发布系统》，https://www.pseudoyu.com/zh/2022/05/29/deploy_your_blog_using_hugo_and_github_action/
Hugo的官方文档《Build Hugo With GitHub Action》，https://gohugo.io/hosting-and-deployment/hosting-on-github/#build-hugo-with-github-action
《利用GitHub Action实现Hugo博客在GitHub Pages自动部署》，https://lucumt.info/post/hugo/using-github-action-to-auto-build-deploy/
《基于 Github Action 自动构建 Hugo 博客》，https://www.lixueduan.com/posts/blog/01-github-action-deploy-hugo/
《使用 GitHub Actions 自动部署 Hugo 站点》，https://www.fournoas.com/posts/deploy-hugo-site-using-github-actions/
《Hugo使用Github Action自动部署博客到Github Pages》，https://tomial.github.io/posts/hugo%E4%BD%BF%E7%94%A8github-action%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%E5%8D%9A%E5%AE%A2%E5%88%B0github-pages/

本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，转载请注明出处。本文链接

「真诚赞赏，手留余香」

本文总阅读量次