用 Cloudflare Pages 让网站免费上线

写完一个网站，最容易卡住的地方不是代码，而是「怎么让别人在浏览器里看到它」。 Cloudflare Pages 把这个环节变得非常简单：把文件传上去，它自动帮你分发到全球节点，自动配置 HTTPS，还免费提供 *.pages.dev 域名。

免费额度足够个人博客使用：每月 500 次构建、无限静态请求、无限带宽，且不限制站点数量。

为什么是 Cloudflare Pages

零服务器：不需要买云主机、不需要运维，也不用担心被攻击。
全球加速：内容会被缓存到离访客最近的边缘节点，国内访问速度尚可。
自动 HTTPS：证书自动签发和续期，无需手动操作。
Git 自动化：连接仓库后，每次提交代码都会自动重新部署。
够用免费：个人博客、作品集、文档站完全不需要付费。

开始之前：准备好两样东西

一个 Cloudflare 账号（用邮箱注册即可，免费）。
你的网站文件，至少包含一个 index.html。

注意：Cloudflare Pages 托管的是静态文件。如果你用的是纯 HTML/CSS/JS 站点，直接上传就行；如果用了框架（Astro、Vue、Next.js 等），需要告诉它构建命令，例如 npm run build，输出目录通常是 dist。

方式一：网页直接上传（最快，适合新手）

登录 Cloudflare 控制台。
左侧菜单找到 Workers & Pages，点击 Create application。
选择 Pages 标签页，点击 Upload assets（上传资源）。
给项目起个名字，例如 my-blog。这个名字会决定你的默认网址：my-blog.pages.dev。
把整个网站文件夹直接拖进上传区域，或在文件选择器中选中所有文件。
点击 Deploy site，等待十几秒，网站就上线了。

小技巧：拖拽上传时，请把 index.html、css/、js/ 等内容一起选中上传，而不是把外层文件夹名也带进去，否则首页可能打不开。

方式二：连接 Git 仓库（推荐长期维护）

这种方式的好处是：以后只要改代码并推送，网站会自动更新。

先把网站代码上传到 GitHub 或 GitLab 仓库。
在 Pages 中点击 Connect to Git，授权你的代码托管平台。
选择仓库，并设置：
- Framework preset：纯静态站点选 None。
- Build command：纯静态站点留空。
- Build output directory：填 /（或框架的 dist）。
点击 Save and Deploy。每次推送到主分支都会自动部署，其他分支会生成预览地址。

方式三：命令行部署（适合进阶）

安装 Wrangler 工具后，一行命令即可发布：

# 1. 安装 Cloudflare 官方命令行工具
npm install -g wrangler

# 2. 登录（会打开浏览器授权）
wrangler login

# 3. 进入网站目录，部署到名为 my-blog 的项目
cd my-blog
wrangler pages deploy . --project-name=my-blog

绑定自己的域名

my-blog.pages.dev 可以长期使用，但如果你想用自己的域名，在 Pages 项目页点击 Custom domains → Set up a custom domain，输入域名后按提示操作即可。

域名在哪里	要做什么
已托管在 Cloudflare	自动完成 DNS 配置，等待几十秒即可生效。
在其他注册商	按其提示添加一条 CNAME 记录，指向 `your-project.pages.dev`。

证书会自动签发，通常几分钟内就能用 https:// 正常访问。

让网站更专业的小文件

把下面这些文件放在网站根目录，Cloudflare Pages 会自动识别：

# _redirects —— 设置跳转规则
/old-page  /new-page  301

# _headers —— 自定义响应头
/*
  X-Frame-Options: SAMEORIGIN
  Referrer-Policy: strict-origin-when-cross-origin

404.html：自定义找不到页面时的提示页。
robots.txt：告诉搜索引擎哪些可以被收录。
sitemap.xml：让搜索引擎更快发现你的文章。

新手常见问题

1. 上传后打开是空白页？

多半是目录层级错了。index.html 必须在部署的根目录里，而不是在某一层子文件夹中。

2. 改了文件但页面没变化？

先强制刷新（Windows 用 Ctrl + F5）。如果还不行，检查是否重新部署了最新版本。

3. 中文显示成乱码？

确认 HTML 的 <head> 里有 <meta charset="utf-8">，并且文件本身保存为 UTF-8 编码。

4. 部署历史能回滚吗？

可以。在项目的 Deployments 列表里，找到之前的版本，选择回滚即可。

下一步

网站上线之后，建议按这个顺序继续完善：绑定域名 → 添加站点地图并提交给搜索引擎 → 接入统计工具 → 保持更新。内容才是博客真正的护城河。