告别书签混乱！优雅的搭建个导航网站且完全免费

你是否也曾面临这样的困境？浏览器书签塞满了上百个链接，每次找资源都要翻半天；收藏的好工具越来越多，却总是在需要时想不起来用；团队协作时，成员各自为战，优质资源无法共享…

通过一个软件工具可以将精心收集的导航页面优雅展开——常用工具、项目文档、团队资源、学习网站，所有内容分门别类、一目了然。无论是个人使用还是团队协作，一切都变得井然有序。

今天，这个实用案例用NavSphere + Cloudflare Pages搭建。只需30分钟，你就能零成本搭建一个堪比iTab、Start.me的个人导航站，而且完全掌握在自己手中！最棒的是，你不需要花一分钱，就能获得一个功能完备、响应迅速的专业导航网站。整个过程不需要一行服务器代码，甚至连域名费用都能省掉！

导航网站效果

前端页面截图

管理后台截图

搭建操作步骤

① 准备材料

自定义域名（已备案或未备案均可）
GitHub 账号（用来 fork 源码）
Cloudflare 账号（用来部署管理）

② Fork克隆代码仓库

打开GitHub NavSphere代码仓库，点击Fork
设置仓库名(Repository name=NavSite)，点击Create Fork创建自己的代码仓库

③ 部署到 Cloudflare Pages

登录 Cloudflare → Workers 和 Pages → 添加→ 点击页面
选择”导入现有 Git 存储库”→ 点击开始使用
选择存储库=NavSite，点击开始设置
如果未显示您的存储库，请在 GitHub 上为 Cloudflare Pages 应用配置存储库访问权限。
项目名称=navsite、生产分支=main、框架预设=Next.js、构建命令=npx @cloudflare/next-on-pages@1、构建输出目录=.vercel/output/static，点击保存并部署
Cloudflare Pages 将开始构建你的项目，并将其部署到 Cloudflare 的 CDN，等待2～3分钟后，显示成功，前端即可用域名访问了。

④ 修改参数配置

配置GitHub
1. 访问 GitHub Developer Settings，点击New OAuth App
2. 点击Register application
3. 点击Generate a new client secret，复制保存Client ID 和 Client Secret
  “Client ID”=Ov23liw3E6NpplO8X5b6
  “Client Secret”=99670666182c7bbb69e1bba32d68aa99c537dc70
配置wrangler
配置文件如果不正确，会导致登录后台看不到数据
1. 打开wrangler.toml，文件修改配置如下，点击Commit changes
  [env.production.vars]
  GITHUB_CLIENT_ID = "Ov23liw3E6NpplO8X5b6"
  GITHUB_OWNER = "chinapmcc"
  GITHUB_REPO = "NavSite"
  GITHUB_BRANCH = "main"
  NEXTAUTH_URL = "https://nav.chinapmcc.com/api/auth"
  NEXT_PUBLIC_API_URL="https://nav.chinapmcc.com"
2. 在Cloudflare Pages 的项目设置 → 变量与机密 → 点击”添加”。将GitHub OAuth App 的 Client Secret值粘帖并保存，重新部署。
  类型选择=密钥
  变量名称=GITHUB_SECRET
  值=上述的Client Secret值
3. 打开管理后台链接(域名后加/admin)：https://nav.chinapmcc.com/admin
4. 成功登录后台并分类管理导航网站。

⑤ 使用自定义域名

为避免pages.dev的域名无法访问，我们可以使用CF托管的自定义域名。

点击“自定义域” → “设置自定义域”
填写域=nav，点击继续，会自动生成DNS CNAME 记录。
激活域，即可使用自定义域名进行访问：nav.chinapmcc.com

进阶玩法

自定义配置

可以通过配置文件来修改页面的信息，提交后会自动部署页面，修改参考如下所示：

后台登录页=app/auth/signin/page.tsx
后台左上信息=app/admin/AdminLayoutClient.tsx
右上联系信息=components/navigation-content.tsx
浏览器打开页面的抬头名称=app/admin/layout.tsx
浏览器打开页面的抬头后缀=app/layout.tsx

数据文件

• navigation.json：导航数据就是你的书签、分组、顺序。
• site.json：站点的一些全局配置。
• resources.json：可选的扩展资源配置。

常见问题

Q：调整分类时，没有批量移动网站分类的功能，二次分类困难。
- A：本地做好分类，然后删除旧分类，再新增分类。
Q：每次修改需重新部署，导致大量队列排队，无法及时预览。
- A：关闭自动部署，完全手动预览
  Cloudflare Pages → Settings → Build & Deploy → 关闭 “Automatic deployments”。
  日常仍可向 main 反复 commit，Pages 不会再自动构建。想发布时，进入同一页面点击 “Deploy new version” → 选择最新 commit 即可；或者把步骤 1 重新打开，再 push 一次触发。