使用 Cloudflare Tunnel 为 Hugo 网站创建公网 Dev 环境
在现代前端/内容开发流程中，拥有一个方便、安全、低延迟的本地预览发布方式变得越来越重要。本文将介绍如何使用 Cloudflare Tunnel 将本地 Hugo 网站通过子域名暴露到公网，同时分享过程中遇到的实际问题与解决方案。
环境准备
- 本地开发环境：macOS
- Hugo 项目路径：本地 Hugo 目录
- Cloudflare 已接入域名
- 安装 cloudflared：
brew install cloudflared
实操步骤
1. 登录 Cloudflare
cloudflared login
会打开浏览器，引导你选择一个接入了 Cloudflare 的域名。
2. 启动 Hugo 本地服务
hugo server -D --bind 127.0.0.1 --baseURL http://localhost:1313
确保你可以访问本地服务。
3. 创建 Cloudflare Tunnel
cloudflared tunnel create hugo-dev
生成的 tunnel ID 文件位于 ~/.cloudflared/ 下。
4. 配置
~/.cloudflared/config.yml
tunnel: hugo-dev
credentials-file: <路径到生成的 JSON 文件>
ingress:
- hostname: <子域名>
service: http://localhost:1313
- service: http_status:404
5. 配置 DNS
cloudflared tunnel route dns hugo-dev <子域名>
这会自动添加一条 CNAME 指向 Cloudflare Tunnel。
6. 启动 Tunnel
cloudflared tunnel --config ~/.cloudflared/config.yml run
现在就可以访问你的子域名了。
遇到的问题和解决方案
问题：访问返回 502
原因排查
- Hugo 未启动；
- config.yml 写错（如用了 https 而 Hugo 实际只支持 http）；
- 运行 tunnel 时未加载 config；
- 本地代理拦截了 HTTPS 请求（比如 Clash/Surge/V2Ray 监听在 7890）。
解决方法
- 正确运行命令：
hugo server -D --bind 127.0.0.1
cloudflared tunnel --config ~/.cloudflared/config.yml run
- 关闭 Clash 等代理，或使用：
env -u http_proxy -u https_proxy -u all_proxy curl <子域名>
- 浏览器访问时关闭系统代理。
运行原理
下图展示了 Cloudflare tunnel 的运行原理：
Cloudflare Tunnel 的核心原理是：你的本地开发机通过 cloudflared 客户端主动建立一条到 Cloudflare 的安全隧道，Cloudflare 边缘节点接收到外部请求后，通过这条隧道将流量转发到你的本地服务。这样，无需公网 IP，也不用暴露本地端口，外部用户即可通过自定义域名安全访问你的本地 Hugo 服务。
可选优化
你可以将 tunnel 和 Hugo 启动打包成一个脚本：
# run-dev.sh
#!/bin/bash
hugo server -D --bind 127.0.0.1 --baseURL http://localhost:1313 &
cloudflared tunnel --config ~/.cloudflared/config.yml run
为什么不用 CI 平台自带的 Preview 功能？
Netlify、Cloudflare Pages、Vercel 等现代平台支持基于 Git 提交的自动预览环境创建，通常用于：
- PR 预览链接；
- Dev、Staging 环境。
但是它们并不能完全满足“本地实时预览 + 快速分享”的需求：
| 功能 | CI 平台 Preview | Cloudflare Tunnel |
|---|---|---|
| 即时生效 | ❌ 构建需等待数十秒至数分钟 | ✅ 保存即预览 |
| 本地修改无 push | ❌ 需提交 Git | ✅ 可调试草稿与草稿配置 |
| 跨网络设备访问 | ❌ 不支持本地预览共享 | ✅ 支持 |
| 支持动态内容 | 部分 | ✅ 任意本地服务 |
| 分享外部链接 | ✅ | ✅ |
| 自定义访问控制 | 部分（需付费） | ✅ 可接入 Cloudflare Access |
结论：Cloudflare Tunnel 是“构建前的即时预览”方案，在开发调试阶段更高效。
局域网访问 vs Cloudflare Tunnel：有什么不同？
你可能会问：我用 hugo server –bind 0.0.0.0，让其他设备通过局域网访问不也可以吗？
确实可以，但：
| 问题 | 局域网访问 | Cloudflare Tunnel |
|---|---|---|
| 同一网络要求 | ✅（必须） | ❌（任意网络均可访问） |
| HTTPS | ❌ 不支持 | ✅ 自动配置 |
| 安全性 | ❌ 设备间直连，存在风险 | ✅ 经 Cloudflare 安全代理 |
| 分享便利 | ❌ 需要告诉对方局域网 IP | ✅ 提供自定义域名链接 |
| 远程访问 | ❌ 不可行 | ✅ 无需公网 IP，直接远程访问 |
| 可集成权限认证 | ❌ | ✅ 搭配 Cloudflare Access 限定访问用户 |
所以：局域网访问适合临时、自己预览；Cloudflare Tunnel 更适合分享、协作、远程使用。
为什么通过 Cloudflare Tunnel 访问 Hugo 网站时 Live Reload 不起作用？
Hugo 的 Live Reload 功能依赖 WebSocket，而 Cloudflare Tunnel 并不完全支持将 localhost:1313 中的 WebSocket 事件透传给浏览器，因此页面不会自动刷新。
推荐做法
- 本地写作时使用 localhost:1313 打开页面，保持 LiveReload；
- 通过 cloudflared 提供的公网地址用于分享和协作；
- 两者互不影响，可同时运行。
总结
使用 Cloudflare Tunnel 为 Hugo 网站提供公网 Dev 环境，可以：
- 实时预览内容变更；
- 多设备远程访问，无需配置内网穿透；
- 分享给其他人进行预览与协作；
- 自动获得 HTTPS 和安全防护；
- 配合 Cloudflare Access 进行访问控制。
它是一个 非常适合个人开发者、内容创作者、技术博主使用的轻量级解决方案，比传统的 CI/CD Preview 更快，更灵活。