如果你正在寻找一个完全免费、无需服务器、支持密码保护、自带数据统计的私人导航站解决方案那么 Cloudflare 和 CF-Navs 这个组合可能就是为你量身定做的。过去搭建一个功能完整的导航站意味着你需要租用服务器、配置数据库、处理安全防护甚至还要为流量付费。对于个人开发者、小团队或者只是想整理自己常用链接的用户来说这无疑是一道不低的门槛。很多人因此放弃了搭建或者只能使用功能简陋的静态页面。CF-Navs 的出现彻底改变了这个局面。它不是一个复杂的 CMS 系统而是一个专为 Cloudflare Pages 设计的、开箱即用的静态导航站模板。它的核心价值在于将动态功能如密码保护、数据统计通过 Cloudflare 的 Serverless 服务如 Workers、KV来实现而前端则是纯静态页面。这意味着你无需管理任何后端服务器就能获得一个功能齐全、性能优异且完全免费的导航站。这篇文章将带你从零开始一步步在 Cloudflare 上部署属于你自己的 CF-Navs 导航站。我们不仅会完成部署还会深入探讨其背后的原理分析它如何实现“零成本”和“动态功能”并分享配置密码保护、查看访问统计以及一键备份数据的完整实践。无论你是前端新手还是资深运维都能通过本文获得一个可立即投入使用的解决方案。1. 理解 CF-Navs它到底解决了什么问题在深入动手之前我们需要先理解 CF-Navs 的设计哲学。它瞄准的是一个非常具体的痛点个人或小团体需要一个美观、私密、可追踪的链接收藏中心但又不愿或无法承担传统动态网站的运维成本。传统的解决方案无非两种纯静态页面使用 HTML/CSS/JS 手写或者用 Hugo、Hexo 等静态站点生成器。优点是部署简单、免费托管选择多如 GitHub Pages。缺点是功能单一几乎无法实现密码保护、数据统计等动态需求每次增删链接都需要重新构建和部署体验不连贯。全栈动态应用使用 PHP、Node.js、Python 等搭配数据库如 MySQL、SQLite。功能强大可以轻松实现用户认证、数据管理。但缺点非常明显需要服务器、需要维护、可能有费用并且对于“导航站”这个简单需求来说架构过于沉重。CF-Navs 巧妙地走了第三条路静态站点生成 Serverless 函数 边缘存储。静态站点用户访问的页面是预先生成的 HTML、CSS、JavaScript 文件托管在 Cloudflare Pages 上全球 CDN 加速访问速度极快且完全免费。Serverless 函数当需要“动态”交互时比如验证密码、提交访问记录由 Cloudflare Workers一种 Serverless 函数来处理。你按请求次数付费而 CF-Navs 的用量极低完全在 Cloudflare 的免费额度内。边缘存储密码、访问统计等数据存储在 Cloudflare KV一种全球分布的键值存储中。同样拥有丰富的免费额度。这样一来你获得了一个功能动态但架构静态的网站。它既拥有了静态网站的部署简便、成本低廉和性能优势又具备了动态网站的交互和数据处理能力。这就是 CF-Navs “零成本”部署强大功能的秘密所在。2. 核心概念与准备工作在开始部署前我们需要明确几个核心概念和前提条件。2.1 核心组件解析Cloudflare Pages类似于 GitHub Pages 或 Vercel是一个静态网站托管平台。它可以直接从你的 Git 仓库GitHub/GitLab拉取代码并自动构建、部署。CF-Navs 的前端就部署在这里。Cloudflare Workers一个在全球 Cloudflare 边缘节点运行的 Serverless 函数平台。CF-Navs 用它来处理密码验证和访问统计的 API 请求。Cloudflare KV (Workers KV)一个低延迟、全球复制的键值存储数据库。CF-Navs 用它来存储加密后的密码哈希和每个链接的访问次数。CF-Navs 项目仓库一个开源的 GitHub 仓库包含了导航站的所有前端代码、Worker 脚本以及配置模板。2.2 环境与账号准备要完成部署你需要准备好以下内容一个 Cloudflare 账号这是所有服务的基础注册完全免费。一个 GitHub 账号用于 Fork 和托管 CF-Navs 的代码仓库。一个自定义域名可选但推荐你可以使用 Cloudflare Pages 提供的*.pages.dev子域名但为了更好的体验和品牌建议准备一个自己的域名并将其 DNS 托管到 Cloudflare这是免费服务。3. 第一步Fork 并配置项目仓库我们的旅程从 GitHub 开始。访问 CF-Navs 仓库打开浏览器访问 CF-Navs 的官方 GitHub 仓库通常搜索 “CF-Navs” 即可找到或访问类似github.com/user/cf-navs的地址。Fork 仓库在仓库页面右上角点击Fork按钮。这会在你的 GitHub 账号下创建一个完全相同的副本你可以自由修改它而不会影响原项目。克隆到本地可选如果你打算深度自定义样式或添加大量链接可以使用git clone命令将你 Fork 后的仓库克隆到本地电脑进行编辑。git clone https://github.com/你的用户名/cf-navs.git cd cf-navs关键步骤修改导航站数据导航站的核心是链接数据。数据文件通常位于项目根目录或src/data/目录下是一个 JSON 或 JavaScript 文件例如sites.js或data.json。你需要编辑这个文件按照其格式添加你的分类和链接。格式通常如下所示// 文件src/data/sites.js const sites [ { id: dev, name: 开发工具, links: [ { id: github, name: GitHub, url: https://github.com, icon: FaGithub, // 使用图标库中的名称 description: 全球最大的代码托管平台 }, { id: stackoverflow, name: Stack Overflow, url: https://stackoverflow.com, icon: FaStackOverflow, description: 程序员问答社区 } // ... 更多链接 ] }, { id: design, name: 设计资源, links: [ // ... 设计类链接 ] } // ... 更多分类 ]; export default sites;修改完成后如果你克隆到了本地记得提交并推送到你的 GitHub 仓库。git add . git commit -m “添加我的导航链接” git push origin main4. 第二步在 Cloudflare 上创建 KV 命名空间KV 将用于存储密码和统计信息我们需要先创建它。登录 Cloudflare 仪表板 。在左侧导航栏找到Workers Pages。切换到KV标签页。点击Create namespace。输入一个名称例如MY_NAVS_STORE然后点击Add。记录 KV 的 ID创建成功后你会看到命名空间列表。找到你刚创建的MY_NAVS_STORE其下方有一串唯一的ID格式如xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。复制并保存好这个 ID下一步会用到。5. 第三步部署到 Cloudflare Pages 并绑定 Workers这是将静态站点和动态逻辑结合的关键一步。在 Cloudflare 仪表板进入Workers Pages点击Create application-Pages。连接 Git选择你 Fork 后的 CF-Navs GitHub 仓库。开始设置项目名称可以自定义如my-navs。这将决定你的免费访问域名my-navs.pages.dev。生产分支通常是main或master。构建设置CF-Navs 是静态项目通常构建命令为npm run build或yarn build输出目录为dist或build。请根据项目根目录的package.json文件确认。如果项目说明中已指出请遵循说明。Build command:npm run buildBuild output directory:dist环境变量关键点击Environment variables我们需要添加一个变量将 KV 命名空间绑定到 Pages 项目。Variable name:KV_NAMESPACE_ID名称必须准确项目代码会读取这个变量Value:粘贴你刚才保存的 KV 命名空间 ID。点击Add variable。保存并部署滚动到底部点击Save and Deploy。Cloudflare 会自动拉取代码、安装依赖、执行构建命令并将生成的静态文件部署到全球网络。几分钟后你的导航站就可以通过https://my-navs.pages.dev访问了不过此时密码保护和数据统计还未生效因为我们还没有部署处理这些逻辑的 Worker。6. 第四步部署并配置 Worker 脚本CF-Navs 项目里通常包含一个 Worker 脚本文件如_worker.js或functions目录下的文件。Cloudflare Pages 有一个特性如果项目根目录存在_worker.js文件它会在每个页面请求时运行这个 Worker。确认 Worker 文件在你 Fork 的仓库中检查根目录下是否有_worker.js或functions/[[path]].js这样的文件。这就是处理 API 请求如/api/auth/api/stats的脚本。绑定 KV 到 Worker仅仅有 KV 命名空间和 Worker 文件还不够我们需要在 Pages 项目的设置中将这个 KV 绑定到 Worker这样 Worker 代码才能读写里面的数据。回到你的 Pages 项目Workers Pages-Pages- 点击你的my-navs项目。进入Settings标签页。找到Functions部分点击KV namespace bindings。点击Add binding。Variable name:NAVS_KV这个名称必须与_worker.js代码中使用的变量名完全一致请务必检查代码KV namespace:选择你之前创建的MY_NAVS_STORE。点击Save。重新部署由于我们修改了项目设置添加了 KV 绑定通常需要触发一次重新部署才能生效。你可以进入Deployments标签页找到最新的部署点击Retry或通过推送代码到 Git 仓库来触发新的部署。7. 第五步设置密码保护部署并绑定成功后动态功能就有了基础。现在来设置密码。访问密码设置接口CF-Navs 的 Worker 会提供一个 API 端点来设置密码。通常你需要向你的站点发送一个特定的 POST 请求。使用 curl 命令或 API 工具打开终端或使用 Postman 等工具。请求 URL:https://my-navs.pages.dev/api/auth/setup(请将域名换成你的)请求方法:POST请求头 (Headers):Content-Type: application/json请求体 (Body):{ password: 你想要设置的强密码 }执行请求发送请求。如果返回成功的状态码如 200并且消息提示密码已设置则说明密码已经加密存储到 KV 中。验证密码保护现在刷新你的导航站首页 (https://my-navs.pages.dev)。你应该会被重定向到一个密码输入页面。输入你刚才设置的密码即可进入导航站。重要安全提醒请务必设置一个强密码。api/auth/setup这个端点在生产环境中应该被禁用或保护起来否则任何人都可以重置你的密码。高级用法是在 Worker 代码中通过环境变量设置一个管理令牌只有携带正确令牌的请求才能设置密码。你可以根据项目文档进行配置。8. 第六步查看与管理数据统计密码保护生效后数据统计功能也会自动开始工作。每当有用户在输入正确密码后点击导航站上的任何一个链接Worker 都会在 KV 中为该链接的访问次数加一。查看统计信息CF-Navs 通常会提供一个管理面板或 API 来查看数据。常见入口是访问https://my-navs.pages.dev/admin或调用GET /api/stats接口。访问管理界面在浏览器中输入你的导航站地址加上/admin路径。你可能需要再次输入密码进行管理员验证。查看数据在管理界面你应该能看到每个链接的分类、名称以及对应的点击次数。这些数据直观地反映了你最常用的工具是什么。9. 第七步实现一键备份与恢复数据存储在 Cloudflare KV 中虽然可靠但主动备份是好习惯。CF-Navs 的 Worker 通常也会设计备份/恢复接口。备份数据向 Worker 发送请求导出所有数据包括站点配置和统计信息。请求 URL:GET https://my-navs.pages.dev/api/backup验证你可能需要在请求头中携带密码或令牌具体方式参考项目文档。成功后会返回一个包含所有数据的 JSON 文件。你可以将这个 JSON 文件保存到本地。恢复数据如果需要迁移或恢复可以将备份的 JSON 文件发送给 Worker。请求 URL:POST https://my-navs.pages.dev/api/restore请求头:Content-Type: application/json请求体:将整个备份的 JSON 内容放在请求体中。同样可能需要管理员权限。自动化备份建议你可以编写一个简单的脚本使用 Python、Node.js 或 GitHub Actions定期调用备份接口并将数据文件保存到你的 GitHub 仓库、本地硬盘或其他云存储中实现自动化备份。10. 第八步绑定自定义域名可选但推荐使用*.pages.dev域名可以工作但拥有自己的域名更专业。在 Cloudflare 仪表板中进入你的 Pages 项目 (my-navs)。进入Custom domains标签页。点击Add a custom domain。输入你已托管在 Cloudflare 的完整域名例如nav.yourdomain.com。按照提示完成 DNS 记录的验证和配置。Cloudflare 会自动为你创建必要的 CNAME 记录。等待 DNS 生效通常几分钟到几小时。生效后你的导航站就可以通过https://nav.yourdomain.com访问了。11. 常见问题与排查思路在部署和使用过程中你可能会遇到一些问题。下表列出了常见问题及其解决方法问题现象可能原因排查方式解决方案访问.pages.dev域名显示空白页或错误1. 构建失败2. 输出目录配置错误1. 进入 Pages 项目的Deployments标签查看最新部署的日志。2. 检查package.json中的build脚本和 Pages 设置中的输出目录是否匹配。1. 根据构建日志修复错误通常是依赖问题。2. 在 Pages 项目设置的Builds deployments中修正构建命令和输出目录。密码保护不生效直接进入网站1. Worker 未成功部署或绑定。2._worker.js文件不存在或路径错误。3. KV 绑定变量名不匹配。1. 检查 Pages 项目的Deployments确认_worker.js是否被包含在部署中。2. 检查 Pages 项目Settings-Functions中 KV 绑定的变量名是否与_worker.js代码中使用的变量名完全一致区分大小写。1. 确保_worker.js位于项目根目录并已提交到 Git。2. 修改 KV 绑定名称或 Worker 代码中的变量名使两者一致。设置密码的 API (/api/auth/setup) 返回 404 或 4051. Worker 路由未正确配置。2. 该端点已被禁用。1. 检查_worker.js文件确认是否有处理/api/auth/setup路径的路由逻辑。2. 查看项目文档确认设置密码的正确方式。1. 确保你的代码是最新版本并且 Worker 脚本正确部署。2. 按照项目文档的指引操作可能需要先通过其他方式初始化。数据统计不增长1. 点击事件未正确触发或上报。2. KV 写入失败权限、额度。1. 打开浏览器开发者工具的Network标签点击一个链接查看是否有向/api/record或类似接口发送请求。2. 检查 Worker 的日志在Workers Pages- 你的 Worker -Logs。1. 检查前端代码是否正常加载和执行。2. 确认 KV 绑定正确且未超出免费额度基本不可能超出。自定义域名 SSL 证书错误或无法访问1. DNS 未生效或配置错误。2. Cloudflare 代理未开启橙色云朵。1. 在 Cloudflare 仪表板的DNS设置中检查该域名的 CNAME 记录是否正确指向 Pages 的地址。2. 确认该 DNS 记录的代理状态是“已代理”橙色云朵。1. 等待 DNS 传播或检查 CNAME 记录值。2. 确保 Cloudflare 的代理功能开启SSL/TLS 加密模式设置为“完全”或“严格”。12. 最佳实践与高级配置建议为了让你的 CF-Navs 导航站更安全、稳定和个性化可以考虑以下实践强化安全禁用公开的 Setup API在生产环境修改_worker.js让/api/auth/setup端点只接受来自你信任的 IP 地址的请求或者要求一个额外的、通过环境变量设置的管理密钥。使用强密码密码是唯一防线务必使用密码管理器生成并保存强密码。定期轮换密码定期通过 API 更新密码。优化性能与体验自定义主题CF-Navs 通常使用 Tailwind CSS 等框架你可以通过修改src/styles目录下的文件来改变颜色、字体、布局等。配置合适的缓存在 Cloudflare Pages 的设置中可以针对静态资源配置缓存规则进一步提升加载速度。启用 Brotli 压缩Cloudflare 默认启用确保你的构建工具如 Vite也配置了合适的压缩。数据管理定期备份如前所述建立自动化备份流程将 KV 数据备份到其他位置。清理旧数据如果统计数据过多可以考虑在 Worker 中编写逻辑定期清理过于陈旧的访问记录。扩展功能搜索功能如果链接很多可以考虑在前端集成一个轻量级客户端搜索库如fuse.js。图标库项目通常使用 React Icons你可以访问其官网查找并替换更多合适的图标。多用户支持高级修改 Worker 逻辑支持多个密码或简单的用户系统但这会显著增加复杂度。通过以上步骤你已经成功部署了一个功能完整、完全免费且由你完全掌控的私人导航站。这个方案的精妙之处在于它利用 Cloudflare 的免费生态将 Serverless 的威力赋予了静态网站完美匹配了个人导航站“轻动态、重展示”的需求。
零成本搭建私有导航站：基于Cloudflare Pages与Serverless的完整实践
如果你正在寻找一个完全免费、无需服务器、支持密码保护、自带数据统计的私人导航站解决方案那么 Cloudflare 和 CF-Navs 这个组合可能就是为你量身定做的。过去搭建一个功能完整的导航站意味着你需要租用服务器、配置数据库、处理安全防护甚至还要为流量付费。对于个人开发者、小团队或者只是想整理自己常用链接的用户来说这无疑是一道不低的门槛。很多人因此放弃了搭建或者只能使用功能简陋的静态页面。CF-Navs 的出现彻底改变了这个局面。它不是一个复杂的 CMS 系统而是一个专为 Cloudflare Pages 设计的、开箱即用的静态导航站模板。它的核心价值在于将动态功能如密码保护、数据统计通过 Cloudflare 的 Serverless 服务如 Workers、KV来实现而前端则是纯静态页面。这意味着你无需管理任何后端服务器就能获得一个功能齐全、性能优异且完全免费的导航站。这篇文章将带你从零开始一步步在 Cloudflare 上部署属于你自己的 CF-Navs 导航站。我们不仅会完成部署还会深入探讨其背后的原理分析它如何实现“零成本”和“动态功能”并分享配置密码保护、查看访问统计以及一键备份数据的完整实践。无论你是前端新手还是资深运维都能通过本文获得一个可立即投入使用的解决方案。1. 理解 CF-Navs它到底解决了什么问题在深入动手之前我们需要先理解 CF-Navs 的设计哲学。它瞄准的是一个非常具体的痛点个人或小团体需要一个美观、私密、可追踪的链接收藏中心但又不愿或无法承担传统动态网站的运维成本。传统的解决方案无非两种纯静态页面使用 HTML/CSS/JS 手写或者用 Hugo、Hexo 等静态站点生成器。优点是部署简单、免费托管选择多如 GitHub Pages。缺点是功能单一几乎无法实现密码保护、数据统计等动态需求每次增删链接都需要重新构建和部署体验不连贯。全栈动态应用使用 PHP、Node.js、Python 等搭配数据库如 MySQL、SQLite。功能强大可以轻松实现用户认证、数据管理。但缺点非常明显需要服务器、需要维护、可能有费用并且对于“导航站”这个简单需求来说架构过于沉重。CF-Navs 巧妙地走了第三条路静态站点生成 Serverless 函数 边缘存储。静态站点用户访问的页面是预先生成的 HTML、CSS、JavaScript 文件托管在 Cloudflare Pages 上全球 CDN 加速访问速度极快且完全免费。Serverless 函数当需要“动态”交互时比如验证密码、提交访问记录由 Cloudflare Workers一种 Serverless 函数来处理。你按请求次数付费而 CF-Navs 的用量极低完全在 Cloudflare 的免费额度内。边缘存储密码、访问统计等数据存储在 Cloudflare KV一种全球分布的键值存储中。同样拥有丰富的免费额度。这样一来你获得了一个功能动态但架构静态的网站。它既拥有了静态网站的部署简便、成本低廉和性能优势又具备了动态网站的交互和数据处理能力。这就是 CF-Navs “零成本”部署强大功能的秘密所在。2. 核心概念与准备工作在开始部署前我们需要明确几个核心概念和前提条件。2.1 核心组件解析Cloudflare Pages类似于 GitHub Pages 或 Vercel是一个静态网站托管平台。它可以直接从你的 Git 仓库GitHub/GitLab拉取代码并自动构建、部署。CF-Navs 的前端就部署在这里。Cloudflare Workers一个在全球 Cloudflare 边缘节点运行的 Serverless 函数平台。CF-Navs 用它来处理密码验证和访问统计的 API 请求。Cloudflare KV (Workers KV)一个低延迟、全球复制的键值存储数据库。CF-Navs 用它来存储加密后的密码哈希和每个链接的访问次数。CF-Navs 项目仓库一个开源的 GitHub 仓库包含了导航站的所有前端代码、Worker 脚本以及配置模板。2.2 环境与账号准备要完成部署你需要准备好以下内容一个 Cloudflare 账号这是所有服务的基础注册完全免费。一个 GitHub 账号用于 Fork 和托管 CF-Navs 的代码仓库。一个自定义域名可选但推荐你可以使用 Cloudflare Pages 提供的*.pages.dev子域名但为了更好的体验和品牌建议准备一个自己的域名并将其 DNS 托管到 Cloudflare这是免费服务。3. 第一步Fork 并配置项目仓库我们的旅程从 GitHub 开始。访问 CF-Navs 仓库打开浏览器访问 CF-Navs 的官方 GitHub 仓库通常搜索 “CF-Navs” 即可找到或访问类似github.com/user/cf-navs的地址。Fork 仓库在仓库页面右上角点击Fork按钮。这会在你的 GitHub 账号下创建一个完全相同的副本你可以自由修改它而不会影响原项目。克隆到本地可选如果你打算深度自定义样式或添加大量链接可以使用git clone命令将你 Fork 后的仓库克隆到本地电脑进行编辑。git clone https://github.com/你的用户名/cf-navs.git cd cf-navs关键步骤修改导航站数据导航站的核心是链接数据。数据文件通常位于项目根目录或src/data/目录下是一个 JSON 或 JavaScript 文件例如sites.js或data.json。你需要编辑这个文件按照其格式添加你的分类和链接。格式通常如下所示// 文件src/data/sites.js const sites [ { id: dev, name: 开发工具, links: [ { id: github, name: GitHub, url: https://github.com, icon: FaGithub, // 使用图标库中的名称 description: 全球最大的代码托管平台 }, { id: stackoverflow, name: Stack Overflow, url: https://stackoverflow.com, icon: FaStackOverflow, description: 程序员问答社区 } // ... 更多链接 ] }, { id: design, name: 设计资源, links: [ // ... 设计类链接 ] } // ... 更多分类 ]; export default sites;修改完成后如果你克隆到了本地记得提交并推送到你的 GitHub 仓库。git add . git commit -m “添加我的导航链接” git push origin main4. 第二步在 Cloudflare 上创建 KV 命名空间KV 将用于存储密码和统计信息我们需要先创建它。登录 Cloudflare 仪表板 。在左侧导航栏找到Workers Pages。切换到KV标签页。点击Create namespace。输入一个名称例如MY_NAVS_STORE然后点击Add。记录 KV 的 ID创建成功后你会看到命名空间列表。找到你刚创建的MY_NAVS_STORE其下方有一串唯一的ID格式如xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。复制并保存好这个 ID下一步会用到。5. 第三步部署到 Cloudflare Pages 并绑定 Workers这是将静态站点和动态逻辑结合的关键一步。在 Cloudflare 仪表板进入Workers Pages点击Create application-Pages。连接 Git选择你 Fork 后的 CF-Navs GitHub 仓库。开始设置项目名称可以自定义如my-navs。这将决定你的免费访问域名my-navs.pages.dev。生产分支通常是main或master。构建设置CF-Navs 是静态项目通常构建命令为npm run build或yarn build输出目录为dist或build。请根据项目根目录的package.json文件确认。如果项目说明中已指出请遵循说明。Build command:npm run buildBuild output directory:dist环境变量关键点击Environment variables我们需要添加一个变量将 KV 命名空间绑定到 Pages 项目。Variable name:KV_NAMESPACE_ID名称必须准确项目代码会读取这个变量Value:粘贴你刚才保存的 KV 命名空间 ID。点击Add variable。保存并部署滚动到底部点击Save and Deploy。Cloudflare 会自动拉取代码、安装依赖、执行构建命令并将生成的静态文件部署到全球网络。几分钟后你的导航站就可以通过https://my-navs.pages.dev访问了不过此时密码保护和数据统计还未生效因为我们还没有部署处理这些逻辑的 Worker。6. 第四步部署并配置 Worker 脚本CF-Navs 项目里通常包含一个 Worker 脚本文件如_worker.js或functions目录下的文件。Cloudflare Pages 有一个特性如果项目根目录存在_worker.js文件它会在每个页面请求时运行这个 Worker。确认 Worker 文件在你 Fork 的仓库中检查根目录下是否有_worker.js或functions/[[path]].js这样的文件。这就是处理 API 请求如/api/auth/api/stats的脚本。绑定 KV 到 Worker仅仅有 KV 命名空间和 Worker 文件还不够我们需要在 Pages 项目的设置中将这个 KV 绑定到 Worker这样 Worker 代码才能读写里面的数据。回到你的 Pages 项目Workers Pages-Pages- 点击你的my-navs项目。进入Settings标签页。找到Functions部分点击KV namespace bindings。点击Add binding。Variable name:NAVS_KV这个名称必须与_worker.js代码中使用的变量名完全一致请务必检查代码KV namespace:选择你之前创建的MY_NAVS_STORE。点击Save。重新部署由于我们修改了项目设置添加了 KV 绑定通常需要触发一次重新部署才能生效。你可以进入Deployments标签页找到最新的部署点击Retry或通过推送代码到 Git 仓库来触发新的部署。7. 第五步设置密码保护部署并绑定成功后动态功能就有了基础。现在来设置密码。访问密码设置接口CF-Navs 的 Worker 会提供一个 API 端点来设置密码。通常你需要向你的站点发送一个特定的 POST 请求。使用 curl 命令或 API 工具打开终端或使用 Postman 等工具。请求 URL:https://my-navs.pages.dev/api/auth/setup(请将域名换成你的)请求方法:POST请求头 (Headers):Content-Type: application/json请求体 (Body):{ password: 你想要设置的强密码 }执行请求发送请求。如果返回成功的状态码如 200并且消息提示密码已设置则说明密码已经加密存储到 KV 中。验证密码保护现在刷新你的导航站首页 (https://my-navs.pages.dev)。你应该会被重定向到一个密码输入页面。输入你刚才设置的密码即可进入导航站。重要安全提醒请务必设置一个强密码。api/auth/setup这个端点在生产环境中应该被禁用或保护起来否则任何人都可以重置你的密码。高级用法是在 Worker 代码中通过环境变量设置一个管理令牌只有携带正确令牌的请求才能设置密码。你可以根据项目文档进行配置。8. 第六步查看与管理数据统计密码保护生效后数据统计功能也会自动开始工作。每当有用户在输入正确密码后点击导航站上的任何一个链接Worker 都会在 KV 中为该链接的访问次数加一。查看统计信息CF-Navs 通常会提供一个管理面板或 API 来查看数据。常见入口是访问https://my-navs.pages.dev/admin或调用GET /api/stats接口。访问管理界面在浏览器中输入你的导航站地址加上/admin路径。你可能需要再次输入密码进行管理员验证。查看数据在管理界面你应该能看到每个链接的分类、名称以及对应的点击次数。这些数据直观地反映了你最常用的工具是什么。9. 第七步实现一键备份与恢复数据存储在 Cloudflare KV 中虽然可靠但主动备份是好习惯。CF-Navs 的 Worker 通常也会设计备份/恢复接口。备份数据向 Worker 发送请求导出所有数据包括站点配置和统计信息。请求 URL:GET https://my-navs.pages.dev/api/backup验证你可能需要在请求头中携带密码或令牌具体方式参考项目文档。成功后会返回一个包含所有数据的 JSON 文件。你可以将这个 JSON 文件保存到本地。恢复数据如果需要迁移或恢复可以将备份的 JSON 文件发送给 Worker。请求 URL:POST https://my-navs.pages.dev/api/restore请求头:Content-Type: application/json请求体:将整个备份的 JSON 内容放在请求体中。同样可能需要管理员权限。自动化备份建议你可以编写一个简单的脚本使用 Python、Node.js 或 GitHub Actions定期调用备份接口并将数据文件保存到你的 GitHub 仓库、本地硬盘或其他云存储中实现自动化备份。10. 第八步绑定自定义域名可选但推荐使用*.pages.dev域名可以工作但拥有自己的域名更专业。在 Cloudflare 仪表板中进入你的 Pages 项目 (my-navs)。进入Custom domains标签页。点击Add a custom domain。输入你已托管在 Cloudflare 的完整域名例如nav.yourdomain.com。按照提示完成 DNS 记录的验证和配置。Cloudflare 会自动为你创建必要的 CNAME 记录。等待 DNS 生效通常几分钟到几小时。生效后你的导航站就可以通过https://nav.yourdomain.com访问了。11. 常见问题与排查思路在部署和使用过程中你可能会遇到一些问题。下表列出了常见问题及其解决方法问题现象可能原因排查方式解决方案访问.pages.dev域名显示空白页或错误1. 构建失败2. 输出目录配置错误1. 进入 Pages 项目的Deployments标签查看最新部署的日志。2. 检查package.json中的build脚本和 Pages 设置中的输出目录是否匹配。1. 根据构建日志修复错误通常是依赖问题。2. 在 Pages 项目设置的Builds deployments中修正构建命令和输出目录。密码保护不生效直接进入网站1. Worker 未成功部署或绑定。2._worker.js文件不存在或路径错误。3. KV 绑定变量名不匹配。1. 检查 Pages 项目的Deployments确认_worker.js是否被包含在部署中。2. 检查 Pages 项目Settings-Functions中 KV 绑定的变量名是否与_worker.js代码中使用的变量名完全一致区分大小写。1. 确保_worker.js位于项目根目录并已提交到 Git。2. 修改 KV 绑定名称或 Worker 代码中的变量名使两者一致。设置密码的 API (/api/auth/setup) 返回 404 或 4051. Worker 路由未正确配置。2. 该端点已被禁用。1. 检查_worker.js文件确认是否有处理/api/auth/setup路径的路由逻辑。2. 查看项目文档确认设置密码的正确方式。1. 确保你的代码是最新版本并且 Worker 脚本正确部署。2. 按照项目文档的指引操作可能需要先通过其他方式初始化。数据统计不增长1. 点击事件未正确触发或上报。2. KV 写入失败权限、额度。1. 打开浏览器开发者工具的Network标签点击一个链接查看是否有向/api/record或类似接口发送请求。2. 检查 Worker 的日志在Workers Pages- 你的 Worker -Logs。1. 检查前端代码是否正常加载和执行。2. 确认 KV 绑定正确且未超出免费额度基本不可能超出。自定义域名 SSL 证书错误或无法访问1. DNS 未生效或配置错误。2. Cloudflare 代理未开启橙色云朵。1. 在 Cloudflare 仪表板的DNS设置中检查该域名的 CNAME 记录是否正确指向 Pages 的地址。2. 确认该 DNS 记录的代理状态是“已代理”橙色云朵。1. 等待 DNS 传播或检查 CNAME 记录值。2. 确保 Cloudflare 的代理功能开启SSL/TLS 加密模式设置为“完全”或“严格”。12. 最佳实践与高级配置建议为了让你的 CF-Navs 导航站更安全、稳定和个性化可以考虑以下实践强化安全禁用公开的 Setup API在生产环境修改_worker.js让/api/auth/setup端点只接受来自你信任的 IP 地址的请求或者要求一个额外的、通过环境变量设置的管理密钥。使用强密码密码是唯一防线务必使用密码管理器生成并保存强密码。定期轮换密码定期通过 API 更新密码。优化性能与体验自定义主题CF-Navs 通常使用 Tailwind CSS 等框架你可以通过修改src/styles目录下的文件来改变颜色、字体、布局等。配置合适的缓存在 Cloudflare Pages 的设置中可以针对静态资源配置缓存规则进一步提升加载速度。启用 Brotli 压缩Cloudflare 默认启用确保你的构建工具如 Vite也配置了合适的压缩。数据管理定期备份如前所述建立自动化备份流程将 KV 数据备份到其他位置。清理旧数据如果统计数据过多可以考虑在 Worker 中编写逻辑定期清理过于陈旧的访问记录。扩展功能搜索功能如果链接很多可以考虑在前端集成一个轻量级客户端搜索库如fuse.js。图标库项目通常使用 React Icons你可以访问其官网查找并替换更多合适的图标。多用户支持高级修改 Worker 逻辑支持多个密码或简单的用户系统但这会显著增加复杂度。通过以上步骤你已经成功部署了一个功能完整、完全免费且由你完全掌控的私人导航站。这个方案的精妙之处在于它利用 Cloudflare 的免费生态将 Serverless 的威力赋予了静态网站完美匹配了个人导航站“轻动态、重展示”的需求。