002 - Hugo, 自动部署博客

002 - 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: deployon:push:workflow_dispatch:schedule:# Runs everyday at 8:00 AM- cron: "0 0 * * *"jobs:build:runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v2with:submodules: truefetch-depth: 0- name: Setup Hugouses: peaceiris/actions-hugo@v2with:hugo-version: "latest"- name: Build Webrun: hugo- name: Deploy Webuses: peaceiris/actions-gh-pages@v3with:PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}EXTERNAL_REPOSITORY: jacket-mouse/jacket-mouse.github.ioPUBLISH_BRANCH: masterPUBLISH_DIR: ./publiccommit_message: ${{ github.event.head_commit.message }}

on 表示 GitHub Action 触发条件，我设置了 push、workflow_dispatch 和 schedule 三个条件：

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

jobs 表示 GitHub Action 中的任务，我们设置了一个 build 任务，runs-on 表示 GitHub Action 运行环境，我们选择了 ubuntu-latest。我们的 build 任务包含了 Checkout、Setup Hugo、Build Web 和 Deploy Web 四个主要步骤，其中 run 是执行的命令，uses 是 GitHub Action 中的一个插件，我们使用了 peaceiris/actions-hugo@v2 和 peaceiris/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进行自动化部署前端项目
   视频教程，因为视频演示的是在服务器上的配置，所以仅供参考相同操作的部分，配置操作相对于文字还是视频更加清晰。