Cloudflare托管Hugo网站完整指南
#

简介
#

本文将指导您如何将基于Hugo构建的静态网站托管到Cloudflare上，并实现从GitHub仓库的持续自动部署。即使您使用的是GitLab，步骤也大同小异。

前提条件
#

在开始之前，请确保完成以下准备工作：

注册并登录您的 Cloudflare账户。
注册并登录您的 GitHub账户。
在GitHub上为您的项目创建一个新的仓库。
在本地创建Git仓库，并添加远程地址指向GitHub仓库。
在本地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"

将name = “替换成部署的worker的名称“，这一步很关键

2. 创建自动构建脚本 `build.sh`
#

在项目根目录创建 build.sh 脚本文件，内容如下：

#!/usr/bin/env bash

#------------------------------------------------------------------------------
# @file
# 构建部署Hugo站点到Cloudflare Worker的脚本
#
# Cloudflare Worker会自动安装所需的Node.js依赖
#------------------------------------------------------------------------------

main() {

  DART_SASS_VERSION=1.93.2
  GO_VERSION=1.25.3
  HUGO_VERSION=0.152.2
  NODE_VERSION=22.20.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中配置
#

添加Workers

登录Cloudflare控制面板，点击右上角的 Add 按钮，选择 Workers。

开始导入仓库

在Workers页面，点击“Import a repository”旁的 Get started 按钮。

连接GitHub

选择对应的GitHub账户，授权Cloudflare Workers和Pages访问仓库：

选择仓库并部署

选择对应的GitHub仓库，配置应用名称，留空构建命令，点击 Create and deploy。

访问网站

部署完成后，您即可访问托管的网站。

自定义域名

本地修改hugo.toml中的baseURL，推送更新至GitHub仓库，cloudflare会自动重新部署：

baseURL = '替换成自定义域名'

最新的部署
#

cloudflare-workers部署方法
#

根据最新部署情况，因为cloudflare已经内置hugo、go、npm等语言，所以可以省略bulid.sh这一步，新增的wrangler.toml配置文件如下：

name = "你的cloudflare的worker的名字"
compatibility_date = "2025-07-31"

[build]
command = "hugo --gc --minify" ## 一键命令替代bulid.sh

[assets]
directory = "./public"
not_found_handling = "404-page"

cloudflare-pages部署方法（推荐）
#

登录 Cloudflare Dashboard。
左侧菜单：Workers & Pages > Pages > Create project > Connect to Git，选择连接你的Hugo项目所在的GitHub仓库。
配置构建设置（Build settings）：

Framework preset：选择 Hugo（官方预设，会自动填充以下默认值）。
Production branch：通常是 main 或 master。
生产分支：通常是 main 或 master。
Build command（构建命令）：如果你使用自定义域名（推荐）：直接用 hugo（或hugo –gc –minify——优化、清理、适合部署）。
Build output directory（输出目录）：public（Hugo 默认）。
Environment variables（环境变量，如果你的Hugo项目限定Hugo版本或者node版本的）： • 添加键：HUGO_VERSION，值：你的 Hugo 版本号（如 0.153.2 或最新版）；
```
 • 添加键：NODE_VERSION，值：你的 node 版本号（如 20 或 24）；
```

持续部署
#

以后每当您在本地Git仓库推送更新到GitHub，Cloudflare会自动重新构建并部署您的网站，实现持续集成和部署。

Cloudflare托管Hugo网站完整指南#

简介#

前提条件#

官方操作步骤#

1. 创建 wrangler.toml 配置文件#

2. 创建自动构建脚本 build.sh#

3. 提交并推送代码#

4. 在Cloudflare中配置#

最新的部署#

cloudflare-workers部署方法#

cloudflare-pages部署方法（推荐）#

持续部署#