在 GitHub Pages 上托管

網站類型

GitHub Pages 網站有三種類型：項目、用戶和組織。項目網站連接到 GitHub 上托管的特定項目。用戶和組織網站連接到 GitHub.com 上的特定賬戶。

前提條件

請在繼續之前完成以下任務：

1. 創建 GitHub 賬戶
2. 登錄 您的 GitHub 賬戶
3. 創建 項目的 GitHub 倉庫
4. 創建 項目的本地 Git 倉庫，並帶有指向 GitHub 倉庫的 遠程 引用
5. 在本地 Git 倉庫中創建 Hugo 網站，並使用 hugo server 命令測試
6. 將更改提交到本地 Git 倉庫並推送到 GitHub 倉庫

步驟

步驟 1

訪問您的 GitHub 倉庫。從主菜單選擇 Settings > Pages。在屏幕中央您將看到：

將 Source 更改為 GitHub Actions。更改立即生效；您無需按保存按鈕。

步驟 2

在網站配置中，更改圖像緩存的位置到 cacheDir，如下所示：

caches:
  images:
    dir: :cacheDir/images

[caches]
  [caches.images]
    dir = ':cacheDir/images'

{
   "caches": {
      "images": {
         "dir": ":cacheDir/images"
      }
   }
}

有關更多信息，請參閱 配置文件緩存。

步驟 3

在名為 .github/workflows 的目錄中創建名為 hugo.yaml 的文件。

mkdir -p .github/workflows
touch .github/workflows/hugo.yaml

步驟 4

將下面的 YAML 復制並粘貼到您創建的文件中。

.github/workflows/hugo.yaml

name: Build and deploy
on:
  push:
    branches:
      - main
  workflow_dispatch:
permissions:
  contents: read
  pages: write
  id-token: write
concurrency:
  group: pages
  cancel-in-progress: false
defaults:
  run:
    shell: bash
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      DART_SASS_VERSION: 1.97.3
      GO_VERSION: 1.25.6
      HUGO_VERSION: 0.155.3
      NODE_VERSION: 24.13.0
      TZ: Europe/Oslo
    steps:
      - name: Checkout
        uses: actions/checkout@v6
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Go
        uses: actions/setup-go@v6
        with:
          go-version: ${{ env.GO_VERSION }}
          cache: false
      - name: Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Create directory for user-specific executable files
        run: |
          mkdir -p "${HOME}/.local"
      - name: Install Dart Sass
        run: |
          curl -sLJO "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
          tar -C "${HOME}/.local" -xf "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
          rm "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
          echo "${HOME}/.local/dart-sass" >> "${GITHUB_PATH}"
      - name: Install Hugo
        run: |
          curl -sLJO "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
          mkdir "${HOME}/.local/hugo"
          tar -C "${HOME}/.local/hugo" -xf "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
          rm "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
          echo "${HOME}/.local/hugo" >> "${GITHUB_PATH}"
      - name: Verify installations
        run: |
          echo "Dart Sass: $(sass --version)"
          echo "Go: $(go version)"
          echo "Hugo: $(hugo version)"
          echo "Node.js: $(node --version)"
      - name: Install Node.js dependencies
        run: |
          [[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true
      - name: Configure Git
        run: |
          git config core.quotepath false
      - name: Cache restore
        id: cache-restore
        uses: actions/cache/restore@v5
        with:
          path: ${{ runner.temp }}/hugo_cache
          key: hugo-${{ github.run_id }}
          restore-keys:
            hugo-
      - name: Build the site
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/" \
            --cacheDir "${{ runner.temp }}/hugo_cache"
      - name: Cache save
        id: cache-save
        uses: actions/cache/save@v5
        with:
          path: ${{ runner.temp }}/hugo_cache
          key: ${{ steps.cache-restore.outputs.cache-primary-key }}
      - name: Upload artifact
        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: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

步驟 5

將更改提交到本地 Git 倉庫並推送到 GitHub 倉庫。

步驟 6

從 GitHub 主菜單，選擇 Actions。您將看到類似的內容：

步驟 7

當 GitHub 完成構建和部署您的網站後，狀態指示器的顏色將變為綠色。

步驟 8

按所示點擊提交消息。在部署步驟下，您將看到指向您實時網站的鏈接。

將來，每當您從本地 Git 倉庫推送更改時，GitHub Pages 將重新構建和部署您的網站。

自定義工作流

上面的示例工作流包括此步驟，通常需要 10-15 秒：

- name: Install Dart Sass
  run: sudo snap install dart-sass

如果您的網站、主題和模塊不使用 Dart Sass 轉譯器將 Sass 轉譯為 CSS，您可以移除此步驟。

其他資源

• 了解更多關於 GitHub Actions
• 緩存依賴項以加快工作流速度
• 管理 GitHub Pages 網站的自定義域名