CF‑Navs 保姆级部署教程(Cloudflare Pages+KV 个人导航站)

CF‑Navs:免费部署在 Cloudflare 上的私人导航页,不需要服务器,数据存在 KV,支持后台密码管理、书签分类、深色模式、备份导入,个人自用导航首选。

📋前置准备

  1. Cloudflare 账号(免费版够用)
  2. GitHub 账号 3.(可选)自己域名(例如你 t128.com二级域名绑定导航)

一、Fork 源码到自己 GitHub

  1. 打开 CF‑Navs 开源仓库(搜索 CF‑Navs github)
  2. 右上角点 Fork,复制一份仓库到你自己 GitHub 账号,不要修改仓库名称

二、创建 Cloudflare Pages 项目

  1. 登录 Cloudflare 控制台 →左侧菜单 Workers 和 Pages创建应用程序Pages导入现有存储库
  2. 点击连接 GitHub,授权 Cloudflare 访问你的 GitHub,选择刚刚 Fork 好的 CF‑Navs仓库 →开始设置
  3. 构建配置(直接照抄)
  • 项目名称:自定义(例如 my‑navs)
  • 生产分支:main
  • 框架预设:
  • 构建命令:npm run build
  • 构建输出目录:/dist
  1. 点击保存并部署,第一次构建会失败,属于正常现象,先放着,去创建 KV 数据库。

三、新建 KV 命名空间(用来存你的书签数据)

  1. 左侧:Workers 和 Pages →KV创建命名空间
  2. 命名空间名称:NAVS_DB(严格一模一样,大小写不能错)→创建
  3. 复制好这个 KV 命名空间,等下绑定到 Pages 项目。

四、Pages 项目绑定 KV + 设置管理员密码

  1. 回到你刚创建 Pages 项目 →设置函数KV 命名空间绑定添加绑定
    1. 变量名称:NAVS_KV(必须严格)
    2. KV 命名空间:选择刚刚建好 NAVS_DB →保存
  2. 切换到环境变量和机密添加变量(机密)
    1. 变量名:PASSWORD
    2. 值:你自己设置后台登录密码(记住这个密码,进入管理后台用)
    3. 勾选加密 →保存部署
可选环境变量 SITE_TITLE:导航站首页标题 SITE_DESC:站点副标题

五、重新部署生效

回到部署标签页 →创建新部署,直接部署,等待 2‑3 分钟,状态显示成功。 部署成功后会生成一个默认地址:xxx.pages.dev,访问就是你的导航首页。

六、进入后台管理、添加书签

  1. 打开导航首页,页面右下角浮动按钮【管理】
  2. 输入你设置的PASSWORD密码,回车进入编辑模式
  3. 操作:
  • 新增分类、修改分类图标
  • 点虚线【新增】卡片添加网站,自动抓取网站图标
  • 书签可以设为私密(仅管理模式可见)
  • 全部改完点右下角【保存】,数据保存到云端 KV,换设备也能用

七、绑定你自己域名(例如 nav.t128.com

  1. Pages 项目 →自定义域设置自定义域,填入二级域名 nav.t128.com
  2. Cloudflare 会给出一条 CNAME 记录值
  3. 到你域名 t128.com的 DNS 解析面板,添加记录:
    1. 类型:CNAME
    2. 主机:nav
    3. 目标:填 Pages 给出的 cname 地址
    4. 代理状态:橙色云朵(CF 代理打开)
  4. 返回 Pages,等待证书验证完成(一般几分钟,最多 1 小时),之后就可以用自己域名打开导航站。

⚠️常见问题排查

  1. 部署失败:检查构建命令、输出目录是否填对;确认 fork 源码完整
  2. 进不去管理后台:核对环境变量PASSWORD,变量类型选机密
  3. 保存提示失败:KV 绑定变量名必须是NAVS_KV,名称不能错
  4. 域名打不开:DNS 解析是否生效、代理是否开启、证书是否颁发成功

💡额外功能

  • 书签导入:支持浏览器导出 HTML 书签批量导入
  • 数据备份:后台可以导出全部导航配置 json 备份
  • 深色 / 浅色主题一键切换、移动端自适应
© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容