把 HTML 托管到 Cloudflare

Cloudflare 是全球最大的网络基础设施公司之一，在全球 300 多个城市部署了服务器节点。你可能没听过它的名字，但你每天访问的网站中，超过 20% 都在用它。

它最核心的能力是 CDN（内容分发网络）——把你的网站内容复制到全球各地的服务器上，让每个访问者都能从最近的节点获取，速度飞快。

Cloudflare Pages 是什么？

Cloudflare Pages 是 Cloudflare 提供的静态网站托管服务。 专门用来部署 HTML、CSS、图片这类不需要服务器运算的文件。

它有三种部署方式：

• ·Git 集成 —— 连接 GitHub/GitLab 仓库，推送代码自动部署
• ·Direct Upload —— 直接上传文件，适合不想用 Git 的场景
• ·Wrangler CLI —— 命令行一键部署，最快最灵活

今天我们用 Wrangler CLI 方式，最适合新手

Pages vs Workers Static Assets

Cloudflare 有两种托管静态文件的方式：

Cloudflare Pages —— 独立的静态托管产品，支持 Git 集成、自动预览、回滚，适合完整的前端项目。

Workers Static Assets —— Workers 的静态资源功能，配置更简单，一条命令就能部署纯 HTML，适合今天这种"快速上线一个页面"的场景。

两者都是免费的，核心体验一样。今天我们用 Workers Static Assets，因为配置最少、上手最快。

动手之前，先搞懂这三个词：

简单理解：Wrangler 是快递员，Assets 目录是包裹，wrangler.toml 是快递单。 你把包裹打包好、填好快递单，快递员帮你送到全世界。

开始之前，确保你有这三样

• ·Node.js —— 去 nodejs.org 下载安装 LTS 版本，装完终端输入 node -v 验证
• ·Cloudflare 账号 —— 去 dash.cloudflare.com/sign-up 注册，只需邮箱，免费
• ·一个 HTML 文件 —— 昨天做的简历，或任何你想上线的页面

从零到上线，跟着做就行：

第一步：安装 Wrangler

打开终端（Windows按 Win + R 输入 cmd，Mac 按 Cmd + 空格 搜索"终端"），输入：

bash
npm install -g wrangler

等待安装完成，没有报错就说明成功了。

第二步：登录 Cloudflare

在终端输入：

bash
npx wrangler login

浏览器会自动打开 Cloudflare 授权页面，点击 Allow 即可。终端出现 "Successfully logged in" 就说明登录成功。

第三步：创建项目目录

在桌面或任意位置新建一个文件夹，把你的 HTML 文件放进去：

bash
# 创建项目文件夹
mkdir my-site
cd my-site

# 创建 public 文件夹，把 index.html 放进去
mkdir public
mv index.html public/    # Mac/Linux
# move index.html public/  # Windows

项目结构应该是这样的：

my-site/
├── public/
│   └── index.html
└── wrangler.toml   # 下一步创建

第四步：创建配置文件

在项目根目录（my-site/）下新建 wrangler.toml 文件，内容如下：

toml
name = "my-site"
compatibility_date = "2026-06-04"

[assets]
directory = "./public"

三个字段的含义：

• ·name：项目名称，会出现在你的访问地址里
• ·compatibility_date：兼容日期，填今天的日期就行
• ·directory：静态文件存放的文件夹路径

第五步：一键部署

在终端输入：

bash
npx wrangler deploy

等待几秒钟，终端会输出你的访问地址，类似：

https://my-site.你的子域名.workers.dev

打开这个链接，你的网站就已经上线了！任何人都可以通过这个地址访问你的页面。

更新内容

以后想改内容？只需要两步：

1. 1.修改 public/index.html 里的内容
2. 2.再次运行 npx wrangler deploy

每次改完文件，跑一次 deploy 就行。

workers.dev 的地址不太好看？绑定你自己的域名。

前提条件

你需要拥有一个域名（比如在 Cloudflare、阿里云、腾讯云购买的域名），并且把域名的 DNS 托管到 Cloudflare。

操作：登录 dash.cloudflare.com → Add a site → 输入你的域名 → 选择 Free 计划 → 按提示修改 DNS 服务器。

添加路由配置

在 wrangler.toml 中添加自定义域名路由：

toml
[[routes]]
pattern = "resume.你的域名.com/*"
zone_name = "你的域名.com"

再跑一次 npx wrangler deploy，就能通过 resume.你的域名.com 访问了。

❌ 常见错误

• ·入口文件不是 index.html —— Cloudflare 默认访问 index.html，如果你的文件叫别的名字，直接访问域名会 404
• ·wrangler.toml 路径写错 —— directory 要指向你放 HTML 的文件夹，写错就找不到文件
• ·没登录就部署 —— 会报认证错误，先跑 wrangler login

✅ 正确做法

• ·主页面统一命名为 index.html
• ·部署前检查目录结构——确保 public/ 下有 index.html
• ·部署失败时仔细看终端报错信息——大部分问题都有明确的错误提示
• ·CSS/图片等资源也放在 public/ 下——保持相对路径一致

多文件项目怎么组织？

如果你的项目有 CSS、图片等多个文件，全部放在 public/ 目录下，保持相对路径不变即可：

my-site/
├── public/
│   ├── index.html
│   ├── style.css
│   └── images/
│       └── photo.jpg
└── wrangler.toml

HTML 里引用 CSS 用 <link rel="stylesheet" href="style.css">，引用图片用 <img src="images/photo.jpg">，路径和本地打开时完全一样。

也可以让 AI 帮你部署

如果你用的是 Trae / Claude Code 等 Agent 工具，直接发送：

帮我把当前目录下的 index.html 部署到 Cloudflare Workers，
要求：
1. 使用 Workers Static Assets 方式
2. 项目名用 my-resume
3. 帮我安装 wrangler、创建配置文件、执行部署
4. 部署完成后告诉我访问地址

AI 会帮你完成从安装到部署的全部操作。你只需要在浏览器里点击授权登录就行。

1. 1.Cloudflare Workers Static Assets 是托管静态网站最简单的方式之一——免费、快速、全球 CDN，个人项目完全够用。

1. 1.部署只需要三样东西：Wrangler + Assets 目录 + wrangler.toml。 安装工具、放好文件、写好配置，一条命令上线。

1. 1.更新内容就是改文件 + 重新 deploy。 不需要复杂的流程，改完跑一次命令就行。

1. 1.遇到问题先看终端报错信息。 绝大部分问题都有明确的错误提示，按提示操作即可。也可以直接让 AI 帮你排查。

🎉 恭喜你完成了 7 天学习之旅！从认识 AI 到用 AI 做简历再到部署上线，你已经掌握了 AI 编程的完整流程。接下来，用这些能力去做更多你想做的事吧。