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

Posted 2023-01-25 胡争辉

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

在`Netlify`上发布`GitHub`中基于`Hugo`的静态网站

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

简介

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

https://www.xuekaiyuan.com/

已经同步发布在

https://xuekaiyuan.pages.dev/

本文将网站同步发布在

https://xuekaiyuan.netlify.app

本文发表在

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

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

https://xuekaiyuan.netlify.app/huzhenghui/netlify/readme/

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

仓库

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/

• v0.2

  • 网站同步发布在https://xuekaiyuan.pages.dev/

本文将把网站同步发布在

https://xuekaiyuan.netlify.app/

相关版本为https://github.com/huzhenghui/posts/tree/v0.3

相关仓库结构

查询命令

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

本文相关文件为

./
├── .github/
│   └── workflows/
│       └── netlify.yml
└── Netlify/
    └── README.md

注册Netlify

访问https://app.netlify.com/注册账号，注册后访问控制台页面https://app.netlify.com/

创建站点

在控制台页面https://app.netlify.com/选择Sites。
单击Add new site按钮，按照向导关联Git仓库https://github.com/xuekaiyuan-com/xuekaiyuan-com.github.io/。

设置站点地址

创建后访问站点设置，选择Site settings，选择Site details，
在Site information中单击Change site name，设置Site name为xuekaiyuan，可以看到网站地址为

https://xuekaiyuan.netlify.app/

此时站点设置页面的地址也变为

https://app.netlify.com/sites/xuekaiyuan/settings/general

修改构建命令

进入Build & deploy设置页面

https://app.netlify.com/sites/xuekaiyuan/settings/deploys

在build settings中单击Edit settings，在Build command中输入

git submodule update --remote;hugo --baseURL 'https://xuekaiyuan.netlify.app'

这个命令包含两个子命令，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.netlify.app'，
这是因为仓库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/，而Netlify分配的域名为https://xuekaiyuan.netlify.app/，
需要通过命令行设置为该域名。

创建部署挂钩

为了让仓库https://github.com/huzhenghui/posts/更新时能自动触发更新https://xuekaiyuan.netlify.app/，
需要在https://xuekaiyuan.netlify.app/的设置中创建部署挂钩，
在Build hooks中单击Add build hook，创建后记录部署挂钩的URL，前缀为

https://api.netlify.com/build_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
  • 这是在设置Repository secrets中设置的。

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

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

.github/workflows/netlify.yml

手工创建，位置在

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

Since v0.3

https://github.com/huzhenghui/posts/blob/v0.3/.github/workflows/netlify.yml

name: Trigger https://xuekaiyuan.netlify.app Build hooks

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.netlify.app Build hooks
        run: |
          curl \\
            -X POST -d '' \\
            "$ secrets.TRIGGER_XUEKAIYUAN_NETLIFY_APP "

其中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.netlify.app Build hooks
        run: |
          curl \\
            -X POST -d '' \\
            "$ secrets.TRIGGER_XUEKAIYUAN_NETLIFY_APP "

其中只有一个任务trigger，
任务中只有一个步骤POST https://xuekaiyuan.netlify.app Build hooks
运行的命令为

        run: |
          curl \\
            -X POST -d '' \\
            "$ secrets.TRIGGER_XUEKAIYUAN_NETLIFY_APP "

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

Netlify/README.md

本文件，位置在https://github.com/huzhenghui/posts/blob/master/Netlify/README.md

Since v0.3

https://github.com/huzhenghui/posts/blob/v0.3/Netlify/README.md