H HuluVest中文投资分析工具

将 HuluVest 部署到 Cloudflare Pages

你可以不使用 GitHub，把 Codex 生成的纯静态 HTML、CSS 和 JavaScript 直接部署到 Cloudflare Pages。本教程会带你从 Cloudflare 注册开始，完成命令行部署和自定义域名绑定。

跳到部署命令

在本文中

先决条件

开始之前，请确认你已经拥有以下内容。

  • 一个可以登录的 Cloudflare 账号。
  • 一个域名，例如 huluvest.com。
  • 一个本地静态网站目录，例如 site/。
  • 可以运行命令行的 macOS、Windows 或 Linux 环境。
HuluVest 当前采用纯静态架构，不需要服务器、数据库或后端 API。

注册并登录 Cloudflare

  1. 打开 Cloudflare 官网。
  2. 注册账号并完成邮箱验证。
  3. 登录 Cloudflare Dashboard。

登录后，你会在 Dashboard 中管理域名、DNS、Pages 项目和部署记录。

添加 huluvest.com

  1. 在 Cloudflare Dashboard 中选择 Add a domain。
  2. 输入 huluvest.com。
  3. 选择 Free plan。
  4. 按照 Cloudflare 提示，到域名注册商修改 nameserver。
  5. 等待 Cloudflare 显示域名为 Active。

nameserver 生效通常需要几分钟到数小时。生效前，DNS 记录可能无法按预期访问。

创建 Pages 项目

Direct Upload 不在域名主页中。你需要从 Cloudflare Dashboard 的 Workers & Pages 区域创建 Pages 项目。

  1. 进入 Workers & Pages。
  2. 选择 Create application。
  3. 选择 Pages。
  4. 选择 Upload assets 或 Direct Upload。
  5. 项目名填写 huluvest。

也可以使用 Wrangler 创建项目。

npx wrangler pages project create huluvest --production-branch=main

准备 Node.js 和 Wrangler

Wrangler 是 Cloudflare 官方命令行工具。新版 Wrangler 需要较新的 Node.js。HuluVest 使用 Node 22。

检查 Node.js

node -v
npm -v
npx -v

使用 Homebrew 安装 Node 22

brew install node@22

如果你不想覆盖系统默认 Node，可以在命令前临时指定 Node 22。

PATH=/usr/local/opt/node@22/bin:$PATH node -v

登录 Wrangler

npx wrangler login
npx wrangler whoami

准备静态网站目录

Cloudflare Pages 上传的是 site/ 目录中的文件，而不是整个项目根目录。

site/
  index.html
  tools/
    portfolio.html
    dca.html
    return-calculator.html
    risk.html
  docs/
    deploy-cloudflare.html
  assets/
    css/
    js/
  _headers
  _redirects

本地预览网站。

python3 -m http.server 8080 --directory site

然后在浏览器打开：

http://127.0.0.1:8080/

部署网站

HuluVest 在 package.json 中封装了部署命令。预览版本用于检查页面，正式版本用于更新生产站点。

部署预览版本

npm run deploy:preview

部署正式版本

npm run deploy

底层 Wrangler 命令如下。

wrangler pages deploy ./site --project-name=huluvest --branch=main

部署成功后，Cloudflare 会返回一个 pages.dev 地址。

绑定自定义域名

  1. 进入 Workers & Pages。
  2. 打开 huluvest 项目。
  3. 进入 Custom domains。
  4. 添加 huluvest.com。
  5. 添加 www.huluvest.com。

在 DNS 中设置 CNAME 记录。

Type: CNAME
Name: @
Target: huluvest.pages.dev
Proxy: On

Type: CNAME
Name: www
Target: huluvest.pages.dev
Proxy: On
如果 DNS 中仍有指向旧站点、AWS S3、其他 Pages 项目或其他托管平台的记录，请删除或替换它们。

验证部署结果

打开生产域名。

https://huluvest.com

也可以使用命令行检查状态码和页面标题。

curl -iL https://huluvest.com | head -80

成功时应该看到类似结果。

HTTP/2 200
<title>HuluVest - 中文投资分析工具</title>

故障排除

Wrangler 提示 Node.js 版本太旧

安装 Node 22，或在命令前临时指定 Node 22 的路径。

PATH=/usr/local/opt/node@22/bin:$PATH npx wrangler --version

npm 缓存权限错误

如果看到 EACCES，可以给项目单独设置 npm 缓存目录。

npm_config_cache=.npm-cache npx wrangler --version

Cloudflare 返回 1016

这通常表示域名已经进入 Cloudflare 路由，但 DNS 没有正确指向 Pages 项目。确认 CNAME 目标是 huluvest.pages.dev。

www.huluvest.com 无法访问

确认 DNS 中存在 Name: www 的 CNAME 记录，并且 Pages 的 Custom domains 中也添加了 www.huluvest.com。