博客搭建-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 进行自动化部署前端项目 视频教程,因为视频演示的是在服务器上的配置,所以仅供参考相同操作的部分,配置操作相对于文字还是视频更加清晰。