我用 Cloudflare Pages 搭了个博客：0 元、带自己的域名，做过的项目源码全放上去了

最近有朋友留言说，视频里一闪而过的代码根本来不及抄，文章里的命令也是东一段西一段，想要完整的项目代码。说得对。所以我干脆给正切AI实验室搭了一个博客，地址是 https://blog.tangentlab.kdns.fr，以后每个项目做完，源码都放在上面。

先说结论：一个静态博客用 Cloudflare Pages 托管，从生成页面到绑上自己的域名，全程 0 元，跟着做大概一个小时。我的做法是用一个不到 400 行、零依赖的 Python 脚本把 Markdown 生成网页，打包成 zip，在 Cloudflare 后台「直接上传」，再绑定子域名 blog。这个博客本身也是开源项目，你可以直接下载它的源码，换成自己的内容就能用。

这篇按顺序讲六件事：博客里有什么、准备工作、生成网页、上传到 Pages、绑定域名、几个容易踩的坑。

1. 这个博客里有什么

博客一共四个栏目：

首页：最新文章、开源项目和接下来要做的选题；
文章：公众号发过的实操长文，图都在，命令和配置都能复制；
项目开源：视频和文章里做过的每个项目，每个文件都有完整代码块，右上角一键复制，也能整包下载 zip；
关于：这个号是做什么的、开源协议。

2. 准备工作：域名先接入 Cloudflare

Pages 本身给你一个免费的 项目名.pages.dev 地址，但有个现实问题：pages.dev 在国内经常打不开。所以一定要绑定自己的域名。

我用的是前几篇文章里拿到的免费域名 tangentlab.kdns.fr，它已经接入 Cloudflare，状态是 Active。还没接入的朋友，翻一下前面那两篇：一篇讲怎么 0 元拿域名，一篇讲怎么接入 Cloudflare。

不确定有没有生效的话，用项目包里的 check-ns.sh 查一下。两个 NS 结尾都是 ns.cloudflare.com，就说明解析已经交给 Cloudflare 了。

bash

cd cf-domain-toolkit
./check-ns.sh tangentlab.kdns.fr

另外你需要一台装了 Python 3 的电脑，Linux、macOS 都行，Windows 用 WSL 也可以。Pillow 是可选的，装了会把配图自动转成更小的 WebP。

3. 生成网页：一条命令出 dist

网站的结构很简单：文章放在 content/posts/文章名/ 下，里面一个 article.md、一个 meta.txt（标题和摘要）、一个 images 文件夹；项目源码放在 projects/项目名/ 下。

bash

pip install pillow
python3 build.py
python3 -m http.server -d dist 8000   # 浏览器打开 http://localhost:8000 预览

build.py 做了这几件事：把 Markdown 转成网页，给每个代码块加上「复制」按钮，把每个项目的每个文件生成一个可复制的代码块，再把项目打包成 zip 放进 downloads/，最后生成 RSS 和 sitemap。

python3 build.py 生成 dist，index.html 在最外层

我还在 public/_headers 里写了几行配置。Cloudflare Pages 会读取根目录下的这个文件，给响应加上安全头和缓存规则：静态资源缓存一天，图片缓存一周，zip 强制下载。这一步不是必须的，但加上之后网站更安全，也更省流量。

页面动效用的是 GSAP，就是很多官网滚动时文字逐个浮现的那种效果。GSAP 现在完全免费，商用也可以。我按 GreenSock 官方给 AI 写的 GSAP skill 来写动画：只动 transform 和透明度，用 matchMedia 照顾开启了「减少动态效果」的用户，用 ScrollTrigger.batch 让卡片滚到视野里再出现。首页右边那条曲线上会跑一个点，橙色的线是它的切线，也就是「正切」。

加载方面，先从国内的 npmmirror 加载，失败了换 jsDelivr，再失败就用网站自带的备份。三个都加载不了的话，4 秒后内容直接显示，只是没有动画，不影响阅读。

4. 上传前先扫一遍隐私信息

这一步千万别省。源码是从我自己的电脑里收集的，里面难免有本机路径、测试用的 IP、隧道 ID 这类东西。所以我写了个 scan-secrets.sh：把 dist 和所有 zip 解开，逐个查邮箱、IP、32 位十六进制 ID（Cloudflare 的账号 ID 就是这个格式）、API Token、Cookie 和本机绝对路径。只允许 example.com、127.0.0.1 和文档专用的示例 IP 段，全部显示 ✅ 才能打包。

bash

./scan-secrets.sh

然后打包。注意要进到 dist 里面再压缩，保证 index.html 在 zip 的最外层。直接压 dist 文件夹的话，网站会多一层目录，打开就是 404。

bash

cd dist && zip -qr ../dist.zip . && cd ..
unzip -l dist.zip | head

5. 上传到 Cloudflare Pages

左侧菜单进入「Workers 和 Pages」，点「创建应用程序」，找到 Pages 的入口点「开始使用」，选「拖放文件」（官方叫 Direct Upload，直接上传）；
项目名称填 tangentlab-blog，这个名字决定了默认地址 tangentlab-blog.pages.dev，点「创建项目」；
把 dist.zip 拖进上传框，等文件列表出来，点「部署站点」；
几秒后显示部署成功，给出 pages.dev 地址。

官方文档写的限制是：后台拖放上传最多 1000 个文件，单个文件不超过 25 MiB，我这个博客才 50 多个文件，完全够用。有两点要提前知道。第一，用直接上传创建的项目，以后不能改成连接 Git 仓库自动部署。第二，后台拖放不会编译 functions 文件夹，以后要加评论区这类后端功能，得用命令行部署。命令行和拖放在同一个项目里可以混着用：

bash

npx wrangler pages deploy dist --project-name tangentlab-blog

命令行部署要先 npx wrangler login 授权，或者准备一个有 Cloudflare Pages 编辑权限的 API Token，放在环境变量 CLOUDFLARE_API_TOKEN 里。Token 就是钥匙，别贴进仓库，也别截图发群。

6. 绑定自己的域名 blog.tangentlab.kdns.fr

进入刚建好的项目，打开「自定义域」标签页：

点「设置自定义域」，输入 blog.tangentlab.kdns.fr，点继续；
因为域名就在同一个 Cloudflare 账号里，它会自动生成一条 CNAME：blog 指向 tangentlab-blog.pages.dev，并且开着代理（小橙云），点「激活域」；
等状态从「正在验证」变成「活动」，SSL 证书也会自动签发，一般几分钟就好。

最后在终端验证一下。看到 HTTP/2 200 和 server: cloudflare，就说明网站已经上线，而且是通过 Cloudflare 访问的：

bash

curl -sI https://blog.tangentlab.kdns.fr | head -5

注意，只在 DNS 里手动加 CNAME 是不够的，一定要在 Pages 的「自定义域」里添加。不然 Pages 不认这个域名，打开会报 522 之类的错误。

7. 上线之后的样子

电脑上打开，首页是深色的大标题区，右边是那条带切线的曲线，往下是最新文章和开源项目。

手机上会自动变成单栏，导航收进右上角的菜单按钮，代码块可以左右滑动。

文章列表按时间倒序排列，每篇都有封面、标签和摘要。

「项目开源」是我最想让大家用起来的部分。每个项目一张卡片，写清楚用到的技术、几个文件、多少行代码。

点进项目，左边是说明和全部源码，右边是文件目录和「下载源码 zip」按钮。

每个代码块右上角都有「复制」按钮，点一下就复制好，按钮会变成绿色的「已复制 ✓」。超过 60 行的长文件默认折叠，点「展开全部」才显示完整内容，复制时永远是完整代码。

我也专门测了国内网络的情况：把 npmmirror 和 jsDelivr 都屏蔽，GSAP 会自动从网站自带的备份加载；三个来源全部屏蔽，页面照样正常显示。

8. 几个容易踩的坑

pages.dev 国内打不开：不是你部署失败，绑定自己的域名就好。就算绑了域名，免费版走的也是海外节点，国内速度时快时慢，图片尽量压小。
zip 多了一层目录：要进到 dist 里面再压缩。
只加 CNAME 不加自定义域：会报 522，一定要在 Pages 里添加。
CDN 加载失败：页面不能依赖 CDN 才显示，动画只是锦上添花。
源码里的隐私信息：发布前跑一遍扫描脚本，比事后删帖强得多。

接下来我会在这个博客上继续加功能，下一个是用 Pages Functions 和 D1 给它加评论区，不用任何第三方服务。之后视频和文章里做的每个项目，源码都会第一时间放到 blog.tangentlab.kdns.fr。你想先看哪个项目，留言告诉我。

好啦，就写到这里，喜欢的朋友点个赞，谢谢。