Host on GitHub Pages
前置作業
在繼續之前，請完成以下任務：
- 建立 GitHub 帳戶
- 安裝 Git
- 建立 Hugo 網站 並使用
hugo server在本機測試。
網站類型
GitHub Pages 有三種類型的網站：專案、使用者和組織。專案網站與 GitHub 上的特定專案連結；使用者和組織網站則與 GitHub.com 上的特定帳戶連結。
流程
步驟 1
：建立一個 GitHub 版本庫。
步驟 2
：將您的本機版本庫推送到 GitHub。
步驟 3
：訪問您的 GitHub 版本庫。在主選單中選擇 Settings > Pages。在畫面中央會看到以下畫面：
{style=“max-width: 280px”}
步驟 4
：將 Source 更改為 GitHub Actions。更改會立即生效，無需按下儲存按鈕。
{style=“max-width: 280px”}
步驟 5
：在 .github/workflows 資料夾內建立一個名為 hugo.yaml 的檔案。
mkdir -p .github/workflows
touch hugo.yaml
步驟 6
：將以下 YAML 複製並貼到您建立的檔案中，根據需要更改分支名稱與 Hugo 版本。
# 用於建置並部署 Hugo 網站到 GitHub Pages 的範例工作流程
name: Deploy Hugo site to Pages
on:
# 針對默認分支的推送執行
push:
branches:
- main
# 允許從 Actions 標籤頁手動執行此工作流程
workflow_dispatch:
# 設定 GITHUB_TOKEN 的權限以允許部署到 GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# 允許僅執行一個部署任務
concurrency:
group: "pages"
cancel-in-progress: false
# 默認使用 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。您將看到如下畫面：
{style=“max-width: 350px”}
步驟 9
：當 GitHub 完成建置並部署您的網站後，狀態指示器的顏色將變為綠色。
{style=“max-width: 350px”}
步驟 10
：按下上圖中的提交訊息，您將看到如下畫面：
{style=“max-width: 611px”}
在部署步驟下方，您會看到指向您的線上網站的連結。
未來，每當您從本機版本庫推送變更，GitHub 會重新建置您的網站並部署變更。
自訂工作流程
上述範例工作流程包含以下步驟，通常需耗時 10‑15 秒：
- name: 安裝 Dart Sass
run: sudo snap install dart-sass
如果您的網站、主題和模組不需要使用 Dart Sass 編譯 Sass 為 CSS，您可以移除此步驟。