零基础教程：使用 Cloudflare Pages 搭建免费静态网站

如今搭建个人网站的成本越来越低，甚至完全免费。Cloudflare Pages 就是一个优秀的静态网站托管服务，它不仅速度快、自带全球 CDN，还能与 GitHub 仓库直接联动，实现推送代码自动部署。本教程将手把手教你从零开始，搭建属于自己的静态网站。

准备工作

一个 Cloudflare 账户（没有的话去 cloudflare.com 免费注册）
一个 GitHub / GitLab 账户
你的静态网站文件（HTML/CSS/JS），或使用生成器（如 Hugo、Next.js 等）

第一步：将网站代码上传到 Git 仓库

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的网站</title>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>

由 Cloudflare Pages 强力驱动。

</body>
</html>

提交并推送到 GitHub。

第二步：在 Cloudflare Pages 中创建项目

登录 Cloudflare 控制台，在左侧菜单中点击 Pages。
点击 创建项目 -> 连接到 Git。
授权 Cloudflare 访问你的 GitHub 账户，并选择刚才创建的仓库 my-website。
点击 开始设置。

第三步：配置构建设置

项目名称：可以自定义，会生成 <项目名>.pages.dev 的子域名。
生产分支：一般选 main 或 master。
构建命令：如果你的网站是纯静态（不需要编译），可以不填；若是 Hugo 等生成器，则填写对应的构建命令，如 hugo。
构建输出目录：纯静态网站留空或填写 /；生成器则填写输出目录，如 public。

完成后点击 保存并部署。

第四步：等待部署

Cloudflare 会自动拉取你的代码，并根据配置进行构建和部署。完成后会得到一个类似 my-website.pages.dev 的网址，打开即可看到你的网站。

现在，每次你推送新代码到 GitHub，Cloudflare Pages 都会自动重新部署，非常方便。

第五步（可选）：绑定自定义域名

如果你有自己的域名，可以在 Cloudflare Pages 项目的 自定义域 选项卡中添加。

输入你的域名（如 www.example.com）。
按照指引修改 DNS 记录（通常在 Cloudflare 管理的域名中会自动配置 CNAME 记录）。
等待 SSL 证书自动签发，即可通过自己的域名访问。

常见问题

问：Cloudflare Pages 免费吗？
答：免费版包含无限站点、无限请求、无限带宽，单文件大小限制 25 MiB，完全满足个人和小型项目。

问：支持哪些框架？
答：支持所有能生成静态文件的框架，如 React（create-react-app）、Vue（Vite）、Hugo、Jekyll、Next.js 静态导出等。

问：可以部署动态网站吗？
答：Pages 仅托管静态资源，但你可以结合 Cloudflare Workers 实现后端逻辑。

结语

通过 Cloudflare Pages，你可以在几分钟内上线一个高性能、免费托管的静态网站。它的自动部署和全球 CDN 让维护变得极其简单，非常适合个人博客、作品集、项目文档等场景。赶快去试试吧！