托管在 GitHub Pages 上
前提条件
在继续之前，请完成以下任务：
- 创建 GitHub 帐户
- 安装 Git
- 创建一个 Hugo 站点 ，并使用
hugo server在本地进行测试。
站点类型
GitHub Pages 站点有三种类型：项目、用户和组织。项目站点连接到 GitHub 上托管的特定项目。用户和组织站点连接到 GitHub.com 上的特定帐户。
步骤
- 步骤 1
- 创建一个 GitHub 仓库。
- 步骤 2
- 将本地仓库推送到 GitHub。
- 步骤 3
- 访问您的 GitHub 仓库。从主菜单中选择 设置 > Pages 。在屏幕中央，您将看到：
! 屏幕截图
- 步骤 4
- 将 来源 更改为
GitHub Actions。更改会立即生效；您无需按下“保存”按钮。
! 屏幕截图
- 步骤 5
- 在名为
.github/workflows的目录中创建一个名为hugo.yaml的文件。
mkdir -p .github/workflows
touch hugo.yaml
- 步骤 6
- 将下面的 YAML 代码复制并粘贴到您创建的文件中。根据需要更改分支名称和 Hugo 版本。
.github/workflows/hugo.yaml
# 将 Hugo 站点部署到 GitHub Pages 的示例工作流程 {#sample-workflow-for-building-and-deploying-a-hugo-site-to-github-pages}
name: 将 Hugo 站点部署到 Pages
on:
# 对目标分支进行推送时运行
push:
branches:
- main
# 允许您从 Actions 选项卡手动运行此工作流程
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages {#sets-permissions-of-the-github-token-to-allow-deployment-to-github-pages}
permissions:
contents: read
pages: write
id-token: write
# 仅允许一个并发部署，跳过在进行中运行和最新排队运行之间排队的运行。{#allow-only-one-concurrent-deployment-skipping-runs-queued-between-the-run-in-progress-and-latest-queued}
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成。{#however-do-not-cancel-in-progress-runs-as-we-want-to-allow-these-production-deployments-to-complete}
concurrency:
group: "pages"
cancel-in-progress: false
# 默认使用 bash {#default-to-bash}
defaults:
run:
shell: bash
jobs:
# 构建作业
build:
runs-on: ubuntu-latest
env:
HUGO_VERSION: 0.137.1
steps:
- name: 安装 Hugo CLI
run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: 安装 Dart Sass
run: sudo snap install dart-sass
- name: 签出
uses: actions/checkout@v4
with:
submodules: recursive
fetch-depth: 0
- name: 设置 Pages
id: pages
uses: actions/configure-pages@v5
- name: 安装 Node.js 依赖项
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- name: 使用 Hugo 构建
env:
HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
HUGO_ENVIRONMENT: production
TZ: America/Los_Angeles
run: |
hugo \
--gc \
--minify \
--baseURL "${{ steps.pages.outputs.base_url }}/"
- name: 上传工件
uses: actions/upload-pages-artifact@v3
with:
path: ./public
# 部署作业
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: 部署到 GitHub Pages
id: deployment
uses: actions/deploy-pages@v4- 步骤 7
- 提交并推送更改到您的 GitHub 仓库。
git add -A
git commit -m "Create hugo.yaml"
git push
- 步骤 8
- 从 GitHub 的主菜单中，选择 Actions 。您将看到如下内容：
! 屏幕截图
- 步骤 9
- 当 GitHub 完成站点构建和部署后，状态指示器的颜色将变为绿色。
! 屏幕截图
- 步骤 10
- 单击上面显示的提交消息。您将看到：
! 屏幕截图
在部署步骤下，您将看到指向您的实时站点的链接。
将来，每当您从本地仓库推送更改时，GitHub 都会重建您的站点并部署更改。
自定义工作流程
上面的示例工作流程包含此步骤，此步骤通常需要 10-15 秒：
- name: 安装 Dart Sass
run: sudo snap install dart-sass
如果您的站点、主题和模块不使用 Dart Sass 转译器将 Sass 转译为 CSS，则可以删除此步骤。