CF‑Navs:免费部署在 Cloudflare 上的私人导航页,不需要服务器,数据存在 KV,支持后台密码管理、书签分类、深色模式、备份导入,个人自用导航首选。
📋前置准备
-
Cloudflare 账号(免费版够用)
-
GitHub 账号 3.(可选)自己域名(例如你
t128.com二级域名绑定导航)
一、Fork 源码到自己 GitHub
-
打开 CF‑Navs 开源仓库(搜索 CF‑Navs github)
-
右上角点 Fork,复制一份仓库到你自己 GitHub 账号,不要修改仓库名称。
二、创建 Cloudflare Pages 项目
-
登录 Cloudflare 控制台 →左侧菜单 Workers 和 Pages →创建应用程序 →Pages →导入现有存储库
-
点击连接 GitHub,授权 Cloudflare 访问你的 GitHub,选择刚刚 Fork 好的
CF‑Navs仓库 →开始设置 -
构建配置(直接照抄)
-
项目名称:自定义(例如 my‑navs)
-
生产分支:
main -
框架预设:无
-
构建命令:
npm run build -
构建输出目录:
/dist
-
点击保存并部署,第一次构建会失败,属于正常现象,先放着,去创建 KV 数据库。
![图片[1]-CF‑Navs 保姆级部署教程(Cloudflare Pages+KV 个人导航站)-57技术坊](https://www.57tf.com/wp-content/uploads/2026/08/20260821010737785-1787244976493-566x540.png)
三、新建 KV 命名空间(用来存你的书签数据)
-
左侧:Workers 和 Pages →KV →创建命名空间
-
命名空间名称:
NAVS_DB(严格一模一样,大小写不能错)→创建 -
复制好这个 KV 命名空间,等下绑定到 Pages 项目。
![图片[2]-CF‑Navs 保姆级部署教程(Cloudflare Pages+KV 个人导航站)-57技术坊](https://www.57tf.com/wp-content/uploads/2026/08/20260821010754459-1787245057517-800x333.png)
四、Pages 项目绑定 KV + 设置管理员密码
-
回到你刚创建 Pages 项目 →设置 →函数 →KV 命名空间绑定 →添加绑定
-
变量名称:
NAVS_KV(必须严格) -
KV 命名空间:选择刚刚建好
NAVS_DB→保存
-
-
切换到环境变量和机密 →添加变量(机密)
-
变量名:
PASSWORD -
值:你自己设置后台登录密码(记住这个密码,进入管理后台用)
-
勾选加密 →保存部署
-
可选环境变量SITE_TITLE:导航站首页标题SITE_DESC:站点副标题
五、重新部署生效
回到部署标签页 →创建新部署,直接部署,等待 2‑3 分钟,状态显示成功。 部署成功后会生成一个默认地址:
xxx.pages.dev,访问就是你的导航首页。六、进入后台管理、添加书签
-
打开导航首页,页面右下角浮动按钮【管理】
-
输入你设置的
PASSWORD密码,回车进入编辑模式 -
操作:
-
新增分类、修改分类图标
-
点虚线【新增】卡片添加网站,自动抓取网站图标
-
书签可以设为私密(仅管理模式可见)
-
全部改完点右下角【保存】,数据保存到云端 KV,换设备也能用
七、绑定你自己域名(例如 nav.t128.com)
-
Pages 项目 →自定义域 →设置自定义域,填入二级域名
nav.t128.com -
Cloudflare 会给出一条 CNAME 记录值
-
到你域名
t128.com的 DNS 解析面板,添加记录:-
类型:
CNAME -
主机:
nav -
目标:填 Pages 给出的 cname 地址
-
代理状态:橙色云朵(CF 代理打开)
-
-
返回 Pages,等待证书验证完成(一般几分钟,最多 1 小时),之后就可以用自己域名打开导航站。
⚠️常见问题排查
-
部署失败:检查构建命令、输出目录是否填对;确认 fork 源码完整
-
进不去管理后台:核对环境变量
PASSWORD,变量类型选机密 -
保存提示失败:KV 绑定变量名必须是
NAVS_KV,名称不能错 -
域名打不开:DNS 解析是否生效、代理是否开启、证书是否颁发成功
💡额外功能
-
书签导入:支持浏览器导出 HTML 书签批量导入
-
数据备份:后台可以导出全部导航配置 json 备份
-
深色 / 浅色主题一键切换、移动端自适应
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END


















暂无评论内容