Cloudflare Pages 免费建站教学 2026:5 分钟部署静态网站

4次阅读
没有评论

翻译说明:本文为 MobileSetting 原文 的繁体中文转简体中文翻译。除繁简转换、明显错别字和排版外,保留原文标题、事实、观点、数字、结构和第一人称表达。

Cloudflare Pages 免费计划提供无限静态网站部署、每月 500 次 build、全球 CDN,并支援自定义域名。连接 GitHub 后 5 分钟内可以上线,零月费。Next.js、Astro、Hugo 等主流框架开箱即用,香港用家延迟低至 20-50ms,系 2026 年性价比最高的静态建站选择。

唔少人以为建网站一定要付 server 月费。静态网站其实可以完全免费,而且速度比一般共享主机更快。Cloudflare Pages 系目前最完善的免费静态建站平台,凭借 Cloudflare 全球 300+ 节点网络,任何地方访问都极速。呢篇文章教你 5 分钟部署,并讲清楚免费计划嘅实际限制。


Cloudflare Pages 系咩?点解适合香港用家?

Cloudflare Pages 系 Cloudflare 推出嘅静态网站部署服务。「静态」意思系网站内容系预先生成嘅 HTML/CSS/JS 文件,唔需要即时查询资料库,因此可以直接放喺 CDN 上全球分发。

点解特别适合香港用家?

延迟极低。 Cloudflare 喺香港有多个 PoP(Point of Presence)节点,本地用家访问时延迟低至 20-50ms,比一般美国 server(150-200ms)快 3-4 倍。

无限请求。 免费计划唔限制流量或带宽,唔会因为访问量增加而收费,对刚起步嘅个人网站或 side project 系大优点。

自定义域名免费。 连接自己的域名完全免费,包括自动 SSL 凭证,其他平台可能要付费才有呢个功能。

DDoS 防护内置。 作为世界最大 CDN 供应商之一,Cloudflare Pages 天然继承 DDoS 防护,唔需要额外付费。


5 步部署静态网站

Step 1:连接 GitHub

登入 Cloudflare Dashboard(dash.cloudflare.com),左侧选单拣「Pages」,点击「Create a project」。

选择「Connect to Git」,授权连接你的 GitHub 帐号。选好你想部署的 repository,点击「Begin setup」。

Step 2:选择框架预设

Cloudflare Pages 自动侦测大部分框架。如果侦测唔到,手动拣:

  • Next.js:选「Next.js」
  • Astro:选「Astro」
  • Hugo:选「Hugo」
  • 纯 HTML:选「None」(唔需要 build)

Step 3:配置 Build Settings

系统会预填 build 指令,一般唔需要修改:

  • Build command: 例如 npm run build(Next.js)、astro build(Astro)、hugo(Hugo)
  • Build output directory: 例如 out.next(Next.js)、dist(Astro)、public(Hugo)
  • Root directory: 通常留空(即 repo 根目录)

如果用 Next.js 静态导出,记得喺 next.config.js 设置 output: 'export',否则 Pages 唔支援 Server Components。

Step 4:Deploy

点击「Save and Deploy」。Cloudflare 会自动:

  1. Clone 你的 repo
  2. 安装依赖(npm install / yarn)
  3. 执行 build 指令
  4. 将 output 推上全球 CDN

首次 deploy 约需 1-3 分钟。之后每次 push 到 GitHub,Cloudflare Pages 自动重新部署。

Step 5:设置自定义域名

部署完成后,你会有一个 *.pages.dev 的免费域名。如需用自己嘅域名:

  1. Pages 项目页面点击「Custom domains」
  2. 输入你的域名(例如 yoursite.com
  3. 如果域名喺 Cloudflare 管理,自动配置;如在其他 registrar,按提示加 CNAME record
  4. SSL 凭证自动配置,几分钟生效

支援框架列表

框架 Build 指令 Output 目录 备注
Next.js(静态) next build out 需设 output: 'export'
Astro astro build dist 完全支援
Hugo hugo public 支援 extended 版本
Gatsby gatsby build public 支援
Nuxt(静态) nuxt generate .output/public 需静态模式
SvelteKit(静态) vite build build 需 adapter-static
VitePress vitepress build docs docs/.vitepress/dist 适合文档站
纯 HTML 无需 build /(根目录) 直接部署

免费 Plan 限制是什么?

了解限制系避免踩坑嘅关键。 免费计划唔系无限,有几个重要上限:

每月 500 次 Build: 每次 push 到 GitHub 触发一次 build。对个人网站通常绰绰有余,但如果系 CI/CD 频繁部署嘅项目需要留意。超出后需升级到 $20/月嘅 Pro Plan(无限 builds)。

Pages Functions 调用: 如果你用 Cloudflare Pages Functions(相当于简单 serverless 函数),免费计划每日 100,000 次调用。超出后需购买 Workers Paid Plan($5/月起)。

Concurrent Builds: 免费计划同一时间只能跑 1 个 build 任务,如果你有多个项目同时 push,会排队。Pro Plan 支援 5 个并行。

Branches: 支援无限 preview branches,每个 branch push 都会有独立 preview URL,方便 staging 测试。免费计划同样支援。


Cloudflare Pages vs Vercel vs Zeabur

功能 Cloudflare Pages Vercel Zeabur
静态网站 免费,无限带宽 免费(有流量上限) 支援(按资源收费)
后端 API Pages Functions(有限) Serverless Functions 完整后端支援
资料库 D1(SQLite,beta) 需整合外部 PostgreSQL/MySQL 一键建立
香港节点 香港 PoP(CDN) 香港 Edge(CDN) 香港 Region(真实 server)
月费 免费起步 免费起步($20 Pro) $5 起
Next.js 支援 静态模式(限制) 完整支援(官方合作) 完整支援
适合 纯静态网站、Hugo、Astro Next.js 全栈 后端服务、bot、API

选择逻辑:

  • 静态内容展示站:Cloudflare Pages
  • Next.js 全栈(需要 SSR/Server Actions):Vercel
  • 后端 API、资料库、长期运行服务:Zeabur

何时需要从 Pages 升级到 Zeabur?

Cloudflare Pages 功能强,但系静态优先平台。以下情况需要转用后端服务平台:

需要持续运行的后端 API

Pages Functions 系 Serverless,每次请求启动,冇状态、冇持久连接。如果你的应用需要 WebSocket、长时间任务、定时排程,Pages Functions 唔适合。

需要资料库

D1(Cloudflare 的 SQLite 资料库)仍系 beta 状态,功能有限制。如果需要 PostgreSQL、MySQL、Redis,需要另外连接外部资料库服务,增加复杂度。

Telegram Bot 或排程任务

Bot 需要持续运行监听 webhook,排程任务(cron job)需要 server 环境。Cloudflare Workers 可以做到部分,但复杂逻辑管理起来费事。

跑 Python / Django / FastAPI 后端

Pages 唔支援 Python。Python 后端需要真实 server 环境。

呢类场景,Zeabur 系最直接嘅升级路径。 HK 节点、支援所有语言、一键连 DB、Git 自动部署,同 Cloudflare Pages 嘅工作流一脉相承,切换成本低。

一个典型架构系:静态前端继续放 Cloudflare Pages(免费、全球极速),后端 API 和资料库放 Zeabur(HK 节点、低延迟),两者各司其职,成本最优。


常见问题

Q:Cloudflare Pages 支援 Next.js App Router 吗?
A:部分支援。Next.js 静态导出(output: 'export')完全支援;但 Server Components、Server Actions、App Router 嘅动态功能唔支援,因为 Pages 系静态平台。需要完整 Next.js 功能建议用 Vercel 或 Zeabur。

Q:免费计划可以用几多个网站?
A:Cloudflare Pages 免费计划唔限制项目数量,可以建立多个独立嘅 Pages 项目。但同一时间 Concurrent Build 只有 1 个。

Q:Cloudflare Pages 的 SSL 凭证需要付费吗?
A:完全免费。包括自定义域名的 SSL 凭证,自动续期,唔需要任何操作。

Q:Pages 适合做电商吗?
A:静态电商(例如 Shopify Hydrogen 静态模式、或者前端静态 + 第三方支付 API)可以用 Pages。但如果需要自建后台、管理库存、处理订单逻辑,需要后端服务配合。纯展示型目录电商系合适的。


💡 读者限时优惠

输入优惠码 zeabur10 结帐即享 10% 折扣。Starter Plan 另有每月 $5 免费 credits,轻量 side project 零成本试用。优惠码长期有效,但随时可能更改。

👉 免费开始使用 Zeabur · 优惠码 zeabur10 →

正文完
 0
bdspAdmin
版权声明:本站原创文章,由 bdspAdmin 于2026-07-16发表,共计3835字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)