在Cloudflare Pages上发布GitHub中基于Hugo的静态网站

Posted 2023-01-24 胡争辉

在Cloudflare Pages上发布GitHub中基于Hugo的静态网站

在Cloudflare Pages上发布GitHub中基于Hugo的静态网站

• 在`Cloudflare Pages`上发布`GitHub`中基于`Hugo`的静态网站
• • 简介
  • 仓库
  • • `xuekaiyuan-com/xuekaiyuan-com.github.io`仓库
    • `huzhenghui/posts`仓库
  • 相关仓库结构
  • 注册`Cloudflare`
  • 创建站点
  • 修改构建命令
  • 设置`Hugo`版本
  • 创建`部署挂钩`
  • 设置`Repository secrets`
  • `.github/workflows/cloudflare.yml`
  • `Cloudflare/README.md`

简介

本文讲解如何在Cloudflare Pages上发布GitHub中基于Hugo的静态网站。
目前网站已发布在

https://www.xuekaiyuan.com/

本文将网站同步发布在

https://xuekaiyuan.pages.dev/

本文发表在

https://www.xuekaiyuan.com/huzhenghui/cloudflare/readme/

https://xuekaiyuan.pages.dev/huzhenghui/cloudflare/readme/

https://blog.csdn.net/hu_zhenghui/article/details/128752863

仓库

xuekaiyuan-com/xuekaiyuan-com.github.io仓库

仓库位于https://github.com/xuekaiyuan-com/xuekaiyuan-com.github.io/

相关版本为

v0.3

详见https://www.xuekaiyuan.com/posts/xuekaiyuan/readme/

huzhenghui/posts仓库

仓库位于https://github.com/huzhenghui/posts/

在v0.1中实现了自动触发更新https://www.xuekaiyuan.com/

本文将把网站同步发布在

https://xuekaiyuan.pages.dev/

相关版本为v0.2

相关仓库结构

查询命令

tree -a -F -I '.git/'

本文相关文件为

./
├── .github/
│   └── workflows/
│       └── cloudflare.yml
└── Cloudflare/
    └── README.md

注册Cloudflare

访问http://pages.cloudflare.com/注册账号，注册后访问控制台页面https://pages.cloudflare.com/

创建站点

在控制台页面https://pages.cloudflare.com/中单击左侧的Pages，
单击创建项目按钮，按照向导关联Git仓库https://github.com/xuekaiyuan-com/xuekaiyuan-com.github.io/。
预设选择Hugo。

修改构建命令

按照向导操作后查看设置，可以看到构建命令为

hugo

修改构建命令，输入

git submodule update --remote;hugo --baseURL 'https://xuekaiyuan.pages.dev'

这个命令包含两个子命令，git submodule update --remote用于更新子模块，前面
xuekaiyuan-com/xuekaiyuan-com.github.io的 git submodule（子模块）
将https://github.com/huzhenghui/posts/添加为https://github.com/xuekaiyuan-com/xuekaiyuan-com.github.io/的子模块。
运行git submodule update --remote命令将拉取远程的https://github.com/huzhenghui/posts/仓库。

第二个子命令为hugo --baseURL 'https://xuekaiyuan.pages.dev'，
这是因为仓库https://github.com/xuekaiyuan-com/xuekaiyuan-com.github.io/中Hugo配置文件
https://github.com/xuekaiyuan-com/xuekaiyuan-com.github.io/blob/master/config.toml内容为

baseURL      = 'https://www.xuekaiyuan.com/'
languageCode = 'zh-cn'
title        = '学开源'

已经设置baseURL值为https://www.xuekaiyuan.com/，而Cloudflare分配的域名为https://xuekaiyuan.pages.dev/，
需要通过命令行设置为该域名。

设置Hugo版本

查看hugo版本

hugo version

结果为

hugo v0.101.0+extended darwin/amd64 BuildDate=unknown

在环境变量的制作中增加环境变量HUGO_VERSION，设置为所使用的hugo版本0.101.0

创建部署挂钩

为了让仓库https://github.com/huzhenghui/posts/更新时能自动触发更新https://xuekaiyuan.pages.dev/，
需要在https://xuekaiyuan.pages.dev/的设置中创建部署挂钩。

创建后记录部署挂钩的URL，前缀为

https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/

将在设置Repository secrets中使用该值。

设置Repository secrets

访问仓库https://github.com/huzhenghui/posts/的Repository secrets设置页面

https://github.com/huzhenghui/posts/settings/secrets/actions

在Repository secrets中可以看到已经有一项TRIGGER_XUEKAIYUAN_COM，
这是在设置Actions secrets中设置的。

接下来增加一项，名称设置为TRIGGER_XUEKAIYUAN_PAGES_DEV，值设置为前面创建部署挂钩记录的URL。

该设置将在.github/workflows/cloudflare.yml中使用。

.github/workflows/cloudflare.yml

手工创建，位置在

https://github.com/huzhenghui/posts/blob/master/.github/workflows/cloudflare.yml

Since v0.2

https://github.com/huzhenghui/posts/blob/v0.2/.github/workflows/cloudflare.yml

name: Trigger https://xuekaiyuan.pages.dev deploy hook

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Trigger job
  trigger:
    runs-on: ubuntu-latest
    steps:
      - name: POST https://xuekaiyuan.pages.dev deploy hook
        run: |
          curl \\
            -X POST \\
            "$ secrets.TRIGGER_XUEKAIYUAN_PAGES_DEV "

其中on为GitHub Action响应的事件。

• 响应master分支的push
• 响应https://github.com/huzhenghui/posts/actions页面中手工触发

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

其中defaults设置了默认环境，这里默认使用bash运行。

# Default to bash
defaults:
  run:
    shell: bash

在jobs中为运行的任务。

jobs:
  # Trigger job
  trigger:
    runs-on: ubuntu-latest
    steps:
      - name: POST https://xuekaiyuan.pages.dev deploy hook
        run: |
          curl \\
            -X POST \\
            "$ secrets.TRIGGER_XUEKAIYUAN_PAGES_DEV "

其中只有一个任务trigger，
任务中只有一个步骤POST https://xuekaiyuan.pages.dev deploy hook
运行的命令为

        run: |
          curl \\
            -X POST \\
            "$ secrets.TRIGGER_XUEKAIYUAN_PAGES_DEV "

其中$ secrets.TRIGGER_XUEKAIYUAN_PAGES_DEV 为设置Repository secrets中设置的值。

Cloudflare/README.md

本文件，位置在https://github.com/huzhenghui/posts/blob/v0.2/Cloudflare/README.md

Since v0.2

https://github.com/huzhenghui/posts/blob/v0.2/Cloudflare/README.md