Logo
活死人の行知路

Cloudflare部署站点

📅 | 📝 584 字
#hugo #website

Cloudflare Pages 对 Hugo 的支持非常好，速度快、免费额度高，且自带全球 CDN 和 SSL (HTTPS)。

以下是从零开始在 Cloudflare Pages 部署 GitHub 上的 Hugo 站点，并配置二级域名（如 blog.yourdomain.com）的详细步骤：

1准备工作

  • 你已经有一个 GitHub 仓库，里面托管了 Hugo 站点的源码。
  • 你拥有一个域名（假设为 yourdomain.com）。
  • 你有一个 Cloudflare 账号。

2在 Cloudflare 中连接 GitHub 仓库

  1. 登录 Cloudflare Dashboard。

  2. 点击右上角【Add】按钮然后选择 Pages。

  3. 选择 Import an existing Git repository， 点击 Get started 按钮。

  4. 如果你是第一次使用，需要授权 Cloudflare 访问你的 GitHub 账号。

  5. 在仓库列表中，选择存放 Hugo 源码的仓库，点击 Begin setup (开始设置)。

3配置构建环境 (Build Settings)

这是最关键的一步，配置错误会导致部署失败。

  1. Project name: 保持默认或修改为你喜欢的名字（这会生成默认的 xxx.pages.dev 域名）。
  2. Production branch: 通常选择 main 或 master。
  3. Framework preset (框架预设): 在下拉菜单中选择 Hugo。
    • Cloudflare 会自动填入：
    • Build command: hugo
    • Build output directory: public
  4. Environment variables (环境变量) - 非常重要！
    • 默认情况下，Cloudflare 使用的 Hugo 版本可能较老，如果你的本地主题使用了新特性，构建会失败。
    • 展开 Environment variables (advanced)。
    • 添加一个变量：
      • Variable name: HUGO_VERSION
      • Value: 填入你本地使用的版本号（例如 0.155.0 或 0.155.2）。你可在本地终端输入 hugo version 查看。
  5. 点击 Save and Deploy (保存并部署)。

Cloudflare 会开始拉取代码并构建。如果一切顺利，你会看到 “Success!"。

4配置自定义域名

假设你的主域名是 example.com，你想配置 blog.example.com。

  1. 部署成功后，进入该 Pages 项目的控制台。
  2. 点击顶部的 Custom domains (自定义域名) 标签。

  1. 点击 Set up a custom domain。
  2. 输入你的二级域名：blog.example.com，点击 Continue。

接下来分为两种情况：

4.1你的域名 DNS 已经托管在 Cloudflare 上

  • Cloudflare 会自动提示你添加 DNS 记录。
  • 点击 Activate domain，它会自动在你的 DNS 设置里添加一条 CNAME 记录。
  • 等待几秒到几分钟，状态变为 Active 即可。

4.2你的域名 DNS 托管在其他地方 (如阿里云、腾讯云、GoDaddy)

  • Cloudflare 会提示你需要添加一条 CNAME 记录。
  • 前往你的域名服务商控制台 (DNS 设置)。
  • 添加一条记录：
    • 类型 (Type): CNAME
    • 主机记录 (Host/Name): blog (即你的二级前缀)
    • 记录值 (Value/Target): project-name.pages.dev (Cloudflare 提供的那个默认域名)。
  • 回到 Cloudflare 点击 Check DNS records，等待“Active”状态变绿则表示配置成功。

4.3使用 www 子域名（强烈推荐立即尝试）**

  1. 在 Cloudflare Pages 项目 → Custom domains → 输入 www.example.com（带 www）。

  2. 点击 Continue，它应该会给你一个 CNAME 记录。

  3. 去腾讯云 DNSPod 添加以下记录：

    类型主机记录记录值TTL
    CNAMEwww你的项目名.pages.dev600

  4. 添加完后，返回 Cloudflare Pages 点击 Activate 或验证。

这样不需要迁移 NS，几分钟就能生效，还能自动上 HTTPS。

4.4使用根域名 example.com（需要迁移 NS）**

Cloudflare 对 顶级域名（apex/root domain） 如 example.com 的处理变严格了。现在添加根域名时，如果域名不在 Cloudflare 管理下（即 NS 没指向 Cloudflare），就会出现你看到的 “Transfer DNS management” 提示。

这是 Cloudflare 当前对 apex domain 的要求：

  1. 在 Cloudflare 左侧菜单 Domains（域名）→ Add a site（添加站点）。
  2. 输入 example.com → 选择免费方案 → Continue。
  3. Cloudflare 会给你 两个 NS 记录（例如 ns1.cloudflare.com、ns2...）。
  4. 登录腾讯云 → 域名管理 → 找到 example.com → 修改 DNS 服务器（或 DNS 设置），把原来的改成 Cloudflare 的两个 NS。
  5. 等待 NS 生效（一般 1-48 小时，建议晚上操作）。
  6. NS 生效后，回到 Pages 项目 → Custom domains → 添加 example.com，Cloudflare 会自动处理记录。

迁移后你可以同时使用 example.com + www.example.com，功能也更完整（WAF、缓存规则等）。

4.5301 重定向（可选，我没做，仅作为提供一种选择）

根域名做好后，可以在腾讯云或 Cloudflare 加一条重定向规则（301），把 einscat.com 跳转到 www.einscat.com（或反之）。

使用 Cloudflare 的 Redirect Rule（干净、SEO 友好）**

由于你的 www.einscat.com 已经通过 CNAME 正常运行，我们可以让根域名 einscat.com 也走 Cloudflare 代理，然后设置 301 重定向。

  1. 先把根域名添加到 Cloudflare（不一定迁移全部 NS）

    • 登录 Cloudflare → 左侧 Domains → Add a site
    • 输入 einscat.com → 选择 Free 方案 → 添加
    • Cloudflare 会给你两个 NS 记录（例如 ns1.cloudflare.com 和 ns2...）
    • 重要：先不要在腾讯云改 NS，先继续下一步

  2. 在腾讯云添加一条 Dummy A 记录（关键）

    • 去腾讯云 DNSPod → 你的域名 einscat.com → 域名解析
    • 添加以下记录（必须 Proxy）：
      类型主机记录记录值代理状态
      A@192.0.2.1已代理（橙色云）

    这个 IP 是 Cloudflare 的 dummy IP，不会真的指向服务器，只是让 Cloudflare 能接管流量。

  3. 在 Cloudflare 创建 Redirect Rule（301 重定向）

    • 进入你的 einscat.com 站点（不是 Pages 项目）

    • 左侧菜单 → Rules → Redirect Rules → Create rule

    • 使用以下配置（Redirect from root to www）：

      When incoming requests match:

      • Hostname equals einscat.com

      Then:

      • Type: Dynamic
      • Target URL: https://www.einscat.com/${1}
      • Status code: 301
      • Preserve query string: 开启

  4. 等待 5-30 分钟生效，然后测试：

    • 访问 https://einscat.com 是否自动跳转到 https://www.einscat.com
    • 用浏览器开发者工具（F12）查看 Response Headers 是否有 301 Moved Permanently

备选方案：直接用腾讯云 DNSPod 的「显性 URL 转发」

如果不想在 Cloudflare 加站点，可以尝试这个（较简单，但成功率和速度稍差）：

  1. 在腾讯云 DNSPod 删除已有的 @ CNAME（如果有）。
  2. 添加 URL 记录（类型选 显性 URL）：
    • 主机记录：@
    • 记录值：https://www.einscat.com
    • 转发方式：显性（301）

这个方法不需要改 NS，但有时候跳转不稳定，SEO 效果也比 Cloudflare 的 Redirect Rule 差一些。

5HTTPS 设置

  • 无需手动操作。Cloudflare Pages 强制并自动为所有自定义域名提供 SSL 证书。
  • 绑定域名成功后，证书颁发可能需要几分钟到十几分钟。之后访问 https://blog.example.com 即可看到安全锁标志。

6修改 Hugo 的 baseURL (最后修正)

为了防止样式丢失或链接错误，你需要修改 Hugo 源码中的配置文件。

  1. 在本地打开你的 Hugo 项目。
  2. 找到配置文件 hugo.toml (或 config.toml / hugo.yaml)。
  3. 修改 baseURL 字段：
# hugo.toml 示例
baseURL = 'https://blog.example.com/'
  1. 提交代码并 Push 到 GitHub：
git add .
git commit -m "Update baseURL"
git push
  1. Cloudflare 监测到 GitHub 有新提交，会自动触发重新构建（通常几十秒内完成）。

7常见问题排查 (Troubleshooting)

  1. 构建失败 (Error 255):
  • 通常是因为 Hugo 版本不匹配。请回到 Settings -> Environment variables，确保设置了 HUGO_VERSION 且版本号正确，然后手动在该页面顶部点击 Create deployment 重试。
  1. 样式丢失 (CSS fail):
  • 检查第五步的 baseURL 是否正确（注意 https 和结尾的 /）。
  • 如果在 config.toml 中使用了 canonifyURLs = true，尝试将其设为 false。
  1. 页面 404:
  • 确保你的 Hugo 源码根目录下没有乱七八糟的 index.html 覆盖了 Hugo 的生成。
  • 确保文章的 draft: true 已经被改为 false，或者在构建命令中加入 -D (不推荐生产环境用)。