Good in study, attitude and health

博客搭建-2.Hugo, 自动部署博客

手动部署缺点

通过上一篇文章的命令我们可以手动发布我们的静态文件,但还是有以下弊端:

  1. 发布步骤还是比较繁琐,本地调试后还需要切换到 public/ 目录进行上传
  2. 无法对博客源文件进行备份与版本管理

自动部署优点

  1. 创建一个新仓库,对博客源文件进行备份与版本管理
  2. 发布简单,只需要有源文件的修改,并把其 push 到远程仓库,就会触发 public 自动更新部署,所以使我们能够专注博客的创作,将部署等繁琐的重复的操作省去

自动部署

创建一个新仓库

之前,我们已经创建了一个以*.github.io命名的仓库,该仓库主要是保存我们 public 文件夹下的文件,现在我们需要再创建一个仓库,可以是任意命名,权限也可以设为 private。该仓库的目录应该是 hugo 建站时,hugo new site website-name该命令产生的文件夹,即整个网站的根目录,而不只是 content 文件夹,一开始我就只是用了 content 文件夹作为仓库,然后 GitHub action 在 build 操作时会报错。

Unable to locate config file or config directory. Perhaps you need to create a new site.
Run hugo help new for details.

创建 workflow

创建方式

  • 在刚才创建的仓库下找到Actions -> New workflow -> Set up a workflow yourself然后将下面的内容稍作修改,cv 进去就可以,推荐使用这种方法
  • 直接本地创建文件,然后 push 到远程仓库里

创建 yml 文件

配置在仓库目录 .github/workflows 下,以 .yml 为后缀。我的 GitHub Action 配置为 jacket-mouse/main.yml,自动发布示例配置如下(参考教程一):

name: deploy

on:
    push:
    workflow_dispatch:
    schedule:
        # Runs everyday at 8:00 AM
        - cron: "0 0 * * *"

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  submodules: true
                  fetch-depth: 0

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"

            - name: Build Web
              run: hugo

            - name: Deploy Web
              uses: peaceiris/actions-gh-pages@v3
              with:
                  PERSONAL_TOKEN: $
                  EXTERNAL_REPOSITORY: jacket-mouse/jacket-mouse.github.io
                  PUBLISH_BRANCH: master
                  PUBLISH_DIR: ./public
                  commit_message: $

on 表示 GitHub Action 触发条件,我设置了 pushworkflow_dispatchschedule 三个条件:

  • push,当这个项目仓库发生推送动作后,执行 GitHub Action
  • workflow_dispatch,可以在 GitHub 项目仓库的 Action 工具栏进行手动调用
  • schedule,定时执行 GitHub Action,如我的设置为北京时间每天早上执行,主要是使用一些自动化统计 CI 来自动更新我博客的关于页面,如本周编码时间,影音记录等,如果你不需要定时功能,可以删除这个条件

jobs 表示 GitHub Action 中的任务,我们设置了一个 build 任务,runs-on 表示 GitHub Action 运行环境,我们选择了 ubuntu-latest。我们的 build 任务包含了 CheckoutSetup HugoBuild WebDeploy Web 四个主要步骤,其中 run 是执行的命令,uses 是 GitHub Action 中的一个插件,我们使用了 peaceiris/actions-hugo@v2peaceiris/actions-gh-pages@v3 这两个插件。其中 Checkout 步骤中 with 中配置 submodules 值为 true 可以同步博客源仓库的子模块,即我们的主题模块。

需要根据自己的仓库进行实际修改的部分,将上述 main.yml 中的 EXTERNAL_REPOSITORY 改为自己的 GitHub Pages 仓库,如我的设置为 jacket-mouse/jacket-mouse.github.io。其他都不需要修改。

创建 Token

因为我们需要从博客仓库推送到外部 GitHub Pages 仓库,需要特定权限,要在 GitHub 账户下 Setting - Developer setting - Personal access tokens 下创建一个 Token(对应上述 yml 文件中的secrets.PERSONAL_TOKEN),该 Token 的权限只需开启 repo 全部和 workflow。

配置后复制生成的 Token(注:只会出现一次),然后在我们博客源仓库的 Settings - Secrets and variables - Actions - Secrets - New repository secret 中添加 PERSONAL_TOKEN 环境变量为刚才的 Token,这样 GitHub Action 就可以获取到 Token 了。

完成上述配置后,推送代码至仓库,即可触发 GitHub Action,自动生成博客页面并推送至 GitHub Pages 仓库。而 GitHub Pages 仓库更新后,又会自动触发官方页面部署 CI,实现我们的网站发布。

注意: - Token 给上一个仓库用过了之后,该仓库被删除,那么即使我们还记得 Token 是什么也不能再用了,而是要创建一个新的 Token,否则会报错Authentication failed

参考及鸣谢

  1. PSEUDOYU Hugo + GitHub Action,搭建你的博客自动发布系统
  2. 指月小筑 基于 Github Action 自动构建 Hugo 博客
  3. Rosen’s World 利用 GitHub Action 实现 Hugo 博客在 GitHub Pages 自动部署
  4. 手把手教你使用 Github Action 进行自动化部署前端项目 视频教程,因为视频演示的是在服务器上的配置,所以仅供参考相同操作的部分,配置操作相对于文字还是视频更加清晰。