Cloudflare Pages 上线：不会 Git 也能拖拽发布

这是 A 路线（做网站）的第 3 课，也是全站最「手残友好」的一篇 Cloudflare Pages 教程：不建仓库、不装工具、不碰命令行，把 A1 做好的文件夹拖进浏览器，就得到一个 项目名.pages.dev 的公网网址。全程约 12 分钟，免费计划就够。

• 文件夹还没准备好？先回 A1 用 AI 做网站 把页面做出来
• 还在几家平台之间犹豫？先看 A5 部署平台对比 再回来

学完你能做什么

• 把 A1 做好的网站文件夹拖进 Cloudflare Pages，不建 Git 仓库、不碰命令行，拿到 项目名.pages.dev 公网网址
• 说得出 Cloudflare Pages 的三种上线方式（拖拽 / Wrangler 命令行 / Git 集成）各适合谁、哪两种不能互转
• 部署完自己验收网址；改版时在同一个项目里重新拖一次，就发布新版本
• 知道免费档的边界：单文件 25 MiB、拖拽单次 1,000 个文件、每月 500 次部署

你现在的困境

• 「A2 建仓库那套我试到一半放弃了，能不能把文件夹直接扔上去就完事？」
• 「我就想把作品集链接发到朋友圈，不想为了上线先弄明白 Git 是什么」
• 「听说 Cloudflare 免费也能托管网站，可控制台全是英文按钮，不知道从哪点起」

什么时候用这一招

当你需要：

• 把 A1 做好的静态网站发布到公网，拿到一个能发出去的链接
• 全程浏览器操作：点选 + 拖拽，什么都不用装
• 免费上线——官方标明 Pages「Available on all plans」（所有计划可用），免费档对个人站足够

而且不想：

• 为了上线先学仓库和 Git——那是 A2 GitHub Pages 上线 的路线
• 在项目文件夹里跑命令——那是 A4 Vercel 上线 的路线
• 买服务器、配环境、研究部署脚本

🎒 开始前的准备

• 走完 A1 用 AI 做网站：从一句话到能上线的页面，手里有一文件夹静态页面
• 一个能收邮件的邮箱，用来注册 Cloudflare 账号
• 网站文件夹（或它的 zip 包）放在顺手的位置——拖拽两种都支持
• 一杯水 ☕

核心思路

Cloudflare Pages 是 Cloudflare 的网站托管服务：你把网站文件交给它，它把站点发布到 Cloudflare 全球网络。纯静态网站（A1 的产出）直接传文件就能上线。

把文件交上去有三条路，本课走第一条：

上传方式	要会什么	特点	适合谁
拖拽上传（Direct Upload，本课主线）	浏览器拖文件	立刻拿到 项目名.pages.dev	完全不想碰命令行和 Git 的你
Wrangler 命令行	两条 npm 命令	同样的网址，文件数上限更高	愿意开终端但不想学 Git 的
Git 集成	GitHub/GitLab + push	每次 push 自动构建部署	已经会 Git、要频繁改版的

一句话记住 Direct Upload：传的是「现成的文件」。平台不再帮你构建——传什么就上线什么，所以上传前文件必须已经是最终形态。A1 里 AI 写好的纯静态页面正好就是。

⚠️ 选路之前想清楚：两条路互斥

• 用了 Git 集成的项目，之后不能改成 Direct Upload——官方文档明确写了这条限制
• 选了 Direct Upload 的项目，之后也不能改成 Git 集成；哪天想要 push 自动部署，只能另建一个新项目
• 好消息：同一个 Direct Upload 项目里，拖拽和 Wrangler 两种上传方式随便切换

💡 官方在推 Workers，小白暂时不用管

Cloudflare 官方文档现在在 Pages 页面顶部提示：Workers 支持大多数 Pages 用例、功能更全，新项目建议从 Workers 起步。Workers 是 Cloudflare 的主力开发平台，适合做带后端的全栈应用；但对零基础上线静态网站，Pages 的拖拽上传仍是最直接的路径——什么都不用装。以后要做全栈应用，再去了解 Workers 不迟。

跟我做

五步走完，你的网站就有公网网址了。示例沿用 A1 的「摄影作品集」，你换成自己的题材照做即可。

第 1 步：检查网站文件夹，确认拖「对的那一层」

为什么：Direct Upload 不帮你构建，而且上传目录的内容就是网站根目录的内容——多套一层文件夹，首页就不在网址的第一层了。

打开 A1 的项目文件夹看一眼，第一层应该直接是这些文件：

index.html      ← 首页，必须在第一层
style.css
script.js
images/

你应该看到：文件夹第一层直接躺着 index.html，双击能在浏览器打开你的页面。

想拖 zip 也可以——官方说明拖拽支持「一个 zip 文件」或「一个文件夹」。要压缩就压这一层，别把它的上层文件夹一起压进去。

• 文件夹（或 zip）第一层直接看到 index.html

第 2 步：注册 Cloudflare 账号，进入 Workers & Pages

为什么：Pages 项目都在控制台的 Workers & Pages 页里创建和管理。

操作：浏览器打开 dash.cloudflare.com 注册并登录（免费计划即可，Pages 所有计划都能用），在控制台里找到 Workers & Pages 页面点进去。

你应该看到：Workers & Pages 页面，以及 Create application（创建应用）按钮。

• 能看到 Create application 按钮

第 3 步：创建应用并拖入文件夹——Cloudflare Pages 教程的核心一步

为什么：项目名决定你的网址前缀，这一步填好，网址就定了。

按官方路径点进去：Workers & Pages → Create application → Get started → Drag and drop your files。

在项目名输入框填一个名字（例如 my-photo-site），然后把文件夹或 zip 拖进上传框。

你应该看到：文件开始上传，列表里能看到 index.html 这些文件名，没有红色警告。

💡 项目名 = 网址前缀

你的网址就是 项目名.pages.dev。官方文档说明：项目名被占用时，Cloudflare 会自动补几个随机字符——想保住干净网址，第一次就填个不容易重名的名字。

• 项目建好了，上传列表里没有红色警告

第 4 步：点 Deploy site，拿到 pages.dev 网址

为什么：上传完还差「部署」这个动作，部署完成才有公网网址。

操作：上传完成后选择 Deploy site（界面这一步也可能显示 Save and Deploy，点它就对了），等进度跑完。

你应该看到：部署完成，页面给出你的网址 https://项目名.pages.dev；继续进入项目面板（continue to your newly deployed project），能看到部署状态和网址。

• https://项目名.pages.dev 出现了

第 5 步：打开网址验收，学会更新新版本

为什么：上线前必须自己先看过——3.4 验收检查 的纪律，对刚上线的网站同样适用。

操作：电脑浏览器打开 https://项目名.pages.dev，对照 A1 的结构清单逐块看一遍；再把链接发到手机上打开。

你应该看到：手机、电脑都能正常打开你的页面，窄屏也不乱。

以后改版怎么办？让 AI 改好文件，回到这个项目的 Workers & Pages 页，选择 Create a new deployment，环境选生产（production），把新的文件夹再拖一次——新版本就上线了。旧版本也不会丢：Pages 支持回滚（Rollbacks），一键退回之前的生产版本。

你应该看到：新版本替换旧版本，网址不变。

• 手机和电脑都打开过自己的网址

检查点 ✅

• 文件夹（或 zip）第一层直接是 index.html
• 在 Workers & Pages 里通过 Create application → Get started → Drag and drop your files 建好了项目
• 部署完成，https://项目名.pages.dev 能打开你的首页
• 手机上也能正常打开
• 知道改版后用 Create a new deployment 重新拖一次就能更新

踩坑提醒

❌ 拖错了文件夹层级

现象：部署成功了，打开网址却看不到自己的首页。

原因：上传目录的内容就是网站根目录的内容——把网站文件夹又套进一层新文件夹再拖（或 zip 里多包了一层），index.html 就不在根目录了。

正确做法：压缩或拖拽前打开看一眼，第一层直接是 index.html 才对。传错了不用删项目，用 Create a new deployment 拿正确的文件夹重拖一次。

❌ 文件超限：单文件 25 MiB、拖拽单次 1,000 个

现象：上传时个别文件旁边出现红色警告符号，这个文件没传上去。

原因：超出直传限制——官方说明，单个文件超过 25 MiB 会出现红色警告；拖拽单次最多 1,000 个文件；Wrangler 上限宽一些（20,000 个文件，单文件同样 25 MiB）。

正确做法：官方说明红色警告的资产可以删掉，但不能原地替换，只能整站重新上传。所以：图片先压缩再传；文件数超过 1,000 就改用 Wrangler（见下面进阶技巧）。免费档每月 500 次部署，重传前先把文件理干净。

❌ 部署成功，打开网址却报 DNS 错误

现象：部署明明完成了，浏览器却打不开，提示 DNS 错误。

原因：官方文档写了，首次部署后 DNS 可能还没生效（传播需要时间）。

正确做法：等几分钟再刷新，或换台设备、换个网络（比如手机流量）再打开。

❌ 刚注册就连建好几个项目，被拦住了

现象：第一个项目刚建完，马上再建新的却被限制。

原因：官方对新账号有防滥用限制——使用服务的前 48 小时内限制能创建的新 Pages 项目数量，之后自动解除；另外每个账号最多 100 个项目。

正确做法：今天先把一个项目跑通；确实要建多个，等 48 小时后再来。

进阶技巧（可选）

🔧 Wrangler 两条命令上线（可选）

愿意开终端但不想学 Git？官方命令行工具 Wrangler 走的也是 Direct Upload，和拖拽同属一路、随时可混用：

npx wrangler pages project create
npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>

• 第一条命令会提示你填项目名和生产分支，之后缓存在 node_modules/.cache/wrangler，后续部署不用再填
• <BUILD_OUTPUT_DIRECTORY> 换成你的文件夹路径；A1 的纯静态网站，传的就是项目文件夹本身
• Wrangler 只支持文件夹，不支持 zip（拖拽两种都行）
• 想发预览环境：加 --branch=<分支名>，得到 分支名.项目名.pages.dev
• 文件数上限 20,000（拖拽是 1,000）；functions 函数目录只有 Wrangler 能编译上传，拖拽不支持（_worker.js 单文件两种都支持）
• 前提：本机装好 npm（官方要求先装 npm，再装 Wrangler）；第一次使用先运行 npx wrangler login 登录，再执行下面的命令

🔧 会 Git 了？让每次 push 自动部署（可选）

这就是和拖拽互斥的 Git 集成，一路点完：Workers & Pages → Create application → Pages → Connect to Git，授权 GitHub 或 GitLab → 选仓库（私有、公开都支持）→ 配置构建：项目名（默认同仓库名）、生产分支（通常 main）、没有框架就把 Build command 留空、构建输出目录 → Save and Deploy。

之后每次 push 自动构建部署；非生产分支自动生成预览部署（分支名.项目名.pages.dev）。提醒：建过直传项目想改走这条路，只能新建项目——互斥规则见上面核心思路。

🔧 想要自己的域名？（可选）

pages.dev 是平台送的子域名，想更正式可以绑自己买的域名：免费计划每个项目可绑 100 个自定义域名。域名解析与绑定的通用做法，见 5.3 自定义域名。

一个 Cloudflare 特有的注意点：官方文档提醒，删除带自定义域名的项目前，必须先删掉对应的 CNAME 记录，否则域名会指向一个已不存在的项目。

本课小结

✅ 你走完了这篇 Cloudflare Pages 教程的拖拽上线路线：

• 检查文件夹：第一层直接是 index.html，拖文件夹或 zip 都行
• 创建项目：Workers & Pages → Create application → Get started → Drag and drop your files，项目名就是网址前缀
• 部署：Deploy site → 拿到 https://项目名.pages.dev
• 验收：手机、电脑都打开过
• 更新：Create a new deployment 再拖一次；同一个直传项目里拖拽和 Wrangler 随便换，但和 Git 集成互斥

环节	关键操作	要记住的
准备	检查文件夹第一层	上传目录的内容 = 网站根目录
创建	Create application → 拖拽入口	项目名决定 pages.dev 前缀
部署	Deploy site	单文件 ≤ 25 MiB，拖拽单次 ≤ 1,000 个文件
验收	手机 + 电脑打开	首次打开报 DNS 错误，先等几分钟
更新	Create a new deployment	免费档每月 500 次部署，历史版本可回滚

GitHub Pages、Cloudflare Pages、Vercel 三家免费额度与限制的完整对比，A5 部署平台对比 一页看全。

下一课预告

下一课 A4 Vercel 上线：AI 编码代理的一条命令部署，换一种上线哲学：在项目文件夹里敲一条命令，从构建到上线全自动。你会学到：

• 装 Node.js 18+ 和 Vercel CLI，vercel login 一次登录
• vercel --prod 一条命令完成生产部署
• 「CLI 自动识别框架」是什么意思，对你的静态网站意味着什么
• Vercel Hobby 免费档禁止商业用途，选它之前要清楚

准备好了就把文件夹留在手边，进 A4 →