🚀【完全免费】用 Cloudflare 搭建你的专属导航页：无需服务器，一键部署！

type

status

date

Nov 7, 2025 03:41 AM

slug

summary

🌟 教程简介

今天，我们要用到两个超级强大的免费工具：

🧩 GitHub — 负责托管源代码

⚡ Cloudflare — 负责运行与数据库管理

只需几步，你就能拥有一个完全属于自己的导航页网站！支持动态管理、添加图标、修改背景，甚至还能加登录密码保护！

🧰 一、准备工作（Prerequisites）

你需要准备以下两个账户：

✅ 一个 GitHub 账号（用于存放项目代码）

✅ 一个 Cloudflare 账号（用于托管与运行项目）

📌 如果还没有账号，请先注册再继续操作。

🪄 二、在 GitHub 上准备项目

1️⃣ Fork 开源项目

打开 Cloudflare-Navihive 项目

点击右上角的 ⭐ Star 给原作者支持

点击 Fork 将项目复制到自己的仓库

你可以修改仓库名称或保持默认

点击 Create fork 完成！

2️⃣ 修改项目配置（关键步骤）

要让 Cloudflare 正确部署，我们需要修改两个文件。

🔧 修改 A：部署模板文件

打开仓库中的文件 rendertemplate.jsonc

点击右上角 ✏️ 编辑

根据教程内容替换文件中的内容

点击 Commit changes 提交保存

🔗 修改 B：部署按钮链接

打开仓库的 README.md 文件

找到部署按钮的链接（以 ?url= 结尾）

将链接中 = 后的地址替换为你的 GitHub 仓库地址：

修改完成后点击 Commit 提交。

☁️ 三、部署到 Cloudflare

🧩 1. 连接 GitHub

回到项目主页，点击 部署按钮（Deploy to Cloudflare）

如果第一次使用 Cloudflare Pages，会提示授权 GitHub

建议选择 “仅选择此仓库” → 搜索刚刚 Fork 的项目 → 点击 Install

⚙️ 2. 配置部署参数

部署时需填写一些基础信息：

参数	说明
Project Name	项目名称，建议自定义，去掉尾缀 `_global`
User	登录用户名（默认可修改）
Password	登录密码（请设置复杂密码）
Secret Key	密钥，建议更换防止被爆破

填好后点击 创建部署（Create Deploy）。

系统将自动构建并部署，完成后会生成访问地址 🎉

💾 四、创建数据库表（D1 数据库）

在 Cloudflare 仪表盘左侧选择 “存储与数据库 → D1”

找到你刚部署的数据库并进入控制台

按项目文档，依次执行创建数据表命令（共4条）

代码如下

4.每次点击 运行（Execute） 并确认执行成功

💡 小贴士：如果执行时提示语法错误，请逐条执行而不是一次性粘贴全部。

🌈 五、访问与管理导航页

🔐 登录后台

打开 Cloudflare Pages 项目 → 点击 访问网站（Visit Site）

进入登录界面

使用你在变量中设置的用户名与密码登录

📍 如果忘记登录信息：

前往 Cloudflare → 项目设置 → “变量与机密（Variables and Secrets）” 即可查看。

🧭 动态管理站点

进入后台后，你就可以轻松管理导航内容啦！

🗂 创建分组

点击「新建分组」，输入分组名（如：常用工具、视频、学习）

🌐 添加站点

点击「创建卡片」

填写名称、网站链接、描述

可自动抓取网站图标或手动填写图标 URL

点击「创建」完成添加

🧩 调整与删除

拖拽排序后点击「保存」

点击卡片齿轮图标可删除

同理可删除整个分组

🎨 个性化外观

切换深色 / 浅色模式

修改导航栏标题文字

更换背景图：粘贴任意网络图片链接即可

🌍 六、进阶功能与问题排查

1️⃣ 添加自定义域名（推荐）

默认的 *.workers.dev 或 *.m.works 域名可能被屏蔽，可绑定你自己的域名。

操作步骤：

进入 Cloudflare → 选择项目 → 点击「自定义域（Custom Domain）」

输入你的域名（如 nav.yourdomain.com）

如果该域名托管在 Cloudflare，会自动配置解析

部署完成后即可使用自己的域名访问导航页 ✨

2️⃣ GitHub 仓库清理

Cloudflare 可能会额外创建一个仓库副本。

建议只保留你 Fork 的那个，删除多余副本：

打开 GitHub → 仓库 → Settings

下滑到最底部 → 点击 Delete this repository

🧩 七、常见问题 FAQ

问题	解决方法
无法访问导航页	检查部署日志或绑定自定义域
登录失败	在 Cloudflare 中查看变量是否正确
数据表报错	逐条执行 SQL 创建命令，避免一次性执行
图标不显示	检查图标 URL 或开启自动获取图标选项