> ## Content Index
> Fetch the complete content index at: https://isoziyuan.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 小白零基础教程：基于 Cloudflare Pages + D1 搭建高颜值自托管个人导航站（永久免费）
- URL: https://isoziyuan.com/p/100139/
- Published: 2026-09-10T18:05:55.000Z
- Updated: 2026-09-10T18:05:53.000Z
- Author: Isoziyuan
- Tags: 建站教程, Cloudflare, 免费资源, 开源项目

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

---

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

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

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

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

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

---

## 📋 准备工作

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

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

---

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

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

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

---

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

1. 登录进入 [Cloudflare 控制台](https://dash.cloudflare.com/?ref=isoziyuan.com)；
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 或讨论区留言交流！