Skip to main content

Hugo - Github Pages博客的自动化部署 进阶篇

中文 a Little Design Tech Introduce Demo
Hugo - 简单,高效地搭建博客。


Notice! 注意事项。

screenshot
screenshot



欢迎来到小站

本站使用 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

  1. 设置 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网站上线以后,可自行添加。)
  1. 启动 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

screenshot



Copyright: Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)