🚀 手把手教你搭建属于自己的导航页（使用 Cloudflare Pages）

你是否想要一个干净、私密、完全由自己掌控的浏览器导航页？不再依赖第三方插件，也不担心数据泄露？本文将带你从零开始，利用 GitHub 上的开源项目 Simple-Nav-Page 和 Cloudflare Pages 免费服务，搭建一个功能齐全、支持后台管理的个人导航页。

👉 先看效果：https://jyy7998.cf/

📦 准备工作

在开始之前，请确认你拥有以下账号：

• GitHub 账号（用于托管代码和存储数据）
• Cloudflare 账号（用于部署网页）

如果还没有，请先去注册（免费）。

🔧 第一步：Fork 项目源码

打开浏览器，访问项目仓库：
https://github.com/xmynscnq/Simple-Nav-Page

1. 点击页面右上角的 “Fork” 按钮。
2. 在弹出窗口中，确保 Owner 是你自己的 GitHub 用户名，然后点击 “Create fork”。
3. 等待几秒钟，项目就会复制到你的 GitHub 账户下，地址类似 https://github.com/你的用户名/Simple-Nav-Page。

☁️ 第二步：部署到 Cloudflare Pages

1. 登录 Cloudflare 控制台（https://dash.cloudflare.com）。
2. 在左侧菜单中找到 “计算” 分类，点击 “Workers 和 Pages”。
3. 点击右侧的 “创建应用程序” 按钮。
4. 在弹出的页面中，务必选择上方的“Pages”选项卡，然后点击 “连接到 Git” 下的 GitHub 图标。
5. 如果是首次使用，会要求授权 Cloudflare 访问你的 GitHub 账号，按提示点击 “授权”。
6. 授权后，会列出你的所有仓库，从列表中找到并选中你刚才 Fork 的 “Simple-Nav-Page” 仓库。
7. 点击 “开始设置”。

⚙️ 构建设置（关键）

在构建设置页面，请按下表填写：

• 项目名称：随意填，比如 my-nav，它会生成 my-nav.pages.dev 的访问地址。
• 生产分支：保持默认 main。
• 框架预设：选择 “无”（该项目为纯静态 HTML）。
• 构建命令：留空（不要填任何内容）。
• 构建输出目录：留空（不要填任何内容）。

确认无误后，点击 “保存并部署”。

🔐 第三步：生成 GitHub Token（用于后台管理）

为了能够通过网页后台管理链接，我们需要生成一个具有仓库读写权限的 Token。

1. 登录 GitHub，点击右上角头像 → Settings。
2. 在左侧菜单最下方，找到 Developer settings。
3. 点击 Personal access tokens → Fine-grained tokens。
4. 点击 Generate new token。
5. 填写信息：
   • Token name：随意起名，如 nav-token。
   • Expiration：建议选 No expiration（免去日后更新的麻烦）。
   • Repository access：选择 Only select repositories，然后在下拉列表中勾选你 Fork 的 Simple-Nav-Page 仓库。
   • Permissions：找到 Repository permissions 分类，将 Contents 的权限设置为 Read and write。
6. 点击页面底部的 Generate token。
7. 立刻复制并保存生成的 Token（形如 github_pat_xxxxxx）。关闭页面后将无法再次查看。

🎛️ 第四步：配置后台管理

在部署成功后，后台管理页面默认指向原作者的仓库，我们需要修改为你的仓库地址。

1. 回到你的 GitHub 仓库 https://github.com/你的用户名/Simple-Nav-Page，打开 admin.html 文件。
2. 点击右上角的铅笔图标进入编辑模式。
3. 找到 const HARDCODED_REPO = 'xmynscnq/Simple-Nav-Page'; 这行（可能变量名略有不同），将其改为 const HARDCODED_REPO = '你的用户名/Simple-Nav-Page';。
4. 点击页面底部的 Commit changes 提交修改。
5. Cloudflare Pages 会自动重新部署，等待约 1~2 分钟。
6. 用浏览器的 无痕/隐私模式 打开 你的导航页网址/admin（避免缓存干扰）。
7. 在页面中输入：
   • GitHub Token：粘贴刚才生成的 Fine-grained token。
   • 短密码：自定义一个密码（用于后续快速解锁，不会被上传）。
8. 点击 “连接并保存”，如果一切正常，你将进入导航编辑界面，可以开始增删改链接了。

✏️ 第五步：修改导航标题

默认导航标题是“王五导航”，你可以改成自己喜欢的名字。

1. 在仓库中打开 index.html 文件。
2. 找到 <title>王五导航</title> 和页面中显示的大标题（可能是 <h1>王五导航</h1> 或 <div class="logo">王五导航</div>），把它们都改成你想要的名称。
3. 提交修改，等待 Cloudflare Pages 自动重新部署即可。

🎯 后续自定义

你可以通过修改 index.html、style.css 和 main.js 来调整外观和功能，例如：

• 更换背景图片
• 调整颜色主题
• 增加或删除搜索引擎选项
• 开启/关闭夜间模式

所有修改都会自动触发 Cloudflare Pages 重新部署，非常方便。

📌 总结

至此，你已经拥有了一个完全属于自己的导航页，并且可以通过后台随时管理链接。整个过程完全免费，数据也由你自己掌握。

如果你在搭建过程中遇到任何问题，欢迎在评论区留言交流！

教程编写于 2026年7月 · 基于 Simple-Nav-Page 最新版本