零成本起步 · 5 分钟阅读

零成本上线网站:Cloudflare Pages 注册到部署图文全流程

手把手演示用 Cloudflare Pages + GitHub 在十分钟内零成本上线一个 HTTPS 网站,并对比 Vercel、GitHub Pages 的免费额度差异与选型建议。

为什么 OPC 第一站选它

一人公司验证想法,最怕的不是失败,是在没流量的时候先背上月费。Cloudflare Pages 提供全托管的静态站点服务,构建分钟数、带宽、请求量对个人项目基本等于无限,还附赠全球 CDN、自动 HTTPS 与预览部署,完全覆盖内容站、文档站、落地页的需求。

三大免费托管横向对比:

能力Cloudflare PagesVercelGitHub Pages
带宽/请求不限免费档有额度上限不限(软限制)
CDN 节点自建全球网络全球(国内访问一般)仅 Fastly 单点
每次推送预览 URL支持支持不支持
自定义域名 HTTPS自动签发自动签发需配置
构建环境限制宽松宽松仅支持静态、构建弱
Serverless 函数Pages Functions / WorkersServerless Functions无

结论:面向 Google 拿流量的内容站,首选 Cloudflare Pages;重度依赖 Next.js 新特性、或团队都在 Vercel 生态里,再考虑 Vercel;纯文档托管可以用 GitHub Pages。

前置准备

  1. 一个 GitHub 账号,并把网站代码推到仓库(Public / Private 均可);
  2. 一个 Cloudflare 账号,用邮箱免费注册即可,不需要信用卡;
  3. 本地网站能跑通 npm run build,产物目录确认为 dist。

部署步骤

第一步:在 Cloudflare 连接 GitHub

登录 Cloudflare 控制台,进入 Workers & Pages → Create → Pages → Connect to Git,授权 Cloudflare 访问你的 GitHub 仓库。担心权限过大的话,在 GitHub 授权页选择「只允许访问选定仓库」即可。

第二步:填写构建配置

以本站使用的 Astro 为例:

配置项填写内容
Project name会成为 <项目名>.pages.dev 的子域名,想好再填
Framework presetAstro
Build commandnpm run build
Build output directorydist
环境变量NODE_VERSION = 20(或更高)

点击 Save and Deploy,Cloudflare 会拉取代码、安装依赖、构建并分发到边缘节点,通常 1–2 分钟完成。

第三步:验证与预览

部署完成后会得到两个地址:

  • 生产地址 https://<项目名>.pages.dev,已自带 HTTPS;
  • 以后每个分支 / 每次推送都会生成独立预览地址,改改版式可以先自己看再合并。

第四步:绑定自有域名(可选但推荐)

在 Pages 项目里进入 Custom domains → Set up a custom domain,输入域名后按提示在 Cloudflare DNS 托管(域名如果在 Namecheap 等注册商买的,只需把 NS 改为 Cloudflare 分配的两个地址,域名注册与解析教程里有完整流程)。证书全自动签发与续期。

注意:换绑正式域名后,记得同步修改项目里 astro.config.mjs 的 site 字段,否则 sitemap 和 RSS 里还是旧的 pages.dev 地址。

新手最常踩的三个坑

  • 构建失败:Node 版本太老。 Astro 5 要求 Node 18.17+,务必在环境变量里锁定 NODE_VERSION。
  • 页面 404:输出目录填错。 Astro 的产物目录是 dist,不是 build 或 public。
  • 中文路径乱码。 文件名与 URL 一律用英文小写,中文只出现在标题和正文里。

关于国内访问的一句实话

.pages.dev 在国内的访问质量不稳定,Cloudflare 节点也存在被运营商干扰的可能。面向海外 Google 流量做内容站,这个方案零成本且体验优秀;如果目标读者明确在中国大陆且要做经营性服务,需要走国内云服务器