HUGO
Menu
GitHub 87548 stars Mastodon

在 Cloudflare 上托管

在 Cloudflare 上托管您的網站。

使用這些說明從 GitHub 倉庫啟用持續部署。如果您使用 GitLab 進行版本控制,適用相同的一般步驟。

前提條件

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

  1. 創建 Cloudflare 賬戶
  2. 登錄 您的 Cloudflare 賬戶
  3. 創建 GitHub 賬戶
  4. 登錄 您的 GitHub 賬戶
  5. 創建 項目的 GitHub 倉庫
  6. 創建 項目的本地 Git 倉庫,並帶有指向 GitHub 倉庫的 遠程 引用
  7. 在本地 Git 倉庫中創建 Hugo 網站,並使用 hugo server 命令測試

步驟

步驟 1
在項目根目錄創建 wrangler.toml 文件。
wrangler.toml
name = "hosting-cloudflare-worker"
compatibility_date = "2025-07-31"

[build]
command = "chmod a+x build.sh && ./build.sh"

[assets]
directory = "./public"
not_found_handling = "404-page"
步驟 2
在項目根目錄創建 build.sh 文件。
build.sh
#!/usr/bin/env bash

#------------------------------------------------------------------------------
# @file
# 構建托管在 Cloudflare Worker 上的 Hugo 網站。
#
# Cloudflare Worker 會自動安裝 Node.js 依賴。
#------------------------------------------------------------------------------

main() {

  DART_SASS_VERSION=1.97.3
  GO_VERSION=1.25.6
  HUGO_VERSION=0.155.3
  NODE_VERSION=24.13.0

  export TZ=Europe/Oslo

  # 安裝 Dart Sass
  echo "Installing Dart Sass ${DART_SASS_VERSION}..."
  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"
  export PATH="${HOME}/.local/dart-sass:${PATH}"

  # 安裝 Go
  echo "Installing Go ${GO_VERSION}..."
  curl -sLJO "https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz"
  tar -C "${HOME}/.local" -xf "go${GO_VERSION}.linux-amd64.tar.gz"
  rm "go${GO_VERSION}.linux-amd64.tar.gz"
  export PATH="${HOME}/.local/go/bin:${PATH}"

  # 安裝 Hugo
  echo "Installing Hugo ${HUGO_VERSION}..."
  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"
  export PATH="${HOME}/.local/hugo:${PATH}"

  # 安裝 Node.js
  echo "Installing Node.js ${NODE_VERSION}..."
  curl -sLJO "https://nodejs.org/dist/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64.tar.xz"
  tar -C "${HOME}/.local" -xf "node-v${NODE_VERSION}-linux-x64.tar.xz"
  rm "node-v${NODE_VERSION}-linux-x64.tar.xz"
  export PATH="${HOME}/.local/node-v${NODE_VERSION}-linux-x64/bin:${PATH}"

  # 驗證安裝
  echo "Verifying installations..."
  echo Dart Sass: "$(sass --version)"
  echo Go: "$(go version)"
  echo Hugo: "$(hugo version)"
  echo Node.js: "$(node --version)"

  # 配置 Git
  echo "Configuring Git..."
  git config core.quotepath false
  if [ "$(git rev-parse --is-shallow-repository)" = "true" ]; then
    git fetch --unshallow
  fi

  # 構建網站
  echo "Building the site..."
  hugo --gc --minify

}

set -euo pipefail
main "$@"
步驟 3
將更改提交到本地 Git 倉庫並推送到 GitHub 倉庫。
步驟 4
在 Cloudflare 儀表板 的右上角,按 Add 按鈕並從下拉菜單中選擇"Workers"。 屏幕截圖
步驟 5
在"Workers"選項卡,按"Import a repository"項右側的 Get started 按鈕。 屏幕截圖
步驟 6
連接到 GitHub。 屏幕截圖
步驟 7
選擇您要安裝 Cloudflare Workers and Pages 應用程序的 GitHub 賬戶。 屏幕截圖
步驟 8
授權 Cloudflare Workers and Pages 應用程序訪問所有倉庫或僅選擇倉庫,然後按 Install & Authorize 按鈕。 屏幕截圖

您的瀏覽器將被重定向到 Cloudflare 儀表板。

步驟 9
在"Workers"選項卡,按"Import a repository"項右側的 Get started 按鈕。 屏幕截圖
步驟 10
選擇要導入的倉庫。 屏幕截圖
步驟 11
在"Set up your application"頁面,提供項目名稱,保留構建命令為空,然後按 Create and deploy 按鈕。 屏幕截圖
步驟 12
等待網站構建和部署完成,然後訪問您的網站。 屏幕截圖

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


Last updated: January 1, 0001
Improve this page