零成本搭建个人网址导航站：不买服务器、不买域名，拖上去就能用

你是不是也这样：浏览器收藏夹塞了几百条，找的时候翻半天；想给团队做个常用工具入口，又懒得折腾服务器。

这篇文章介绍一套我改造过的导航站源码——不需要买服务器，不需要买域名，连命令行都不用碰。注册两个免费账号，把文件夹拖上去，网站就上线了。

先给结论

你担心的	这套方案
要不要买服务器	不要。托管在 Cloudflare Pages，免费
要不要买域名	不要。可以用免费域名（也可以用自带的 xxx.pages.dev）
要不要装环境、敲命令	不要。全程浏览器点鼠标，文件拖上去就完事
要不要配 HTTPS 证书	不要。自动签发，免费
改内容麻不麻烦	不麻烦。有个带密码的后台，像填表格一样改，保存后线上立即生效
总共花多少钱	0 元

整套流程大概 30 分钟，其中一半时间在等域名解析生效。

这是一套什么东西

简单说，就是一个把你常用网址分类摆在一页上的网站，类似 hao123，但是你自己的。

打开首页，22 个分类、160 多个网站卡片整齐排开，左侧有分组导航，顶部能搜索，支持日间/夜间切换。

但跟纯静态导航页最大的区别是：它带一个后台。

访问 你的域名/admin.html，输入密码进去，你可以：

• 增删分类、增删网站条目
• 上传自定义图标（本地选图，不用管什么图床）
• 点上下箭头调顺序（分类、网站、大分类都能调）
• 管理”大分类”（侧边栏那些可折叠的分组）
• 改主题配色：主色、背景、卡片、文字、次要文字，每项都能取色；也有 4 套现成的（默认红 / 清爽蓝 / 护眼绿 / 夜间暗），点一下就换
• 改完点保存，线上立即生效，不用重新部署

对，不用重新部署——这是这套源码最省心的地方。

📌 配图建议：首页截图 + 后台截图各一张

为什么能做到零成本

核心是选对了托管平台。Cloudflare Pages 是 Cloudflare 提供的免费静态网站托管，它有四个特点让这件事成立：

• 免费额度对个人站绰绰有余（下面有具体数字）
• 自带全球 CDN，国内访问速度也还行
• 自动 HTTPS，证书不用管
• 支持边缘函数 Workers，这才让”没服务器也能改内容”成为可能

官方免费额度（2026 年 9 月核实）：

项目	免费额度	导航站够不够用
Pages 站点文件数	20,000 个	本站 200 多个，远远够
单个文件	25 MiB	最大的是首页 350 KB，够
Pages 构建次数	500 次 / 月	拖拽上传也算一次，够
Workers 请求	100,000 次 / 天	个人站日均几百，够
KV 存储	1 GB	站点数据才 40 KB，够
KV 读写	10 万次读 / 1000 次写（每天）	够
自定义域名	100 个 / 项目	够

一句话：这套源码在免费额度里跑，属于”根本用不完”的量级。真要超了，说明你的站已经大到该考虑付费方案了。

技术上是怎么做到”没有服务器也能改内容”的

这是我觉得最值得说清楚的一点，因为它决定了这套方案会不会伤到你的搜索流量。

传统静态站改内容，得改 HTML 文件再重新上传。要不就得搞个数据库 + 后台，那就得买服务器了。

这套方案的思路是：

浏览器请求首页 ↓ Cloudflare 边缘节点上的 _worker.js 接住请求 ↓ 从 KV（Cloudflare 的免费小数据库）里读出站点数据 ↓ 把数据填进模板，拼成完整的 HTML ↓ 返回给浏览器（也给搜索引擎爬虫）

关键点在于拼 HTML 这一步发生在服务端，不是浏览器拿到空壳再去拉数据渲染。

为什么这很重要？如果你改成”浏览器下载空页面 → JS 拉数据 → 再画出来”，那么搜索引擎爬虫抓到的是一个空壳页面，你的 160 多个网站名称一个都收录不了。导航站靠的就是搜索流量，这一刀砍下去等于白做。

现在这种做法，爬虫看到的和真人看到的完全一样，SEO 一点损失都没有。

它有什么本事

前台

• 响应式，手机电脑都能看
• 顶部搜索框，支持切换搜索引擎
• 日间 / 夜间模式
• 侧边栏分组折叠导航，点哪个滚到哪个
• 友情链接区、关于页、网址提交页
• 「一言」随机句子（顶部那句话每次刷新都不一样）

后台（这才是重点）

• 密码登录（服务端校验，不是前端糊弄)
• 分类：增、删、改名、改图标、调顺序
• 网站条目：增、删、改名称/链接/描述/图标、调顺序
• 图标上传：本地直接选图，自动存进 KV，不用另外找图床
• 大分类管理：侧边栏那些分组可以自己加、自己排序、把小分类拖进拖出
• 主题配色：主色、背景、卡片、文字颜色随便调，带 4 套预设
• 导入初始数据（一键把自带的 22 分类 164 网站读进来）
• 改完点保存，前台刷新就看到

跟其他做法比一比

方案	成本	难度	改内容	适合谁
纯手写 HTML	0（但要有地方放）	中	改代码重新传	极客
买主机装 WordPress	几百元/年起	高（装环境、备份、防黑）	后台可视化	需要博客+论坛等重功能
付费导航站 SaaS	几十~几百/年	低	后台可视化	不想折腾、要稳定
这套	0	低（拖拽部署）	后台可视化，即时生效	想零成本拥有自己的导航站

它不能做的事也说清楚：没有多用户、没有投稿审核、没有访问统计后台（想加统计可以自己插一段统计代码）。如果你的需求是”给全公司用、每个人都能提交网址”，那它不是最合适的。

关于免费域名，说几句实话

免费域名能用，但你要知道它的脾气：

• 是共享父域。你拿到的是人家大域名下的一个子域，如果同一父域下有人搞违规，可能被连带影响（我自己遇到过整个父域被限制的情况）。
• 国内访问稳定性不如自己买的、备案过的域名。
• 搜索引擎权重一般，免费域的收录权重通常不如正经顶级域。

我的建议：拿来玩、做个人工具站、练手，完全够用。如果是打算长期运营、想做流量的站点，花几块钱一年买个 .top / .xyz 之类的域名，会踏实很多。

📌 免费域名申请地址：https://my.dnshe.com/ 📌 Cloudflare：https://dash.cloudflare.com/

源码从哪来

这套源码基于 GitHub 上的开源项目 web_tool（作者 geeeeeeeeek，MIT 协议），我在它基础上做了这些改造：

• 加了可视化后台（原项目只有静态页面，改内容得改代码）
• 接入 KV 做数据存储，服务端渲染，保住 SEO
• 侧边栏分组可后台管理
• 图标上传
• 主题配色后台可调
• 清理掉了用不到的资源，整站从 28 MB 瘦到不到 9 MB

MIT 协议意味着你可以自由使用、修改、分发，包括商用，只要保留原作者署名。

网站预览：https://blds.ccwu.cc/ 【这个域名废了】

源地址预览：https://daohang-9ef.pages.dev/

下一步

想搭一个？看第二篇《手把手部署教程》，从申请免费域名到后台上线，一步步详细级说明。

如果你搭好了，欢迎在评论区把网址贴出来，我很好奇大家会把哪些网站收进去。