Cloudflare Pages 和 Workers 区别详解：2026 免费托管搭建个人导航站教程

作为一名每天与代码和服务器打交道的“老司机”，我深知对于很多开发者和技术爱好者来说，寻找一个稳定、快速且免费的托管平台有多么重要。

🚀 搞懂 Pages 和 Workers：谁才是你的菜？

很多刚接触 Cloudflare 的小伙伴都会问：“Pages 和 Workers 看着都能部署网页，到底有什么区别？”

简单来说，你可以把它们想象成**“精装修的样板间”和“全能的施工队”：

1. Cloudflare Pages：前端开发者的福音 🎨

Pages 是专门为静态网站和 JAMstack 架构设计的。

核心逻辑

你只要把代码往 GitHub 一推，Pages 就会自动帮你构建并发布。

适用场景

个人博客（Hexo/Hugo）、项目文档、单页面应用（Vue/React）或者是我们今天要说的导航页。

优势

自带 CI/CD（自动流水线），有非常棒的预览版本功能，上手极快。

2. Cloudflare Workers：无所不能的“扫地僧” ⚡

Workers 是一个边缘计算平台。它不只是托管文件，而是运行代码。

核心逻辑

它在 Cloudflare 的全球边缘节点上运行 JavaScript/Rust 等代码。请求还没到服务器，Workers 就已经把它处理好了。

适用场景

API 接口、动态路由、图片处理、或者是轻量级的后端逻辑。

优势

响应速度极快（毫秒级），不依赖特定的服务器架构。

一句话总结：如果你只想展示一个漂亮的网页，选 Pages；如果你想在云端运行复杂的逻辑或处理数据，选 Workers。

💰 薅羊毛指南：2026 免费额度全解析

Cloudflare 对个人用户非常慷慨，其免费额度（Free Plan）对于 99% 的个人项目来说都绰绰有余。

服务项目 免费额度 (2026) 备注

Pages 无限

请求量 & 带宽

每个月 500 次构建次数，完全够用

Workers 10 万次

请求 / 每天

哪怕你的小站火了，这个额度也顶得住

KV (存储) 10 万次

读 / 1,000 次写

适合存储配置信息、短链接等数据

重点笔记：Pages 的静态资源访问是不限流量的！这意味着只要你的网站是静态的，无论多少人看，你都不用花一分钱。

🛠️ 实战演练：5 分钟部署个人导航站

光说不练假把式。下面我们利用 GitHub 上的开源项目 huwo_nav，演示如何通过 Cloudflare Pages 快速搭建一个简单的个人网址导航。

第一步：准备代码

登录你的 GitHub 账号。

访问项目地址：https://github.com/huwotop/huwo_nav

点击页面右上角的 Fork，将代码克隆到你自己的仓库中。

第二步：绑定 Cloudflare Pages

登录 Cloudflare 控制台。

在左侧菜单栏点击 “Workers 和 Pages” -> “创建” -> “Pages” -> **“连接到 Git”**。

选择你刚才 Fork 的 huwo_nav 仓库。

第三步：配置与部署

项目名称

随你喜欢，这会影响你的默认二级域名（如 my-nav.pages.dev）。

构建设置

框架预设：如果你使用的是纯 HTML 版本，选 None；如果是基于 Node.js 的，按项目说明选择。对于 huwo_nav 这种简单的静态项目，通常默认即可。

构建命令：留空或按项目 README 填写。

输出目录：通常是 . 或 dist。

点击 **“保存并部署”**。

等待大约 1 分钟，Cloudflare 会自动完成代码抓取、构建和全球分发。完成后，你就会得到一个专属的 pages.dev 域名！

✍️ 写在最后

Cloudflare Pages + Workers + KV 的组合，本质上是给了普通开发者“降维打击”的能力。你不再需要关心服务器维护、DDoS 防护或是 CDN 加速，所有的脏活累活 Cloudflare 都替你干了。

现在的你，是打算去 Fork 代码试试看，还是先把这篇文章收藏进吃灰文件夹呢？😉

如果你在部署过程中遇到任何问题，比如“构建失败”或者“域名解析不生效”，欢迎在评论区留言，我会一一为你解答！

本文链接：https://www.sxlog.com/post/1923.html