在本博客文章中，我们将讨论如何使用 GitHub Actions 将 Hugo 静态网站部署到 GitHub Pages。GitHub Actions 是 GitHub 提供的自动化功能，可以让您直接在 GitHub 存储库中创建自定义软件开发工作流程。通过使用 GitHub Actions，您可以轻松自动化构建和部署 Hugo 静态网站的过程。

配置 GitHub Pages 设置

在使用 GitHub Actions 成功部署 Hugo 静态网站到 GitHub Pages 之前，您需要为您的项目配置 GitHub Pages 设置。

  1. 转到您的 GitHub 项目页面，点击右上角的 “Settings” 选项卡。
  2. 滚动到 “Pages” 部分。
  3. 在 “Build and deployment” 设置中，找到 “Source” 下拉菜单。
  4. 从可用选项中选择 “GitHub Actions”。这告诉 GitHub Pages 使用由 GitHub Actions 生成的工件进行部署。

现在您已经配置了 GitHub Pages 设置，您的站点将使用 hugo.yaml 文件中定义的工作流进行部署。

设置 GitHub Pages 工作流程

要使用 Hugo 和 GitHub Actions 设置 GitHub Pages 工作流程，请按照以下步骤进行操作：

  1. 在 Hugo 站点存储库的 .github/workflows/ 目录中创建名为 hugo.yaml 的新文件。
  2. 将以下 YAML 配置复制到 hugo.yaml 文件中：
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

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

# 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

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    steps:
      - name: Install 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: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

此配置文件设置了一个工作流程，当您将代码推送到 main 分支或从 Actions 选项卡手动运行工作流程时，它将构建您的 Hugo 静态网站并将其部署到 GitHub Pages。

结论

通过配置项目中的 GitHub Pages 设置并使用提供的 hugo.yaml 工作流配置，您可以轻松自动化构建和部署 Hugo 静态网站到 GitHub Pages 的过程。通过利用 GitHub Actions，您可以专注于创建内容和更新您的网站，而无需每次手动部署它。此设置还允许您利用 GitHub Actions 提供的内置 CI/CD 能力，进一步改进您的开发工作流程。

Source code : https://github.com/hobbyworker/hugo-demo

Demo : https://hobbyworker.me/hugo-demo