格纸生成器 · Cloudflare Pages 部署教程-Baili Blog

这是一份面向新手的、照着点就能上线的教程。全程免费，不需要懂命令行也能完成（方式一）。

零、部署前先搞清楚三件事
一、方式一：网页拖拽上传（推荐，3 分钟搞定）
二、方式二：Wrangler 命令行（适合以后反复更新）
三、方式三：连接 Git 仓库（改代码自动上线）
四、部署后必做的验证清单
五、绑定自己的域名
六、以后怎么更新网站
七、常见问题排查
八、重要提醒：国内访问问题
九、加分项（可选）

零、部署前先搞清楚三件事

1. 这个项目是纯静态的

没有数据库、没有 PHP、没有 Node 服务。就是一堆 HTML / CSS / JS / 图片。任何静态托管都能跑，Cloudflare Pages 只是其中一个选择（免费、快、全球 CDN）。

2. 没有构建步骤

不用 npm install，不用 npm run build。上传什么文件，线上就是什么文件。这是它最大的优点之一。

3. 需要上传的文件清单

✅ 必须上传（共 6 项）

index.html              主生成器页面
guide.html              使用指南
about.html              关于我们
privacy.html            隐私政策
terms.html              使用条款
assets/                 整个文件夹（内含 19 个文件：14 个 js + 1 个 css + 4张图）

⚠️ 可选上传

README.md               项目说明，传上去不占事，不传也完全不影响运行

❌ 不要上传

.dev-test/              本地自动化测试脚本，跟网站运行无关
.日志/             工作日志目录

上传时不小心多传了也不会让网站崩溃，只是冗余。.dev-test 里可能有几 MB 的测试截图，建议别传。

你的文件夹应该长这样（和下面一致的目录结构，务必保持 assets 这个名字不变）：

你要上传的内容/
├── index.html
├── guide.html
├── about.html
├── privacy.html
├── terms.html
└── assets/
    ├── css/
    │   └── style.css
    ├── img/
    │   ├── favicon.png
    │   ├── favicon-180.png
    │   ├── logo.jpg
    │   └── wechat-qr.jpg
    └── js/
        ├── app.js
        ├── core/      (4 个 js)
        ├── export/    (1 个 js)
        └── render/    (含 patterns/ 5 个

一、方式一：网页拖拽上传（推荐，3 分钟搞定）

第 1 步：注册 / 登录 Cloudflare

打开 https://dash.cloudflare.com，没账号就注册一个（免费，邮箱即可，不需要信用卡）。

登录进来默认是中文界面，菜单名称以下面为准。

第 2 步：进入 Pages

左侧菜单找到 「Workers 和 Pages」（或在顶部搜索框直接搜 Pages），点进去。

然后点 「创建」 按钮（右上角蓝色按钮）。

第 3 步：选择 Pages 标签

创建页面有三个标签页，选 「Pages」 这个标签。

第 4 步：选择「上传资产」

你会看到两个选项：

「连接到 Git」 ← 这个是方式三，先不选
「上传资产」 ← ✅ 点这个

第 5 步：给项目起名字

输入框里填项目名，比如填 gezhi。

⚠️ 这个名字会成为你网址的一部分，只能用小写英文字母、数字、连字符。不能填中文。最终网址类似：https://gezhi-xxx.pages.dev

第 6 步：拖文件进去

页面上会出现一个虚线框，写着「将文件拖到此处」之类的提示。

操作：打开你存放源码的文件夹 → 全选需要上传的内容（5 个 html + assets 文件夹）→ 一起拖进虚线框。

💡 小技巧：可以一次性拖整个文件夹进去，Cloudflare 会自动识别里面的子文件夹结构。但注意别把 .dev-test 和 .日志 也带上了——建议先把要传的 6 项复制到桌面的一个新文件夹里，再从那个文件夹全选拖进去，最保险。

⚠️ Windows 拖拽的坑：如果拖不动，点虚线框里的「浏览」/「选择文件」按钮手动选也可以。

等待文件扫描（大概几秒到几十秒），页面会列出识别到的文件数量和总大小。确认是几千 KB 以内，如果几十 MB 说明把测试文件也拖进去了，退回去重来。

第 7 步：点「部署」

点右下角的 「部署」 按钮。

Cloudflare 会开始处理，通常 10~60 秒完成。屏幕上会出现撒花动画，并显示你的网址。

第 8 步：打开网址

点击显示的 https://gezhi-xxx.pages.dev 打开。

到这里，你的网站就上线了。 🎉

接下来建议去做第四章的验证清单。

二、方式二：Wrangler 命令行（适合以后反复更新）

如果你以后会经常更新文件，命令行比每次拖拽方便得多。

第 1 步：安装 Node.js

访问 https://nodejs.org，下载左侧的 LTS 版本（长期支持版），一路点「下一步」安装。

装完验证：按 Win + R，输入 cmd 回车，然后输入：

node -v

能显示出版本号（比如 v22.22.2）就说明装好了。

第 2 步：安装 Wrangler

在刚才的黑窗口里输入（一行一行来）：

npm install -g wrangler

等待安装完成（可能需要两三分钟，期间不要关窗口）。

第 3 步：登录 Cloudflare

wrangler login

它会自动打开浏览器让你登录并授权，点「允许」即可。命令行窗口会显示登录成功。

第 4 步：部署

进入你的项目文件夹。假设你的源码在 D:\资料\gezhi，那么在命令行里输入：

cd /d "D:\资料\gezhi"
wrangler pages deploy . --project-name=gezh

⚠️ 注意：这个命令会把当前目录里的所有文件都传上去，包括 .dev-test 里的测试脚本。如果想避免，先在本项目根目录创建一个叫 .pagesignore 的文本文件，内容是：
.dev-test/
.日志/
保存后再执行部署命令，Wrangler 会自动跳过这些。

第一次部署会问你要不要用 gezhi 作为项目名，输入 y 回车。之后同样会返回一个网址。

以后怎么更新

改完文件后，同一条命令再跑一次即可：

三、方式三：连接 Git 仓库（改代码自动上线）

适合把源码托管在 GitHub / GitLab 上的情况。好处是：以后只要 git push，网站自动更新，不用管部署。

步骤：

在 GitHub 上新建一个仓库，把源码推送上去
- 建议先加个 .gitignore，排除 .dev-test/ 和 .workbuddy/
回到 Cloudflare → Workers 和 Pages → 创建 → Pages → 连接到 Git
授权 Cloudflare 访问你的 GitHub，选择刚才那个仓库
构建配置这样填：

配置项	填什么
生产分支	`main`（或你的主分支名）
框架预设	无（不要选 Next.js / Vite 之类）
构建命令	留空
构建输出目录	`/`（一个斜杠，代表根目录）

5.点「保存并部署」

❗ 最容易出错的就是「构建输出目录」。这个项目没有 dist 文件夹，输出目录必须填 / 根目录，填 dist 或 build 会 404。

四、部署后必做的验证清单

网站上线后，请逐项确认（很重要，别省这一步）：

首页能打开（不是 404）
浏览器标签页的图标是你那个红色 logo（不是默认文件图标）
- 如果还是旧图标：Ctrl + F5 强刷，或者关掉标签页重新打开
预览区能看到一张纸（不是空白）
左侧切换几种纸型，预览跟着变 —— 重点试试「拼音田字格」和「米字格」
点 「导出 PDF」，能下载到文件，大小在几 KB 到几十 KB
点 「导出 PNG」 和 「导出 SVG」 都正常
鼠标移到页脚的 「微信公众号」 上，二维码能弹出来
点 「关于我们」 页面，能看到直接显示的二维码
用手机浏览器打开一次，看排版有没有乱

全部打勾就可以发朋友圈了。

五、绑定自己的域名

xxx.pages.dev 能用，但绑定自己的域名更体面，也更利于传播（而且见第八章的访问提醒）。

情况 A：域名 DNS 托管在 Cloudflare（最省事）

打开你的 Pages 项目 → 顶部 「自定义域」 标签 → 点 「设置自定义域」
输入你的域名，比如 gezhi.bailir.top，点继续
Cloudflare 会自动帮你加好 DNS 记录和 SSL 证书，什么都不用管
等几分钟（证书签发需要时间），就能用新域名访问了

情况 B：域名 DNS 在其他服务商（阿里云、腾讯云等）

Cloudflare 无法自动改你的 DNS，需要你自己加一条记录：

Pages 项目 → 自定义域 → 输入你的域名
Cloudflare 会告诉你该加什么记录，通常是：类型：CNAME 名称：gezhi值：你的项目名.pages.dev
去你的域名服务商后台添加这条 CNAME 记录
回到 Cloudflare 等它验证（DNS 生效需要 10 分钟到几小时不等）

💡 建议用二级域名（比如 gezhi.bailir.top）而不是根域名，因为根域名通常不支持 CNAME。

⚠️ 国内服务器上的域名请注意备案问题：绑定到 Cloudflare 属于境外解析加速，如果域名本身已在内地备案、且源站也在内地，理论上要保持合规。你自己的站点按现有情况处理即可。

六、以后怎么更新网站

拖拽上传方式：Pages 项目页 → 顶部「部署」标签 → 右上角「创建部署」→ 选择「上传资产」→ 重新拖一次完整文件

⚠️ 拖拽上传是全量覆盖，每次都要传完整的一套文件，不能只传改动的那一个。

命令行方式：改完文件后重新执行同一条命令即可：

wrangler pages deploy . --project-name=gezhi

Git 方式：git push 即可，自动部署

回滚到上一个版本

Pages 项目 → 「部署」 标签 → 会列出历史部署记录 → 找到想回到的那次 → 点右边三个点 → 「回滚到此版本」

这是 Pages 很好用的一个功能，改坏了能一键退回。

七、常见问题排查

Q1：打开是 404

99% 是 Git 方式部署时「构建输出目录」填错了。改成 / 再部署一次。

Q2：页面能开但样式全没了，就是一堆文字

assets 文件夹没传上去，或者传上去时目录结构变了。检查线上是否能访问到 https://你的域名/assets/css/style.css。

Q3：logo 和二维码显示为破图

同上，assets/img/ 没传上去。注意 img 文件夹里应该有 4 张图：logo.jpg、wechat-qr.jpg、favicon.png、favicon-180.png。

Q4：标签页图标还是浏览器的默认图标

浏览器缓存。按 Ctrl + F5，或关掉标签页重开。别人第一次访问都是新图标，不影响。

Q5：导出 PDF 没反应

右下角会弹出成功提示，浏览器会正常下载文件。如果完全没动静：先换 Chrome 或 Edge 试试（IE 内核浏览器不支持）；还不行就按 F12 打开 Console，把红色报错截图反馈给我。

Q6：手机上看排版乱了

本项目做了响应式布局。如果某处确实溢出，告诉我具体页面，我一处一处改。

Q7：Pages 免费额度够用吗

绰绰有余。免费版包含：每月 500 次构建、无限请求数、无限带宽（Pages 的静态文件流量不收费）。个人工具站一辈子用不完。真正的限制是单个文件不能超过 25MB，我们最大的文件几十 KB。

Q8：能绑定多个域名吗

可以。同一个 Pages 项目能绑很多域名，也都自动配 SSL 证书。

八、重要提醒：国内访问问题

这一条必须提前说清楚，免得你部署完才发现。

xxx.pages.dev 这个域名在国内访问不稳定。

原因是 Cloudflare 的 IP 在国内经常被干扰，部分地区会出现：

打不开 / 连接超时
TLS 握手失败
时好时坏

这是基础设施层面的问题，跟你的网站代码无关。

应对办法：

绑定自己的域名（第五章）。实测不少自建域名比 pages.dev 稳得多，因为你可以在 DNS 层面做选择。
如果绑定后依然不满意，可以考虑换回国内托管的方案：
- 腾讯云静态网站托管（你本来就有腾讯云服务器）
- 或者干脆丢到你自己那台腾讯云服务器上，Nginx 加一条虚拟主机指向这个目录即可——这个工具是纯静态的，随便一个 Nginx 就能跑。

如果你打算主要面向国内用户，我建议：先绑自己的域名试一周，统计下访问情况再决定要不要换。

九、加分项（可选）

网站上线后想让它更容易被搜到，可以再做两件小事（各一分钟）：

1. 加 robots.txt

在项目根目录放一个 robots.txt，内容：

User-agent: *
Allow: /
Disallow: /*?

Sitemap: https://你的域名/sitemap.xml

2. 加 sitemap.xml

本项目一共 5 个页面，手工写一份就够了：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://你的域名/</loc><priority>1.0</priority></url>
  <url><loc>https://你的域名/guide.html</loc><priority>0.8</priority></url>
  <url><loc>https://你的域名/about.html</loc><priority>0.6</priority></url>
  <url><loc>https://你的域名/privacy.html</loc><priority>0.4</priority></url>
  <url><loc>https://你的域名/terms.html</loc><priority>0.4</priority></url>
</urlset>

改完重新上传这两个文件即可。然后去百度搜索资源平台、Google Search Console 提交一下。

一句话总结

最省事的路线：Cloudflare → Workers 和 Pages → 创建 → Pages → 上传资产 → 拖进去 → 部署。

有问题随时反馈。

本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。

如果用于其他用途，请购买正版支持作者，谢谢！若您认为「Baili Blog」发布的内容若侵犯到您的权益，请联系站长邮箱：b71239135@gmail.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。

THE END