Hugo - Github Pages博客的自动化部署 进阶篇
中文
a Little Design
Tech
Introduce
Demo
Table of Contents
Hugo - 简单,高效地搭建博客。
Notice! 注意事项。
- 本文最初使用的是 hugo-theme-itheme 主题。
- 现在本站转用新的Hugo主题 hugo-theme-Blowfish 。
- Blowfish 主题,相比 iTheme 主题更复杂和精致。
- 本文属于入门的经验总结,并非详尽的技术教程。 HUGO Blowfish 主题需要一定使用经验,初级用户建议先学习使用 iTheme 主题。
- 建议直接参考 Blowfish 安装教程。
- 初始教程请参考 Hugo - 一个适用于Github Pages的静态博客框架 初级篇
欢迎来到小站
本站使用 Hugo 和 hugo-theme-itheme 主题,并部署在GitHub Pages上面。
主题的开源仓库 hugo-theme-itheme & https://github.com/floyd-li/hugo-theme-itheme
新建GitHub仓库,托管网站代码和静态网页文件。
前言:
- 之前完成了Windows本地博客的创建。
- 现在将博客项目的“源码”托管到GitHub仓库上。
一、 First
- 新建 GitHub仓库A,托管博客“源码”。
# 创建新的仓库,名字随意,例如 Hugo-Blog-Code
Create a new repository
# “源码”仓库可以设置为“非公开”
Private
# 点击底部按钮创建
Create repository
# 将本地“blog”里面的所有文件,同步到 GitHub 的 Hugo-Blog-Code仓库上。本地路径参考 C:\Downloads\Hugo\blog\
# 本地“blog”的所有文件,等于是构建整个博客的“源码”。
二、 Second
- 新建 GitHub仓库B,用于静态网页文件的存放。
# 创建新的仓库,仓库名字格式: xxx.github.io , xxx 代表用户 userid 名称。(这样做可以直接访问 xxx.github.io 为 Pages 主页,不需加上次级路径。例如,静态网页文件若放在 Hugo-New 仓库,那么 Pages主页 就被定向到 xxx.github.io/hugo-new 页面。)
Create a new repository
# 本仓库必须设置为“公开”
Public
# 点击最底的创建
Create repository
# 新建分支,例如 gh-pages ,(为了保持 main 主分支的“干净整洁”。)切记,以后不要点击“同步分支”等相关操作。
进入 View all branches ,点击 New branch 即可创建。
三、 Third
- 创建个人token
#进入开发者设置。
点击头像,进入Settings。找到左下角最底的 Developer settings
# 进入 Personal access tokens
点击 Personal access tokens里面的 Tokens(classic)选项。
# 生成 tokens
点击 Generate new token,选择 Generate new token(classic)。会提示输入Github密码。
# 填写相关 tokens 参数
Note处随便填名字。Expiration处可以修改token过期的时间。默认30Day,建议延长时间。
# 选择 Select scopes
勾选下方的 repo 和 workflow 即可。
# 生成 tokens
Generate token 按钮生成
# 复制 token 的字符信息到本地(切记保存好。这个页面只会显示一次字符。再次刷新只会显示填写的 Note名字。)那串token字符在后面一定要用到。
ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# token 若过期或遗失,请再次重新生成。
四、 Fourth
- 给仓库分配 token。(分配给执行自动化Actions任务的仓库。)
# 进入仓库A,就是“源码”托管的仓库。例如 Hugo-Blog-Code
进入仓库设置Settings,找到 Secrets and variables,找到 Actions。
# 右上角新建Actions secret
New repository secret
# 填写 Actions secrets / New secret信息
Name需要填写 personal_token ,Sercret必须填写刚才生成的tokens字符ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# 确认
Add secret
# 理论上,token 若过期,必须要再次重复步骤三、步骤四。
五、 Fifth
- 设定Actions的自动化配置。
- 这里使用仓库A,就是“源码”托管的私有仓库。例如 Hugo-Blog-Code
# 创建 hugo.yml文件。 保存在此仓库路径下 /.github/workflows/hugo.yml (可以本地新建相应文件夹目录,然后上传到GitHub。)
# hugo.yml(最简方法,本地直接创建一个.txt文件,修改为 hugo.yml 即可。注意不要保留.txt后缀。)
hugo.yml
- hugo.yml 的具体参数如下。
name: GitHub Pages
on:
push:
branches:
- main # Set a branch to deploy 博客“源码”存放的分支
pull_request:
jobs:
deploy:
runs-on: ubuntu-latest
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.111.3'
# 版本要对应本地安装的Hugo版本。具体 hugo version 查看。以及是否启用 hugo extend
extended: true
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
personal_token: ${{ secrets.PERSONAL_TOKEN }}
external_repository: xxx/xxx.github.io # 前面为 userid 名,后面为 userid.github.io
publish_branch: gh-pages # Pages 仓库文件存放的分支,默认为 main
publish_dir: ./public
commit_message: ${{ github.event.head_commit.message }}
- 解释 publish_branch: gh-pages # Pages 文件存放的分支,默认为 main 。为了方便管理仓库,自建了 gh-pages 分支。不熟悉的话直接填 main 。
- gh-pages 或者 main ,本地博客仓库的 public 里所包含的文件的存放位置。
- 如果不使用 Actions自动化部署博客。可以直接跳过前面
仓库A
、新建token
、新建hugo.yml
等内容。(只需新建 xxx.github.io 仓库 ) - 然后上传本地 public 里面的所有文件到GitHub,xxx.github.io 仓库的根目录上。
- 然后在该仓库的 GitHub Pages设置中,指定到 /gh-pages 或者 /main 目录即可。
六、 Sixth
实现部署到GitHub Pages
- 设置 GitHub Pages参数。
- 这里要设置的是仓库B,xxx.github.io 仓库。
# 进入 仓库B 的Settings
Settings,左边找到 Pages 选项
# 设置 Pages 参数
Source 选择 Deploy from a branch
# 设置 Pages 参数
Branch 选择 gh-pages 或者 main #(对应 hugo.yml 所填路径)
# 设置 Pages 参数
Branch 选择 /(root)
# 设置Custom domain
域名和DNS解释等方法,请搜寻网上的相关教程。(这步可以先忽略,非必须。Pages网站上线以后,可自行添加。)
- 启动 Actions自动化。
前提:
- 仓库A,Hugo-Blog-Code 的 hugo.yml 文件参数正确。(注意token有效期,若过期,请及时更新token)
- 仓库B,xxx.github.io 的 Pages 参数完成设置。
# 本地博客新增和编写文章,Git 上传,推送 commit 到“源码”仓库A。
Actions根据hugo.yml触发deploy到仓库B,完成线上博客更新。
# “源码”仓库A,线上修改或增加文章,确定 commit 完成。
Actions根据hugo.yml触发deploy到仓库B,完成线上博客更新。
# 总之,“源码”仓库A 有任何成功的 commit ,都会触发 Actions的执行。( 免费版 GitHub好像配额500 MB存储,2000分钟数(每月),具体[查询官网](https://docs.github.com/zh/billing/managing-billing-for-github-actions/about-billing-for-github-actions)。)一般的博客应该足够使用。
# 有关 Markdown 语法和内嵌图片等操作,请参考其官方教程。
总结
- 感谢浏览这篇文章,虽然算不上技术教程,希望这些经验能给予你帮助。
- 这个流程已经是最精简的了,希望你能够看懂。
Screenshot
Copyright: Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)✨