Cloudflare Pages SOP

新人 AI 工作 SOP
网站部署上线

面向使用 AI 但不懂代码的新手。你负责点击操作，AI 负责技术判断。遇到任何困难，把信息发给 AI，让部署上线这件事变成一条清晰、可回退、可复用的路径。

开始部署 维护网站
v4.0 Refero refresh 2026-07-14 零基础 你点 + AI 帮
Step 01

前端上线

把网站代码连接到 Cloudflare Pages，完成构建、发布和正式地址确认。

查看前端步骤 Step 02

后端 D1

创建 D1 Database，并把数据库绑定到 Pages Functions，形成 Cloudflare 内部后端链路。

查看 D1 绑定 Step 03

维护排错

上线后用部署记录、函数日志和 AI 提示词快速定位问题，必要时回退版本。

查看维护模板

一、这个 SOP 是给谁用的

当你已经有一个网站项目，代码已经上传到 GitHub 后，可以用这个 SOP 完成上线。

适合的场景

  • 纯展示类网站（官网、活动页、个人主页）
  • 带搜索、登录等交互功能的网站
  • 工具页、落地页上线

你需要准备的账号

账号干什么用的是否必须
GitHub 账号存放你的网站代码必须
Cloudflare 账号放你的网站，让用户能访问必须
Cloudflare D1存放后端数据，和 Pages Functions 配合使用有后端数据时必须
代理工具（翻墙软件）注册和配置海外平台时需要必须（见第二章）
AI 工具（如 TRAE）遇到任何困难随时问 AI强烈建议
核心理念：你不需要懂代码。你只需要做两件事：跟着步骤点击操作，以及遇到不确定的地方把信息发给 AI 让它帮你判断。
什么是"前端"和"后端"？：简单理解——用户能看到和点击的页面叫"前端"，在背后处理数据、搜索、保存信息的程序叫"后端"。如果你的网站只有展示页面没有交互功能，那就只有前端，不需要后端。

二、网络环境说明（重要）

这是新手最容易忽略的一步：不同平台在国内的访问情况不同。不提前了解，会导致"明明操作对了但就是打不开"。

各平台在国内能不能打开？

平台国内状态用来干什么
Cloudflare Pages能直接打开放你的网站
DeepSeek能直接打开AI 服务（如果你的网站用到了）
GitHub时好时坏存代码
Cloudflare 操作后台建议开代理配置网站部署
Cloudflare D1建议开代理配置存放后端数据
Vercel打不开不要用这个

什么时候要开代理，什么时候不用？

你在做什么要开代理吗？说明
注册 GitHub / Cloudflare 账号要开注册时可能需要验证，不开代理可能卡住
在 Cloudflare 后台操作建议开开了更稳定，不容易加载失败
上传代码到 GitHub看情况有时候能传成功，传不上去就开代理
别人访问你的网站不用开网站放在 Cloudflare 上，国内直接能打开
记住这句话：你在配置和部署的时候需要开代理，但你的用户访问网站时不需要开代理。

上传代码到 GitHub 总是失败？

如果你在上传代码到 GitHub 时经常失败，可能是网络问题。不要自己折腾网络设置，直接问 AI：

发给 AI 的提示词
我在上传代码到 GitHub 时总是失败，提示连接超时。 我的电脑用的是 Windows 系统，代理软件是【填你的代理软件名称，比如 Clash / V2Ray 等】。 请帮我： 1. 判断是不是代理没配置好 2. 如果需要配置，请告诉我具体怎么操作（一步一步来） 3. 配置好了之后怎么测试是否成功

三、部署前准备

在开始部署前，确认以下内容：

  1. 已注册并登录 Cloudflare 账号（注册时需要开代理）
  2. 已有 GitHub 账号，网站代码已经上传到 GitHub 仓库
  3. 如果你的网站有搜索、登录等交互功能，还需要准备好后端代码的 GitHub 仓库
部署时需要填一些配置信息，但你不需要自己判断怎么填：Cloudflare 会问你一些问题（比如"你的项目用什么技术""构建命令是什么"），这些你不需要懂。把你的 GitHub 仓库地址发给 AI，AI 会告诉你每个空填什么。
发给 AI 的提示词
我要把网站部署到 Cloudflare Pages，这是我的 GitHub 仓库地址：【填你的仓库地址】 请你帮我看看： 1. 这个网站是什么类型的？ 2. Cloudflare 会问我的"构建命令"应该填什么？ 3. "输出目录"应该填什么？ 4. 有没有需要提前准备的东西？ 请用大白话告诉我，我完全不懂代码。

四、前端部署到 Cloudflare Pages

这是核心步骤。Cloudflare Pages 是一个免费的网站托管平台，放在上面的网站国内用户可以直接访问。

1

进入 Cloudflare 后台

打开 https://dash.cloudflare.com/（建议开代理），登录后进入控制台首页。

2

找到 Workers & Pages

在左侧菜单栏找到 Workers & Pages，点击进入。

如果左侧菜单很多，在 Build / Compute 分类下找。

Workers & Pages 是什么：就是 Cloudflare 里"管理网站"的页面。进去之后可以创建新的网站项目。
Cloudflare 控制台 Workers & Pages 页面

↑ 在左侧找到 Workers & Pages，然后点右上角蓝色按钮 Create application

3

创建新应用

点击右上角蓝色按钮 Create application。

中文理解：就是"创建新项目"的意思。

4

选择部署 Pages（不要选 Worker！）

默认显示 Create a Worker。不要点这个！我们是部署网站页面，需要选 Pages。

在页面下方找到 "Looking to deploy Pages? Get started"，点击 Get started。

Worker 和 Pages 的区别（简单理解）：Worker 是用来处理后端逻辑的，Pages 是用来放网站页面的。我们要上线网站，所以选 Pages。选错了也没关系，退回去重新选就好。
Cloudflare 创建 Worker 或 Pages 选择页面

↑ 不要选 Create a Worker，在页面底部找到 "Looking to deploy Pages? Get started" 点这个

5

选择从 GitHub 导入

选择 Import an existing Git repository，点击 Get started。

中文理解：从 GitHub 上已有的代码仓库导入。这样以后你更新了 GitHub 上的代码，Cloudflare 会自动帮你重新部署。

Cloudflare Pages 导入 Git 仓库页面

↑ 选第一个 "Import an existing Git repository"，然后点 Get started

6

选择 GitHub 仓库

确认 GitHub 账号是否正确 → 在 Select a repository 区域选择你的网站仓库。

仓库太多可以在搜索框输入名称搜索。

7

如果找不到仓库怎么办？

页面底部会提示 "configure repository access for the Cloudflare Pages app on GitHub"，点击 Cloudflare Pages 链接：

  1. 进入 GitHub 授权设置页面
  2. 选择允许 Cloudflare Pages 访问的仓库
  3. 勾选目标仓库 → 保存
  4. 回到 Cloudflare 页面刷新，重新搜索
为什么找不到仓库？：因为 Cloudflare 还没有获得你 GitHub 仓库的访问权限。点授权链接给它权限就好了。
8

填写配置信息（不知道怎么填就问 AI）

选择仓库后会进入配置页面，需要填写几个信息。这里有英文术语，你不需要自己判断怎么填。

不要自己瞎填！：把你 GitHub 仓库地址发给 AI，AI 会告诉你每个空填什么。填错了会导致部署失败。
发给 AI 的提示词
我正在 Cloudflare Pages 上部署网站，现在需要填写配置信息。 我的 GitHub 仓库是：【填你的仓库地址】 请告诉我： 1. "Project name"（项目名称）填什么？ 2. "Production branch"（生产分支）填什么？ 3. "Build command"（构建命令）填什么？ 4. "Build output directory"（输出目录）填什么？ 5. "Environment variables"（环境变量）需要填吗？填什么？ 请一个一个告诉我，用大白话说。

AI 告诉你每个空填什么后，照着填就行。

Cloudflare Pages 选择 GitHub 仓库和配置页面

↑ 选择你的仓库后，剩下的配置不知道怎么填就把仓库地址发给 AI 让它告诉你

9

点击部署

配置完成后，点击页面底部的 Save and Deploy 按钮。

中文理解：保存并开始部署。Cloudflare 会开始自动构建你的网站。

10

等待部署完成

部署过程中会显示构建过程（一堆英文日志，看不懂没关系）。

如果部署成功，会出现成功页面，显示：

Success! Your project is deployed to Region: Earth

并展示一个网址，例如 website-deploy-sop.pages.dev。

如果部署失败了：不要慌，也不要反复点击重新部署。把构建日志里红色的报错信息复制发给 AI，让 AI 帮你找原因。
Cloudflare Pages 部署成功页面

↑ 看到这个页面就代表部署成功了！出现这个地球图和网址就对了

11

找到正式网站地址

在项目详情页 Deployments → Production 区域，可以看到你的网站地址：

https://你的项目名.pages.dev

这个地址就是正式访问地址，可以分享给任何人。

两种地址的区别：正式地址 xxx.pages.dev 是对外分享用的；还有一种带随机前缀的地址（比如 4601e4a2.xxx.pages.dev）是某次部署的预览链接，一般不用管。对外分享用正式地址。
Cloudflare Pages 部署详情页面显示正式域名

↑ 在 Deployments 页面找到 Production 区域，这里显示的就是你的正式网站地址

五、后端部署到 Cloudflare D1

这一版后端统一放在 Cloudflare：后端数据存储改用 Cloudflare D1，并通过 Pages Functions 的 Bindings 绑定到当前 Pages 项目。这样前端和后端都在 Cloudflare 体系内，部署链路更短，也不需要额外做跨平台中转。

你要完成的事：先创建一个 D1 Database，再回到当前 Pages 项目，在 Settings → Functions → Bindings 中添加 D1 database 绑定。

操作步骤

1

进入 Cloudflare 的 D1 Database

从 Cloudflare 控制台左侧进入 D1 数据库区域，准备创建后端要使用的数据库。

进入 Cloudflare 的 D1 Database

↑ 从 Cloudflare 控制台左侧进入 D1 数据库区域，准备创建后端要使用的数据库。

2

点击 Create database

在 D1 Database 页面点击创建按钮，开始新建数据库。

点击 Create database

↑ 在 D1 Database 页面点击创建按钮，开始新建数据库。

3

回到 Workers & Pages 项目列表

找到当前网站对应的 Pages 项目，后续要把 D1 数据库绑定到这个项目。

回到 Workers & Pages 项目列表

↑ 找到当前网站对应的 Pages 项目，后续要把 D1 数据库绑定到这个项目。

4

填写 D1 数据库名称

数据库名称使用项目名或业务名，位置保持 Automatic，让 Cloudflare 自动选择。

填写 D1 数据库名称

↑ 数据库名称使用项目名或业务名，位置保持 Automatic，让 Cloudflare 自动选择。

5

确认数据库创建成功

创建完成后，D1 Database 列表里会出现新的数据库记录。

确认数据库创建成功

↑ 创建完成后，D1 Database 列表里会出现新的数据库记录。

6

进入 Pages 项目的 Settings

进入网站项目后切换到 Settings，并找到 Functions 相关配置。

进入 Pages 项目的 Settings

↑ 进入网站项目后切换到 Settings，并找到 Functions 相关配置。

7

打开 Bindings 并添加绑定

在 Bindings 区域点击 Add，准备把 D1 数据库暴露给后端函数使用。

打开 Bindings 并添加绑定

↑ 在 Bindings 区域点击 Add，准备把 D1 数据库暴露给后端函数使用。

8

选择 D1 database 类型

绑定类型选择 D1 database，不要选 KV、R2 或其他存储类型。

选择 D1 database 类型

↑ 绑定类型选择 D1 database，不要选 KV、R2 或其他存储类型。

9

选择刚创建的数据库并保存

变量名填写后端代码约定的名称，数据库选择刚创建的 D1 Database，然后保存配置。

选择刚创建的数据库并保存

↑ 变量名填写后端代码约定的名称，数据库选择刚创建的 D1 Database，然后保存配置。

绑定完成后检查

检查项正确结果
D1 DatabaseCloudflare 控制台里能看到刚创建的数据库
Pages BindingPages 项目的 Functions / Bindings 里已添加 D1 database
变量名Binding 变量名必须和后端函数代码里读取的名称一致
重新部署保存配置后，重新部署或触发一次 Pages 构建
不要再使用旧的外部后端流程：如果你的后端已经迁到 Cloudflare D1，只需要完成 D1 数据库和 Pages Functions Binding 配置。

六、部署后检查事项

网站上线后，不要只看 Cloudflare 显示成功，还需要自己打开网站检查一遍。

检查清单

  1. 打开正式网站地址，确认页面能正常打开
  2. 检查首页内容是否显示正常（文字、图片有没有错位）
  3. 检查按钮、链接、图片是否能正常点击和显示
  4. 用手机打开网站地址试试（很重要！）
  5. 如果网站有搜索功能，试试搜索能不能用
  6. 如果网站有表单，试试能不能提交
最重要的一步：用手机打开网站地址试试！电脑能打开不代表手机也能打开。如果手机打不开或有错位，截图发给 AI 让它帮你调整。
如果网站有问题：不要自己猜原因。描述清楚问题（比如"首页图片不显示""搜索点了没反应"），截图或录屏发给 AI，AI 能帮你判断是哪里出了问题。

七、遇到问题怎么办

万能解决方法：不管遇到什么问题，都是同一套流程——截图或复制报错信息 → 发给 AI → AI 告诉你怎么改 → 改完重新部署。下面是一些常见问题和对应的提示词。

问题 1：在 Cloudflare 找不到 GitHub 仓库

原因：Cloudflare 没有获得你 GitHub 仓库的访问权限。

解决：点击页面底部的 Cloudflare Pages 授权链接，到 GitHub 重新勾选目标仓库授权。

问题 2：部署失败了（显示红色）

原因：可能是配置填错了、代码有问题、或者依赖文件冲突。

解决：不要反复点击重新部署！把构建日志里的红色报错信息复制发给 AI：

发给 AI 的提示词
我的网站在 Cloudflare Pages 部署失败了。 GitHub 仓库是：【填你的仓库地址】 这是报错信息： 【粘贴构建日志里红色的报错内容】 请帮我： 1. 判断是什么原因 2. 应该怎么修改 3. 修改后怎么重新部署

问题 3：部署成功但页面是空白的

原因：通常是配置里的"输出目录"填错了。

解决：把你的 GitHub 仓库地址发给 AI，问 AI "输出目录应该填什么"，然后去 Cloudflare 修改配置重新部署。

问题 4：网站能打开但搜索/功能用不了

原因：可能是 Pages Functions 没正常运行，或者 D1 Binding 变量名和代码不一致。

解决：

  1. 去 Cloudflare Pages 项目里检查 Settings → Functions → Bindings
  2. 确认 D1 database 已绑定，并且变量名和后端代码一致
  3. 保存配置后重新部署，再把浏览器报错和 Functions 日志发给 AI
发给 AI 的提示词
我的网站能打开，但后端功能用不了。 网站地址：【填你的网站地址】 D1 Binding 变量名：【填变量名】 这是浏览器里的报错信息： 【截图或描述问题】 这是 Cloudflare Functions 日志： 【粘贴日志内容】 请帮我判断是 D1 绑定问题、代码问题，还是部署配置问题，并告诉我怎么修。

问题 5：Cloudflare 显示 522 错误

原因：可能是网站还在构建中，或者构建失败了。

解决：去 Cloudflare 控制台 Deployments 页面看看构建状态。如果显示红色（失败），按问题 2 的方法处理。

问题 6：提示有安全漏洞

原因：你的项目用到了某个有安全问题的依赖包。

解决：把提示信息发给 AI，让 AI 帮你升级到安全版本并重新推送。

发给 AI 的提示词
我的网站在 Cloudflare 上提示有安全漏洞： 【粘贴提示信息或截图】 请帮我： 1. 这是什么问题 2. 怎么修复 3. 请直接帮我修好并推送到 GitHub

问题 7：Vercel 在国内打不开

原因：Vercel 在国内被墙了。

解决：改用 Cloudflare Pages 部署。这就是本 SOP 推荐用 Cloudflare 的原因。

遇到问题记住三个"不要"：不要慌、不要反复点击部署、不要自己瞎改配置。先把报错信息发给 AI，AI 帮你判断完再改。

八、给 AI 的提问模板

整个部署过程中，遇到任何不确定的地方，都可以用以下模板问 AI。记住一个原则：信息越详细，AI 回答越准。

模板 A：刚开始部署，不知道怎么填配置
我要把网站部署到 Cloudflare Pages。 GitHub 仓库地址是：【填你的仓库地址】 请你帮我判断： 1. 这个网站是什么类型的？ 2. Cloudflare 的"构建命令"填什么？ 3. "输出目录"填什么？ 4. 需要填"环境变量"吗？填什么？ 5. 如果部署失败，我先检查哪里？ 请用大白话告诉我，我完全不懂代码。
模板 B：部署/运行报错了
我在部署/使用网站时遇到了问题。 GitHub 仓库：【填你的仓库地址】 网站地址：【填你的网站地址】（如果有的话） 后端地址：【填你的后端地址】（如果有的话） 这是报错信息： 【粘贴报错日志，或描述问题】 请帮我： 1. 判断是什么原因 2. 应该怎么修改 3. 如果需要你帮忙改代码，请直接帮我改好并推送 我不懂代码，请直接帮我解决。
模板 C：网站打开了但功能不正常
我的网站已经部署到 Cloudflare 了， 地址是：【填你的网站地址】 但是遇到以下问题： 【描述问题，比如：搜索功能用不了 / 页面显示不全 / 图片不显示 / 手机上打不开】 后端地址是：【填你的后端地址】 请你帮我排查原因，告诉我应该怎么解决。 如果有截图我发给你看。
模板 D：需要 AI 直接帮你做（不想自己操作）
请帮我完成以下操作，我不懂代码，你直接帮我做好： 【描述你需要做的事，比如： - 帮我创建中转文件并推送到 GitHub - 帮我修复安全漏洞 - 帮我升级版本 - 帮我修改配置文件】 我的仓库地址是：【填你的仓库地址】 其他信息：【填 AI 需要知道的信息】
提问小技巧：给 AI 的信息越详细越好——仓库地址、报错日志、截图、你操作到哪一步了、你期望的结果是什么。信息越全，AI 回答越准。

九、后续维护

更新网站内容

如果你修改了网站代码（或让 AI 帮你改了），只需要把新代码推送到 GitHub，Cloudflare 就会自动重新部署。不需要手动操作。

怎么推送？：如果你用 AI 编程工具（如 TRAE），直接告诉 AI "帮我推送到 GitHub"就行。推送后 Cloudflare 通常 2-3 分钟后自动更新。
发给 AI 的提示词
我已经改好了网站代码，请帮我推送到 GitHub。 推送后帮我看看 Cloudflare 有没有自动开始重新构建。

查看网站状态

  • Cloudflare：控制台 → Workers & Pages → 点你的项目 → Deployments 看每次部署是否成功（绿色=成功，红色=失败）
  • Cloudflare Functions：Pages 项目 → Functions / Deployments 查看函数日志和构建状态

查看网站访问数据

Cloudflare 自带免费的数据统计功能：

  • 控制台 → 点你的项目 → Analytics 标签
  • 可以看到：访问次数、访客数量、流量来源、访问者国家分布等
不知道怎么看？：进了 Cloudflare 控制台找不到数据？截图发给 AI，告诉 AI"我想看网站访问数据"，AI 会指导你点哪里。

网站监控（可选）

推荐用 UptimeRobot（https://uptimerobot.com）免费监控网站是否在线：

  • 每 5 分钟自动检查一次你的网站能不能打开
  • 网站打不开了立刻发邮件通知你
  • 免费版支持 50 个网站监控
建议：上线后第一时间设置监控，这样网站出问题你能第一时间知道，而不是等用户反馈。

回退到旧版本

如果新版本有问题，可以回退到之前能用的版本：

  • Cloudflare：Deployments 页面 → 找到之前显示绿色的那次构建 → 点 Promote to production
找不到按钮？：截图 Cloudflare 页面发给 AI，告诉 AI "我想回退到旧版本"，AI 会指导你点哪个按钮。

十、流程总结

第一步：前端部署（必须）

  1. 登录 Cloudflare → 找到 Workers & Pages → 点 Create application
  2. 选 Pages → Get started → 选 Import an existing Git repository
  3. 连接 GitHub → 选择你的网站仓库
  4. 填写配置信息（不知道怎么填就问 AI）
  5. 点 Save and Deploy → 等待构建完成
  6. 复制 xxx.pages.dev 网站地址

第二步：后端部署（有搜索/登录等功能时需要）

  1. 进入 Cloudflare D1 Database，创建数据库
  2. 回到 Pages 项目 → Settings → Functions → Bindings
  3. 添加 D1 database 绑定，变量名和代码保持一致
  4. 保存配置后重新部署 Pages 项目

三个重要地址（记好）

名称地址格式用来干什么
网站地址https://xxx.pages.dev分享给用户访问
D1 绑定名DB 或你的代码约定名称告诉 AI，用来核对 Functions 代码
检查地址https://xxx.pages.dev/api/health验证网站功能是否正常

记住这些原则

  1. 网站部署选 Pages，不要选 Worker
  2. 找不到 GitHub 仓库，去检查授权
  3. 不知道配置怎么填，不要瞎填，问 AI
  4. 部署成功不等于网站没问题，要自己打开检查
  5. 对外分享用 xxx.pages.dev 正式地址
  6. 遇到失败，先复制报错信息问 AI，不要反复点击部署
  7. 如果 AI 也卡住了，换个 AI 工具试试，或者搜索报错信息
  8. 你不是一个人在战斗：技术的事交给 AI，你负责点击和判断