使用 hugo 写博客的时候,每次增加文章,需要本地构建之后发布到 github 上通过 github pages 服务展示页面,不难想到可以使用 CI 的方法,将构建的过程自动化,实现写博文 push 到 github 即可自动构建并发布到 github pages。

搞的过程中坑比较多,记录为一个教程,供各位参考。

我折腾过程中的参考:https://tianhui.xin/blog/2019/11/17/hugousegithubactionstopages/

创建代码仓库和 github pages 仓库

构建过程中采用两个仓库:

  1. 代码仓库,github pages 在这里构建并发布,我们设为 username.github.io.source
  2. github pages 仓库,用于存放构建好的文件,github pages 服务会根据构建好的文件展示我们的博。客,我们设为 username.github.io (username 改为你自己的 github username)

简单说来就是根据代码仓库的文件构建,构建好之后发布到 github pages 仓库,github pages 仓库由于有 github 提供的服务,会自动展示我们的 blog。

创建 github pages 仓库

没啥特别,github 上创建一个空仓库 username.github.io

创建代码仓库

这个仓库和我们本地直接关联,创建有一些细节需要注意,我下面的过程给各位参考:

  1. github 创建空仓库 username.github.io.source

  2. 本地找个空文件夹,比如叫 HugoBlog,进去之后初始化 Hugo Blog:hugo new site .

  3. 初始化 git 仓库:git init

  4. 添加主题文件,这步需要注意,需要使用 git submodule 来进行(照着做就完了,不需要深入了解),比如我这边采用的主题文件为 joway/hugo-theme-yinyang,那么命令为:git submodule add git@github.com:joway/hugo-theme-yinyang.git themes/yinyang

  5. 然后根据主题去配置去添加文章,用 hugo serve 看看效果,确定配置没问题

  6. 然后是关键的一部,添加 workflows 文件,用于 github actions 构建。创建 .github/workflows/gh-pages.yml 文件,将下面的内容复制进去,并且根据自己的情况修改下面 TODO 表明的类。

     name: github pages CI # 自动化的名称,随便取
         on:
             push: # push的时候触发
                 branches:
                 - main # TODO 改成 username.github.io.source 的对应主分支
     jobs:
         build:
             runs-on: ubuntu-latest
             steps:
             - name: checkout
                 uses: actions/checkout@master
                 with:
                     submodules: true
             - name: Setup Hugo
                 uses: peaceiris/actions-hugo@v2
                 with:
                     hugo-version: '0.83.1'
                     extended: true
             - name: Build
                 run: hugo --minify
             - name: Deploy
                 uses: peaceiris/actions-gh-pages@v3
                 with:
                     deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 这个 ACTIONS_DEPLOY_KEY 需要注意,后面会用到
                     external_repository: username/username.github.io # TODO 改成对应的仓库名
                     publish_branch: main # TODO 发布到 username.github.io 的相应分支
                     publish_dir: ./public
    

    需要知道的是,基本上最后搞不出来都会是因为这个文件,所以务必仔细检查配置,如果配置正确的情况下还是出现问题那么需要去看 hugo github actions 的提供方的文档,也就是 peaceiris/actions-gh-pages 这个项目。(我就是网上折腾了好久发现是配置不对 xD)

  7. 添加公钥和私钥。代码仓库需要有 github pages 的写入权限,需要添加公钥和私钥:(注意这个和 github 添加 ssh 链接的私钥不一样,无论如何都要做这一步)

    1. 使用 ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" 创建公钥私钥,在当前文件夹生成即可:
    2. 将生产后的私钥(不带后缀名的)添加到代码仓库,仓库的 Settings 中点击 Secrets,然后添加咱们刚刚生成的私钥,name 为 ACTIONS_DEPLOY_KEY,注意 name 一定要是这个,因为上面的文件中配置的是这个名字
    3. 然后将公钥(带 pub 后缀名的)添加到 github pages 仓库,Settings 中点击 Deploy keys,添加公钥,Allow write access一定要勾上,否则会无法提交
    4. 公钥和私钥可以删掉,后面不需要了
  8. 将代码仓库 add commit push 到远程,基本操作,不多赘述

  9. 查看代码仓库的 actions,这个时候基本会 build 完成,如果失败了仔细检查步骤。

others

本次折腾过程中看到一些不了解的东西,打算去折腾一下:

  1. 非对称加密
  2. git submodule