手把手：免费域名 + Cloudflare Pages，30 分钟上线你的导航站（含后台）

这篇是给完全不懂技术的人写的。全程不用敲命令、不用装软件、不用买任何东西。

你需要的只有：一个邮箱、能上网的电脑、半小时。

开始前，准备三样东西

要准备	去哪弄	花多少钱
Cloudflare 账号	https://dash.cloudflare.com/	免费
一个免费域名	https://my.dnshe.com/	免费
导航站源码包	（文末/评论区链接）	免费

先注册好前两个，再往下看。

💡 其实域名可以最后再弄。 Cloudflare 会自动送你一个 xxx.pages.dev 的网址，能直接用。想用自己的域名，才需要走第 1、2 步。

第 0 步：先看清楚源码包里有什么

解压后你会看到这些东西（不用全懂，知道哪些不能删就行）：

```
导航站源码/
├── index.html          ← 首页（兜底用的静态页，别删）
├── _template.html      ← 首页模板，后台改内容时套这个
├── _worker.js          ← 核心！后台和动态渲染全靠它
├── admin.html          ← 后台页面（访问 /admin.html 进入）
├── data/
│   └── seed.json       ← 初始数据：22 个分类、164 个网站
├── 404.html            ← 404 页面
├── commit.html         ← 网址提交页
├── about/              ← 关于页
└── assets/             ← 样式、脚本、图标（别动）
```

⚠️ 为什么强调文件数：Cloudflare 给的上限是 2 万个文件，但拖拽上传时文件太多容易卡住或失败。把无关文件夹清掉，上传会顺利很多。

第 1 步：申请一个免费域名

• 打开 https://my.dnshe.com/ ，点 Create one（注册账号）
• 填邮箱、用户名、密码，按提示完成验证
• 登录后，找 免费域名 / 域名注册 之类的入口
• 输入你想要的前缀（比如 my-nav），选一个可用的后缀，点申请
• 申请成功后，在「我的域名」里能看到它

记下你的完整域名，比如 my-nav.ccwu.cc。后面一直要用。

📌 这类免费域网站的界面可能会改版，菜单名字不一定完全对得上，找到「免费域名」「域名注册」这类入口就对了。

第 2 步：把域名交给 Cloudflare 托管

这一步的目的是让 Cloudflare 能管理你的域名解析，后面绑定网站才方便。

登录 https://dash.cloudflare.com/

右上角或首页找 添加站点 / Add a site

输入你刚申请的域名，点继续

选择 Free（免费） 计划

Cloudflare 会扫描 DNS，直接点继续

重点来了：它会给你两个名称服务器（NS）地址，长得像这样：

lara.ns.cloudflare.com rick.ns.cloudflare.com

把这两个地址抄下来（每个人不一样，用你自己的）

回到 my.dnshe.com，进你的域名管理页，找 DNS 服务器 / Nameserver / NS 设置

把原来的 NS 删掉，换成 Cloudflare 给你的那两个，保存

回到 Cloudflare，点「检查名称服务器」

⏰ 等生效：一般 10~30 分钟，官方说最长可能 24 小时。期间页面会显示”待处理”，别急，去喝杯茶。

💡 生效后 Cloudflare 会给你的邮箱发一封确认信。

第 3 步：创建 Pages 项目，把网站拖上去

• Cloudflare 后台左侧，点 Workers 和 Pages（有的版本叫 Workers & Pages）
• 点 创建 / Create
• 切到 Pages 标签页
• 选 上传资产 / Upload assets（不用连 Git）
• 给你的项目起个名字，比如 my-nav（这个名字会决定你的临时网址：my-nav.pages.dev）
• 把源码文件夹整个拖进去（直接拖文件夹，不用打开它）
• 点 部署 / Deploy

等一两分钟，出现”成功”就 OK 了。

现在打开 你的项目名.pages.dev 看看——网站应该已经出来了，22 个分类都在。

✅ 到这一步，你已经有一个能访问的导航站了。 ❗ 但后台还不能用，因为还差数据库和密码。继续第 4 步。

第 4 步：建一个 KV（后台用它存数据）

KV 可以理解成 Cloudflare 给你免费的一个小数据库，你的分类、网站条目都存在这里。

• Cloudflare 后台左侧 → 存储和数据库 / Storage & Databases
• 点 KV
• 点 创建命名空间 / Create a namespace
• 名字随便填，比如 nav-data，点创建

接下来把它和你的网站绑起来：

• 回到 Workers 和 Pages → 点你的项目
• 进 设置 / Settings
• 找 Functions 这一项
• 找到 KV 命名空间绑定 / KV namespace bindings，点 添加绑定
• 两栏这样填：

字段	填什么
变量名称	NAV_KV（必须一字不差，全大写）
KV 命名空间	选你刚建的那个

• 保存

❗ 变量名必须是 NAV_KV，写错了后台就找不到数据库。

第 5 步：设置后台密码

还在项目的设置页：

• 找 变量和密钥 / Variables and Secrets
• 点 添加 / Add
• 这样填：

字段	填什么
类型	选「文本」 ⚠️ 不要选「密钥」
变量名称	ADMIN_PASSWORD（全大写）
值	你想设的密码
环境	选 生产环境（Production）

• 保存

⚠️⚠️ 这里有个坑，我踩过

Cloudflare 官方文档说「密钥」和「文本」对代码来说是一样的。但实测下来，选「密钥」时密码读不进去，后台会一直提示”还没设置密码”，你输什么都没用。

一定选「文本」。

第 6 步：再上传一次（最容易漏的一步！）

绑定 KV 和设置密码之后，必须重新部署一次，否则不生效。

原因：Cloudflare 的每次部署都是一个”快照”，快照生成那一刻有什么配置，它就带什么。之后加的绑定和密码，不会自动应用给已经上线的版本。

做法：

• 回到你的 Pages 项目页
• 右上角找 创建部署 / Create deployment（有的版本是「重新部署」）
• 再次把源码文件夹拖进去，部署

这一步漏了，后面所有排查都是白费。

第 7 步：自检配置有没有生效

在浏览器地址栏输入：

https://你的域名/api/session

（用 xxx.pages.dev 也行）

会看到一行英文，像这样：

{"ok":true,"authed":false,"configured":true,"kv":true}

看后两个值：

configured	kv	说明	怎么办
true	true	✅ 全配好了	去第 8 步
false	true	密码没读到	检查第 5 步：是不是选了「密钥」？加在生产环境了吗？第 6 步重新部署了吗？
true	false	KV 没绑上	检查第 4 步变量名是不是 NAV_KV
false	false	两个都没生效	几乎肯定是第 6 步没做

这个小工具是排查神器，出问题先看它，能省掉 90% 的瞎猜。

第 8 步：进后台，导入初始数据

• 打开 https://你的域名/admin.html
• 输入你设的密码，登录
• 先点右上角的「导入初始数据」，确认弹窗
• → 这一步会把自带的 22 个分类、164 个网站读进来
• 点 「保存并发布」
• 打开首页刷新，内容应该都在

顺序别反：先导入，再保存。如果没导入就点保存，会把空数据写进去，首页会变空白（我有加拦截提示，但还是按正确顺序来）。

之后你就可以随便改了：加分类、删网站、传图标、调配色……每次改完点「保存并发布」，前台刷新就看到，不用重新部署。

第 9 步：绑定你自己的域名

• Pages 项目页 → 自定义域 / Custom domains
• 点 设置自定义域
• 输入你的免费域名（比如 my-nav.ccwu.cc）
• 点继续 → Cloudflare 会自动加好解析记录（因为域名已经交给它管了）
• 等证书签发（几分钟）

之后就能用自己的域名访问了。

验收清单

照着打勾：

• [ ] 首页能打开，22 个分类都在
• [ ] 左侧边栏是分组菜单，点分类能滚过去
• [ ] 点「友情链接」也能滚过去
• [ ] 搜索框能用
• [ ] 日间/夜间切换正常
• [ ] /admin.html 能输密码进去
• [ ] 后台能改一个分类名 → 保存 → 前台立刻看到变化
• [ ] 后台能上传一个图标 → 前台显示新图标
• [ ] /api/session 显示 configured:true, kv:true

出问题了怎么办

现象	大概率原因	怎么修
后台一直说”还没设置密码”	密码变量没读到	看 /api/session。类型改「文本」、加在生产环境、重新部署
/api/session 两个都 false	没重新部署	第 6 步，再拖一次文件夹
首页空白	没导入就点了保存	进后台 → 导入初始数据 → 保存
图标全变成破图	default.webp 没传上去	检查 assets/images/logos/ 里有没有这个文件
样式全丢、页面很丑	文件没传全	重新拖一次完整文件夹
上传失败 / 一直转圈	文件太多或太大	删掉 _scan、_backup、.workbuddy 再传
域名打不开	NS 还没生效	等，最长 24 小时
后台改了前台不变	浏览器缓存	Ctrl+F5 强制刷新，或用无痕窗口

想退回纯静态版？

如果哪天你不想要后台了，把 _worker.js 这个文件删掉，重新上传一次，网站立刻变回原来的纯静态站，首页照常显示。

这是这套方案最大的安全垫：它不会把你的站锁死。

日常怎么用

你要做什么	要不要重新部署
加/删/改网站、分类、图标、配色	不用，后台保存即可
改模板结构、改 CSS 样式、换 JS	要，改完重新拖一次
改后台密码	要（改完环境变量需重新部署）

几个提醒

• 密码别和其他地方重复。它存在 Cloudflare 里是明文文本类型（”密钥”类型虽然加密但实测注入不了）。你的 Cloudflare 账号本身有登录保护，问题不大，但养成好习惯。
• 免费域有连带风险（共享父域），长期运营建议买个便宜域名。
• 记得备份：把 data/seed.json 存一份（这是原始的 22 分类 164 网站数据）。如果你在后台加了很多内容想导出，目前后台没有导出按钮，可以去 Cloudflare 的 KV 命名空间里手动查看 site:data 这个键的值，复制出来存好。
• 别把工作文件夹传上去：_scan、_backup、.workbuddy 每次部署前都检查一下。

祝你搭得顺利。搭好了欢迎把网址贴出来，我想看看大家的导航站都长什么样。