零成本搭一个个人网站：Cloudflare Pages + 纯静态，不花一分钱

为什么选纯静态

个人网站 90% 的场景——写文章、放工具、做介绍页——根本用不上后端和数据库。纯静态站没有服务器可攻击、不用维护、速度飞快，托管还基本免费。你现在看的这个站，就是纯静态的：所有页面都是写好的 HTML 文件，浏览器直接打开，后台没有任何程序在运行。

成本：几乎为零

传统方案里，一台云服务器一年少说几百块，还得自己装环境、打补丁、防入侵。纯静态方案里，代码托管用 GitHub 的免费额度，托管用 Cloudflare Pages 的免费计划：每月数百次构建、不限带宽和请求次数，对个人博客来说根本用不完。唯一可能的花费是域名，一个 .xyz 或 .top 的便宜域名一年也就几块钱，和一杯奶茶差不多。

安全：攻击面几乎为零

没有后端程序、没有数据库、没有登录接口，黑客就没有可攻击的代码。纯静态站不接收用户输入，SQL 注入、命令注入这类经典漏洞在架构上就不存在。你真正需要保护的是域名和托管账号本身，做好两件事就能大幅降低风险：账号开启两步验证、域名开启转移锁定。

速度：全球 CDN 直达

Cloudflare 在全球有几百个边缘节点。文件部署上去后，访客会从离自己最近的节点拿到内容，再加上 HTTP/3 和自动压缩，页面首屏几乎瞬时加载。相比之下，一台单机服务器无论放在哪个机房，都有一半地球的访客要绕远路。

对比项	纯静态站	传统服务器
年成本	域名费（几元到几十元）	服务器几百到几千元
维护	基本零维护	装环境、打补丁、防攻击
速度	全球 CDN 就近分发	取决于机房位置
安全性	无后端，攻击面极小	需要长期防护投入
适合场景	博客、文档、工具站	商城、社区、复杂业务

那什么时候不该选纯静态？需要用户登录、需要写数据库、需要实时消息，或者有必须藏在服务端的逻辑时，静态方案就不够了。这种场景可以先用 Cloudflare 的 Functions 补充，以后再迁移也不迟。

Cloudflare Pages 部署：完整步骤

第一步：把文件放进 Git 仓库

先在 GitHub 上新建一个仓库，然后把站点文件提交进去。以命令行方式为例，在站点目录里执行：

git init
git add .
git commit -m "init: 我的个人网站"
git branch -M main
git remote add origin https://github.com/你的用户名/你的仓库.git
git push -u origin main

不会命令行的朋友也没关系：GitHub 网页端有“上传文件”入口，把 HTML、CSS、JS 直接拖进去提交，效果一样。

第二步：关联项目

打开 Cloudflare 控制台，进入 Workers & Pages，点 Create application，选 Pages 下的 Connect to Git。按提示授权你的 GitHub 账号，选择刚才那个仓库，点击开始部署。Cloudflare 会自动读取分支，默认把 main 分支作为生产分支——也就是说，以后每次 git push 到 main，它都会自动重新构建并发布。

第三步：构建命令与输出目录

纯静态站不需要构建：构建命令留空，输出目录也留空，Cloudflare 会直接发布仓库根目录的文件。只有两种情况需要填写：

• 文件放在子目录里（比如 docs/），输出目录填 docs；
• 使用了静态站点生成器（Hugo、Astro 等），构建命令填 npm run build 之类的命令，输出目录填生成结果的目录（通常是 dist）。

常见报错与排查

• Build failed：点开构建日志，绝大多数是路径或命令写错，按日志提示修改即可；
• No output directory detected / 全部 404：输出目录填错或大小写不对，注意目录名必须与仓库里完全一致；
• 单页应用刷新 404：用 _redirects 加一条 200 回退规则，见下文；
• 单个文件超过 25MB：Pages 对单文件大小有限制，大文件请压缩，或改用对象存储（如 Cloudflare R2）外链；
• push 后没有触发构建：确认推送的分支与项目配置的生产分支一致，也可以在控制台手动 Deploy。

自定义域名与 HTTPS

绑定自定义域名

部署完成后，Cloudflare 会先给你一个 xxx.pages.dev 的免费二级域名，马上就能访问。想要自己的域名，在项目设置里进入 Custom domains，添加你的域名，然后按提示到域名服务商处加一条 CNAME 记录，把域名指向你的 xxx.pages.dev 地址。如果域名本身就托管在 Cloudflare，直接在后台选择即可，连 DNS 记录都会自动配上。

HTTPS：自动签发、自动续期

证书是很多人最担心的一步，但 Cloudflare Pages 把这件事彻底隐藏了：证书自动签发、自动续期，全程免费，你什么都不用做。绑好域名后等几分钟，状态变成 Active 就说明证书就绪。建议再在 Cloudflare 的 SSL/TLS 设置里打开 Always Use HTTPS，把 HTTP 请求统一 301 跳转到 HTTPS，避免搜索引擎收录两套地址、权重被分散。

一个小提醒：Cloudflare 免费版的边缘节点主要面向海外用户，中国大陆访问时好时坏。如果主要读者在国内，可能需要备案并选择国内托管，这是另一个话题，但做站之前值得先想清楚你的读者在哪里。

让 Google 收录的完整清单

网站建好只是第一步，接下来要让搜索引擎知道你、理解你。下面这几样东西逐条配齐，收录基本就稳了。

sitemap.xml：给搜索引擎一张地图

sitemap 是一个 XML 文件，列出你所有页面的地址和最后修改时间，帮助爬虫快速发现内容。把它放在网站根目录，典型内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-07-18</lastmod>
  </url>
  <url>
    <loc>https://example.com/posts/build-static-site.html</loc>
    <lastmod>2026-07-18</lastmod>
  </url>
</urlset>

robots.txt：告诉爬虫怎么走

robots.txt 控制爬虫的抓取范围。个人网站通常全部放行，并在这里声明 sitemap 的位置：

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml

canonical：防止重复内容

同一篇文章可能通过多个地址访问（带不带 www、带不带参数），搜索引擎会把它们当成多份内容。每个页面在 head 里声明唯一的 canonical 地址，告诉 Google“这才是正版”，权重就不会分散。本页的 canonical 就在 head 里，指向 https://727306.xyz/posts/build-static-site.html。

JSON-LD 结构化数据：争取富结果

结构化数据让搜索引擎理解页面的“类型”。文章页加一段 BlogPosting 的 JSON-LD，写清标题、作者、发布时间，就有机会在搜索结果里获得更丰富的展示。本站每篇文章的 head 里都嵌了这样一段，你可以打开本页源代码直接参考。

_headers 与 _redirects：两个容易被忽略的文件

_redirects 负责 URL 映射：把无后缀的地址 301 到带 .html 的真实文件、把老地址指到新地址、给单页应用配 200 回退。没有它，搜索引擎会抓到一堆 404，收录质量直接打折：

/build-static-site /posts/build-static-site.html 301
/* /index.html 200

_headers 负责给页面附加响应头：安全相关的头（如 X-Frame-Options）、缓存策略（见下一节），甚至可以用 X-Robots-Tag 单独控制某个页面是否收录：

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff

提交给 Google：最后一步

以上文件就位后，去 Google Search Console 添加你的站点，验证所有权（推荐 DNS TXT 记录或 HTML 文件两种方式），然后在 Sitemaps 里提交 sitemap.xml。之后可以用“网址检查”工具对首页请求一次编入索引。新站通常需要几天到几周才会逐步收录，期间持续更新内容即可。

性能与缓存优化

静态站天生就快，但还能更快。Cloudflare 已经替你做了全球 CDN 分发、HTTP/3 和自动压缩，剩下的主要是缓存策略和资源体积。

用 _headers 定好缓存策略

原则很简单：内容不会变的资源缓存久一点，内容会变的页面少缓存或不缓存。CSS、JS、图片这类带版本号或哈希的文件，可以放心缓存一年：

/assets/*
  Cache-Control: public, max-age=31536000, immutable

而 HTML 页面不要长缓存，否则你更新文章后，读者看到的还是旧版。本站的做法是给 CSS/JS 链接手动加版本号参数（比如 main.css?v=20260817），改一次版本号就强制刷新一次缓存，简单可靠。

图片与资源瘦身

• 图片转成 WebP 或 AVIF 格式，体积通常还能再小一半以上；
• 给正文图片加 loading="lazy"，滚动到才加载；
• 少引第三方脚本和字体，一个统计脚本就够，别装一堆；
• 改完后用 PageSpeed Insights 或 Lighthouse 测一下，看着分数一点点变绿很有成就感。

想接广告，先过这几关

以 Google AdSense 为例。很多人以为审核看流量，其实恰恰相反——AdSense 审核看的是内容质量和合规程度，新站流量为零也能通过，前提是满足下面这些硬门槛。

内容门槛：原创且有实质价值

页面要有足够的原创文字，能真正回答读者的问题。薄内容（几句话的页面）、机器翻译、搬运聚合的内容基本都会被拒。这是最花时间的一关，也是最重要的一关：内容扎实，广告收入才有意义。

页面门槛：该有的页面一个不能少

关于页、联系方式、隐私政策几乎是必备项。站点要交代清楚“我是谁、怎么联系我、我怎么处理你的数据”，这既是 AdSense 的要求，也是对访客的基本尊重。本站的关于本站和隐私政策页面就是为此准备的。如果你的页面会投放广告或使用 Cookie，还需要有对应的 Cookie 说明。

合规门槛：红线不能碰

不能有侵权内容（图片、字体、音乐都要注意版权），不能有成人、赌博、破解、医疗夸大等违规内容，广告位不能遮挡正文，也不能诱导点击（比如“点这里支持站长”这类文案）。另外还需要完成收款设置和税务信息（不同国家和地区要求不同），审核通过后广告代码才能生效。

所以逻辑是反过来的：先把内容做扎实、把页面补全，广告是水到渠成的事，而不是反过来。

常见问题

静态站能放评论区吗？

能，而且不用自己写后端。可以用基于 GitHub 的评论系统（如 giscus、utterances），读者用 GitHub 账号登录留言，数据存在仓库里；也可以用表单服务（如 Formspree）接收留言，再手动展示。

不想用 GitHub 可以吗？

可以。Cloudflare Pages 支持关联 GitHub 和 GitLab；连 Git 都不想用的话，还有 Direct Upload 和 wrangler 命令行两种方式，直接把本地文件夹上传部署。

以后想加后端功能怎么办？

Pages 自带 Functions 功能（和 Cloudflare Workers 同一套技术），可以处理表单提交、API 转发、简单鉴权等需求，不需要额外买服务器。等业务复杂到一定程度，再考虑换动态方案。

每篇都手写 HTML 太累了？

引入静态站点生成器（Hugo、Astro、Hexo 都行），用 Markdown 写文章，本地一条命令生成 HTML，再 push 到仓库，部署流程完全不变。

国内访问慢怎么办？

Cloudflare 免费版的大陆线路时好时坏。如果主要读者在国内，通常需要域名备案并改用国内托管；如果读者主要在海外，保持现状即可。

小结：照着这个清单做就完了

1. 把内容整理成 HTML，放进 Git 仓库并 push；
2. 关联 Cloudflare Pages，设置构建与输出目录，部署上线；
3. 绑定自定义域名，开启 HTTPS 强制跳转；
4. 写好 sitemap、robots、canonical、JSON-LD，在 Search Console 提交；
5. 用 _headers 配好缓存，图片压缩、懒加载；
6. 补全关于页和隐私政策，内容做扎实后再申请 AdSense。

上面这套流程，这个站每一步都走过一遍——纯静态、Cloudflare Pages、无后端、无数据库，工具全部在浏览器本地运行。折腾的过程本身也写进了博客（比如 DeepSeek Harness 上手）。把清单里的事一件件做完，你的站点也能在一周内上线，祝顺利。