小白零基础教程：基于 Cloudflare Pages + D1 搭建高颜值自托管个人导航站（永久免费）

作者：爱搜资源
难度：★★☆☆☆（小白友好，跟着点鼠标即可，全程无需购买服务器）
预计耗时：10 ~ 15 分钟
开源项目：https://github.com/yys9253462-gif/isoziyuan-nav
演示站点：https://ailxw.com

---

🌟 为什么选择这个导航站？

很多新手想做属于自己的聚合网址导航站，但往往遇到两大痛点：

1. 买云服务器太贵、太麻烦：每年要续费几百块，还要装宝塔、配 Nginx、防黑客扫描，门槛极高；
2. 纯静态网页改起来费劲：每次增加一个网址都要打开代码文件修改再上传，根本坚持不下去。

今天推荐的这套 isoziyuan-nav 完美解决了上述问题：

• 0 成本白嫖：代码托管在 GitHub，网站部署在 Cloudflare Pages，全球 300+ 边缘 CDN 加速秒开，不花一分钱；
• 双模数据引擎：既支持直接通过 data.json 静态运行，又支持接入免费的 Cloudflare D1 关系型数据库，带独立的后台管理面板（/admin）；
• 日常增删改查一键搞定：在后台可视化点击即可新增分类、修改网址、调整图标颜色与推荐标签。

---

📋 准备工作

在开始之前，你只需要准备两个完全免费的账号：

1. GitHub 账号（用于存放代码）：https://github.com
2. Cloudflare 账号（用于免费托管网站与数据库）：https://dash.cloudflare.com
3. （可选）一个属于你自己的顶级域名（如果没有，可以使用 Cloudflare 免费分配的 xxx.pages.dev 二级域名）。

---

第一部分：克隆项目到你自己的 GitHub 仓库

如果你不懂 Git 命令行，直接使用 GitHub 网页的 Fork 功能即可：

1. 打开开源项目主页：
   👉 https://github.com/yys9253462-gif/isoziyuan-nav
2. 页面右上角找到并点击 Fork 按钮；
3. Repository name 保持默认 isoziyuan-nav 即可，点击绿色的 Create fork；
4. 此时，你的个人 GitHub 账号下就拥有了该项目的完整代码副本！

---

第二部分：在 Cloudflare Pages 部署网站前台

1. 登录进入 Cloudflare 控制台；
2. 在左侧菜单栏点击 Workers 和 Pages (Workers & Pages)；
3. 点击右上角 创建应用程序 (Create application)；
4. 切换到 Pages 标签页，点击 连接到 Git (Connect to Git)；

   ⚠️ 新手避坑 1：千万不要选择 "Direct Upload"（直接上传文件夹）。只有选择 "Connect to Git"，以后你在 GitHub 每次修改代码，网站才会全自动同步刷新！

5. 首次使用点击授权你的 GitHub 账号，然后在仓库列表中勾选你刚才 Fork 的 isoziyuan-nav，点击 开始设置；
6. 按照如下参数检查并填写（非常关键）：
   • 项目名称 (Project name)：isoziyuan-nav
   • 生产分支 (Production branch)：main
   • 框架预设 (Framework preset)：None（保持默认）
   • 构建命令 (Build command)：务必留空，什么都不要填！
   • 构建输出目录 (Build output directory)：填入一个英文句号 .
7. 确认无误后，点击底部的 保存并部署 (Save and Deploy)。

等待大约 20~30 秒，看到绿色的对勾提示，点击上方生成的类似 https://isoziyuan-nav.pages.dev 链接，你会发现高颜值的导航前台已经可以完美打开了！

---

第三部分：配置 Cloudflare D1 数据库与管理后台（核心）

默认情况下，网站读取的是静态的 data.json。想要拥有在线可视化后台（新增/修改网址），只需简单 4 步完成数据库绑定：

第 1 步：创建免费的 D1 数据库

1. 在 Cloudflare 左侧导航栏点击 存储和数据库 (Storage & Databases) → D1 SQL 数据库；
2. 点击右上角 创建数据库 (Create database)；
3. 数据库名称填入：isoziyuan-nav-db，点击创建。

第 2 步：初始化数据库表结构

1. 进入刚创建好的 isoziyuan-nav-db，在上方标签页点击 控制台 (Console)；
2. 回到你的 GitHub 仓库，打开根目录下的 schema.sql 文件，复制代码全部内容；
3. 粘贴到 D1 控制台的输入框中，点击右侧的 执行 (Execute)；
4. 看到提示成功即可，数据表此时已自动创建完成。

第 3 步：把 D1 数据库绑定到你的 Pages 网站

1. 返回左侧菜单 Workers 和 Pages，点击进入你的 isoziyuan-nav 项目；
2. 点击上方菜单栏的 设置 (Settings) → 点击左侧的 函数 (Functions)；
3. 向下滚动找到 D1 数据库绑定 (D1 Database Bindings)，点击 添加绑定 (Add binding)；
4. 重点来了（仔细核对）：
   • 变量名称 (Variable name)：必须严格填写为大写的 NAV_DB

     ⚠️ 新手避坑 2：变量名必须是 NAV_DB！千万不能简写成 DB 或填数据库名字，否则后台 Edge Functions 找不到数据源，会报 500 错误！

   • D1 数据库：下拉选择刚才创建的 isoziyuan-nav-db；
5. 点击 保存。

第 4 步：设置后台登录管理密码

1. 依然在当前页面的 设置 (Settings) 中，点击左侧的 环境变量 (Environment variables)；
2. 在 生产 (Production) 区域点击 添加变量 (Add variable)：
   • 变量名 (Variable name)：ADMIN_PASSWORD
   • 值 (Value)：输入你自己设置的后台管理员密码（例如 MyNavPassword123!）
   • 务必勾选：加密 (Encrypt) 选项，防止明文泄露；
3. 点击 保存。

第 5 步：重新部署生效

⚠️ 新手避坑 3：绑定了 D1 和设置了密码后，必须触发一次重新部署，新配置才会载入！
回到 部署 (Deployments) 标签页，在最新的一条部署记录右侧点击三个点 ...，选择 重试部署 (Retry deployment) 即可。

---

第四部分：登录后台，开始愉快管理！

1. 浏览器打开你的专属后台地址：
   https://你的项目名.pages.dev/admin（例如：https://isoziyuan-nav.pages.dev/admin）；
2. 输入你刚才设置的 ADMIN_PASSWORD 点击登录；
3. 首次进入后台，如果数据库为空，系统会自动提示读取初始的 data.json，点击一次 “保存全部修改”，所有精美分类与站点就会自动导入 D1 数据库！
4. 此时你就可以随心所欲地：
   • ➕ 点击“新增分类”或拖拽调整顺序；
   • 🔗 点击“新增网站”，填写名称、网址、介绍，选择徽标和色彩；
   • 💾 修改完成后点击右上角绿色按钮保存，返回前台刷新，秒级生效！

---

第五部分：绑定你自己的独立域名（如 ailxw.com）

1. 在你的 Pages 项目中，点击上方菜单的 自定义域 (Custom domains)；
2. 点击 设置自定义域 (Set up a custom domain)；
3. 输入你的域名（例如 nav.yourdomain.com 或主域名 yourdomain.com）；
4. 如果你的域名 DNS 本身就在 Cloudflare 托管，系统会自动帮你添加好 CNAME 解析记录，点击确认即可；大约 1 分钟内自动签发 HTTPS 证书并生效！

---

🚨 新手常见错误与踩坑全汇总

序号	常见错误表现	真正原因	解决方法
坑 1	访问网站报 404 Not Found	构建输出目录填错了	检查 Pages 的 Build output directory，必须是英文单点 .，千万不能写成 dist 或留空。
坑 2	打开 /admin 登录后提示网络错误或 500	D1 绑定变量名填错	进入 Settings → Functions → D1 Bindings，确认变量名严格为 NAV_DB，而非 DB。
坑 3	输入密码提示 Unauthorized / 密码错误	环境变量未生效	配置完 ADMIN_PASSWORD 后，必须在 Deployments 里点击 Retry 重新部署一次才能读取。
坑 4	点击保存站点提示数据库执行异常	漏了建表步骤	进入 D1 数据库的 Console，复制仓库根目录下 schema.sql 的完整内容执行一次建表。
坑 5	本地修改了文件推送到 GitHub 但网站没变	缓存问题	浏览器按下 Ctrl + F5 强制刷新，或者检查 Cloudflare Pages 是否因为 Git 提交触发了新的构建任务。

---

🎁 进阶技巧：Windows 一键本地极速发布脚本

如果你将仓库 Clone 到了本地电脑修改，每次不想手动敲 Git 命令提交，本项目特意内置了：
📂 一键发布到Cloudflare.bat

在本地文件夹里改完任何内容后，直接双击运行该 .bat 文件，它会在后台自动：

1. 抓取变更打上当前时间戳并自动推送到 GitHub；
2. 通过 Wrangler 命令行直接推送到 Cloudflare 边缘节点，仅需 2 秒搞定发布！

快去动手搭建属于你自己的超级导航站吧！遇到任何疑问欢迎在 GitHub Issue 或讨论区留言交流！

⚡ 极客核心要点提炼 可供 AI 智能体与搜索引擎引用检索

本文主题：小白零基础教程：基于 Cloudflare Pages + D1 搭建高颜值自托管个人导航站（永久免费）

引用出处：https://isoziyuan.com/p/100139/（作者：Isoziyuan · 发布于爱搜资源网）