直到最近发现了 NavSphere 这个开源项目，让我眼前一亮。
NavSphere简介
简单来说，NavSphere 就是一个专门用来管理网址导航的工具。不过和那些传统的书签管理器不同，它有个很酷的特点——把你的导航数据直接存在 GitHub 上。
这意味着什么呢？就是你的所有网址收藏，都能像管理代码一样管理，有版本控制，团队协作，还永远不怕丢数据。对于我们这些天天跟 Git 打交道的人来说，这个思路真的很棒。
使用体验
技术栈很舒服** 用的都是现在最流行的技术：Next.js 14、React 18、TypeScript、Tailwind CSS。作为开发者，看到这个技术栈就很有亲切感，想要自己改点什么功能也完全没压力。
登录超简单 直接用 GitHub 账号登录，不用再记什么用户名密码，这点很贴心。而且既然数据都放 GitHub 上，用 GitHub 账号登录也很自然。
数据管理很放心 最喜欢的就是这个数据存储方式。所有的导航数据都在你自己的 GitHub 仓库里，想公开就公开，想私有就私有。而且有版本记录，谁改了什么都能看到，团队协作也不怕乱。
界面体验不错 支持明暗两种主题，看着挺舒服的。拖拽排序功能也很实用，比直接改 JSON 文件方便多了。搜索功能也挺智能，网址多了也不怕找不到。
部署挺容易 推荐用 Cloudflare Pages 部署，全球 CDN 加速，访问速度很快。当然你也可以用 Vercel 或者 Netlify，都是常见的部署平台。
快速上手
只需要准备以下几个东西：
-
Node.js 18+
-
GitHub 账号
-
安装 pnpm（或者 npm/yarn）
然后照着下面操作：
git clone https://github.com/tianyaxiang/NavSphere.git
cd NavSphere
pnpm install
cp .env.example .env.local
pnpm dev
浏览器打开 http://localhost:3000 就能看到一个本地可用的导航系统了。
配置和部署
去 GitHub Developer Settings
GitHub Developer Settings：https://github.com/settings/developers
点击 "New OAuth App"建一个 OAuth App
填写应用信息：
Application name: navsphere-demo (你可以自定义)
Homepage URL: https://navsphere-demo.pages.dev (你可以自定义,来源于 Cloudflare Pages 的域名)
Application description: NavSphere Demo Application
Authorization callback URL: https://navsphere-demo.pages.dev/api/auth/callback/github （你可以自定义,来源于 Cloudflare Pages 的域名）
点击 Generate a new client secret。拿到 Client ID 和 Client Secret。
在 OAuth App 页面，你可以看到 "Client ID" 和 "Client Secret"。这两个值是你后续配置 Cloudflare Pages 时需要用到的。保存好这两个值。下面要用到
修改项目中的配置文件wrangler.toml
打开 wrangler.toml 文件，找到以下配置项：
[env.production.vars]
GITHUB_ID = "Ov23lix1Mr0FRgjQy3Bg" # 你的 GitHub OAuth App 的 Client ID
GITHUB_OWNER = "fanmochen" # 你的 GitHub 用户名
GITHUB_REPO = "navsphere-demo" # 你的 GitHub 仓库名
GITHUB_BRANCH = "main" # 你的 GitHub 分支名
NEXTAUTH_URL = "https://navsphere-demo.pages.dev/api/auth" # Cloudflare Pages 的域名（或者你自定义的域名）加/api/auth
NEXT_PUBLIC_API_URL="https://navsphere-demo.pages.dev/" # Cloudflare Pages 的域名（或者你自定义的域名）
部署推荐 Cloudflare Pages，不仅快，而且免费额度对个人和小团队已经足够用。
也支持 Vercel、Netlify、Railway，选你熟的就行。
数据结构非常清晰，想改也很方便
主要的数据文件就三个：
-
navigation.json：书签和分组结构 -
site.json：全局设置 -
resources.json：额外资源，可选
你可以直接改 JSON 文件，也可以用它自带的前端界面进行拖拽操作。
要二开的话，它也集成了不少好用的库，比如：
-
Radix UI（无障碍组件）
-
Lucide React（图标库）
-
React Query、React Hook Form、Zod 等
项目结构清晰，app/ 和 components/ 下就是页面和组件，Tailwind 改样式也方便，整体非常适合自定义。
总结
NavSphere 简洁小巧，功能齐全。虽然市面上书签管理工具不少，但能把数据用 Git 管理的确实不多见。
如果你也经常被书签管理困扰，或者正在给团队找一个好用的导航解决方案，建议试试 NavSphere。开源、免费、技术栈主流，即使后续想自己改功能也很方便。
最重要的是，数据在自己手里，这种掌控感真的很棒。
在线体验：https://dh.leti.ltd/
GitHub 项目地址：https://github.com/tianyaxiang/NavSphere