📺 视频《Cloudflare Pages 小白教程》配套图文教程

3 分钟，把你的网站
免费放到网上

不用买服务器、不用学代码。Cloudflare Pages 让你把做好的网页传上去，立刻就有个全世界都能打开的网址，还能绑你自己的域名。

0Cloudflare Pages 是什么

一句话：一个免费帮你"上网"的服务——你把网页文件给它，它给你一个全世界都能打开的网址。

☁️ 打个比方

你做了个漂亮的网页（比如个人主页、作品集、活动海报页），它现在只躺在你电脑里，别人打不开。Cloudflare Pages 就是帮你把它"挂到网上"的免费货架：传上去，立刻得到一个 xxx.pages.dev 的网址，发给谁谁都能打开。而且：

  • 免费——个人用完全够，不用掏一分钱；
  • 快——全球都有服务器，国内国外打开都不慢；
  • 自动带 HTTPS——网址前面那把小锁头，自动配好；
  • 更新超简单——改完文件重新传一次就行。

ℹ️ 适合放什么

  • 静态网页：.html / .css / .js / 图片，做好的成品页面；
  • 个人博客、作品集、 landing page、活动页、文档站；
  • 不适合：需要登录、数据库、后台程序的动态网站（那是另一回事）。

1第一步：注册 Cloudflare 账号

先有个账号，后面三步都靠它。全程免费，2 分钟搞定。

📝 注册流程

  1. 打开 dash.cloudflare.com（Cloudflare 官网），点 Sign Up 注册；
  2. 填邮箱、设密码，点注册；
  3. 去邮箱里点验证链接，验证通过；
  4. 登录进控制台（Dashboard），看到左侧菜单就行。

⚠️ 一个提醒

注册不需要绑卡、不需要实名，邮箱验证即可。免费版（Free Plan）对个人网站完全够用，别被忽悠去买付费版。

2第二步：新建 Pages 项目，上传你的网站

核心步骤：把你电脑里的网页文件夹传上去，3 分钟后就有网址了。

📤 准备：你的网站文件夹

先确认你手里有个文件夹，里面是做好的网页。最简单的结构：

我的网站/→index.html（首页，必须有）→style.css / 图片等

关键：首页文件必须叫 index.html，这是约定，Cloudflare 靠它认出"这是网站首页"。

🚀 上传步骤（网页端直接传，不用装软件）

  1. 登录 Cloudflare 控制台，左侧菜单找到 Workers & Pages，点进去；
  2. 点 Create（创建），选 Pages 标签页；
  3. 选 Upload assets（直接上传文件）——不用连 GitHub 那种复杂方式；
  4. 给项目起个名字，比如 my-first-site（只能用小写字母、数字、横线）；
  5. 把你准备好的网站文件夹整个拖进上传框（或点选择文件夹）；
  6. 点 Deploy site（部署），等 1~3 分钟；
  7. 部署成功，页面上会出现你的网址：https://my-first-site.pages.dev ——点开看看，全世界都能访问了！🎉

✅ 检查一下

  • 用手机浏览器（关掉 WiFi 用流量）打开那个网址，能打开 = 真的上了公网；
  • 点点页面里的链接、图片，确认都正常显示；
  • 网址前面有把小锁头 🔒，说明 HTTPS 自动配好了。

3第三步：绑定你自己的域名（可选）

xxx.pages.dev 能用，但如果你有自己的域名（比如 www.你的名字.com），绑上去更像回事。这步可选，不绑也能用。

🔗 两种情况

情况 A：域名已经在 Cloudflare 上托管（推荐，最省事）：

  1. 进你的 Pages 项目，点 Custom domains（自定义域名）→ Set up a custom domain；
  2. 输入你的域名，比如 www.example.com，点继续；
  3. Cloudflare 自动配好 DNS，1~2 分钟后就能用自己的域名打开了。

情况 B：域名在别处买的（比如阿里云、腾讯云）：

  1. 先把域名的 DNS 转到 Cloudflare（Cloudflare 官网有引导：添加站点 → 按提示改 nameserver）；
  2. 转过来之后，按情况 A 的步骤绑定即可。

ℹ️ 小知识

绑定后，xxx.pages.dev 的旧网址依然能用，两个网址打开的是同一个网站，不用担心。

4第四步：以后每次更新，怎么重新发布

网站不是一锤子买卖，改了内容要重新"上架"。好消息：比第一次还简单。

🔄 更新流程

  1. 在你电脑上改好网页文件（改文字、换图片、加页面都行）；
  2. 回到 Cloudflare 控制台 → 你的 Pages 项目；
  3. 点 Create deployment（创建部署），把更新后的文件夹重新拖进去上传；
  4. 等 1~3 分钟，新版本自动替换旧版本，网址不变。

✅ 进阶：每次部署都有"历史版本"

Pages 会保留你每次部署的记录，万一新版改坏了，可以在部署列表里找到上一个好的版本，一键 Rollback（回滚）回去。不用慌，随便改，改坏了能退。

5AI 指令提示词模板（复制即用）

把下面这些话直接复制，发给你的 AI 助手（比如 Muse），它会帮你把活干了。你是小白，你只管复制粘贴。

🌐 模板 1：让 AI 帮你做个静态网站

帮我做一个静态网站，主题是 [比如：我的摄影作品集]。要求：单页，包含首页横幅、作品展示区、联系方式三部分；风格简约深色；首页文件必须叫 index.html；所有文件放在一个文件夹里，我直接能拖到 Cloudflare Pages 上传。写完告诉我每一步怎么上传。

🔍 模板 2：让 AI 检查网站能不能上传

检查我这个网站文件夹 [把文件夹路径或文件列表贴进来]：有没有 index.html？图片、CSS、JS 的引用路径对不对？有没有 Cloudflare Pages 不支持的东西？列出问题清单，修好再告诉我可以上传了。

🔗 模板 3：让 AI 帮你规划域名绑定

我的网站已经部署在 Cloudflare Pages 上，网址是 [你的 pages.dev 网址]。我有一个域名 [你的域名]，现在在 [Cloudflare / 阿里云 / 腾讯云]。告诉我一步步怎么把域名绑上去，每一步要点哪里、填什么。

🐛 模板 4：部署失败了，让 AI 帮你排查

我的 Cloudflare Pages 部署失败了，报错信息是 [把报错截图的文字或描述贴进来]。帮我分析可能的原因，按"最可能 → 最不可能"排序，每种给出具体的解决步骤。

6常见问题和解决办法

小白最容易卡住的几个地方，提前看一眼。

⚠️ 上传了但打开是 404 / 空白页

十有八九是文件夹里没有 index.html，或者它不在文件夹根目录。检查：你拖进去的文件夹，第一层必须直接看到 index.html。

⚠️ 图片显示不出来

一般是引用路径写错了。用相对路径（比如 images/photo.jpg），别用你电脑上的绝对路径（比如 C:\Users\xxx\...）。

⚠️ 部署后等了很久还是旧内容

浏览器缓存。按 Ctrl+Shift+R（Mac 是 Cmd+Shift+R）强制刷新，或者换个浏览器打开看看。

ℹ️ 免费版够用吗

个人网站、小生意官网、作品集：完全够用。Cloudflare 免费版每月 10 万次请求以内不花钱，你的网站得挺火才用得完。