博客搭建-2.Hugo, 自动部署博客
手动部署缺点
通过上一篇文章的命令我们可以手动发布我们的静态文件,但还是有以下弊端:
- 发布步骤还是比较繁琐,本地调试后还需要切换到
public/目录进行上传 - 无法对博客源文件进行备份与版本管理
自动部署优点
- 创建一个新仓库,对博客源文件进行备份与版本管理
- 发布简单,只需要有源文件的修改,并把其 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 触发条件,我设置了 push、workflow_dispatch 和 schedule 三个条件:
push,当这个项目仓库发生推送动作后,执行 GitHub Actionworkflow_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。
参考及鸣谢
- PSEUDOYU Hugo + GitHub Action,搭建你的博客自动发布系统
- 指月小筑 基于 Github Action 自动构建 Hugo 博客
- Rosen’s World 利用 GitHub Action 实现 Hugo 博客在 GitHub Pages 自动部署
- 手把手教你使用 Github Action 进行自动化部署前端项目 视频教程,因为视频演示的是在服务器上的配置,所以仅供参考相同操作的部分,配置操作相对于文字还是视频更加清晰。