13.AI 学习之路 · 实战篇之「个人站点系列：从 0 到 1 做品牌站--想清楚、盖出来、免费上线」

📚 系列导航：上一篇 [12.网页到底是个啥] 带你搞懂了网页原理、还克隆了一个站练手。这一篇是个人站点系列的收官--从 0 到 1 做你自己的品牌站，并且免费挂到全世界都能访问的网上。

兄弟们，今天这篇是个人站点系列的收官--从一张白纸开始，做出属于你自己的品牌站，再把它挂上网，全程不写一行代码，托管还免费。

上一篇结尾说了，克隆来的终究是别人的壳。做自己的站，最大的活不是写代码--代码 AI 全包了--是把你自己想清楚：你是谁、想让世界怎么记住你。这事 AI 替不了你，也正是这篇要带你走的第一步。

另外，今天还会把一家宝藏公司给你科普明白：Cloudflare，江湖人称「赛博菩萨」。你的站上线、加速、防护、域名，它一家全包，而且个人用基本不要钱。我的 stormzhang.ai 就跑在它上面，怎么跑的，全程实录给你看。

看完这一篇，你会拿到：

• 一份 10 分钟能填完的品牌站「图纸」模板（DESIGN.md）

• 一套「分阶段派活 + 每步验收」的指挥 AI 流程，含我自己踩过的两个真坑

• 一张 Cloudflare 功能地图--搞懂这位「赛博菩萨」到底免费给你什么

• 我的 stormzhang.ai 从盖楼到上线的全程实录

01 先破个误区：个人站不需要架构设计

肯定有人要问：跟完知识库实战篇，做个人站是不是也得先画架构图、理「进存取」？

不用。08 讲的架构思维，是给「有数据流的系统」准备的--数据从哪进、存哪、怎么取，那是盖大楼。而个人品牌站是纯静态页：没数据库、没用户系统、没后台，12 讲过，它就是一堆代码文件。

类比：做知识库是盖大楼，做个人站是装修一间屋。 装修不用打地基、不用画结构图，但你得想清楚：住这屋的人是谁、客人进门第一眼该看到什么。

所以这篇不聊架构，就三件事：想清楚（画图纸）→ 盖出来（分阶段）→ 挂上网（Cloudflare）。

💡 一句话总结：纯静态站不用架构设计；要想清楚的不是系统，是你自己。

02 想清楚：三个问题定义你的站

动手前，拿张纸回答三个问题：

1. 你是干啥的？ 一句话身份，将来就放在首屏最显眼的位置

2. 你想让来的人记住什么？ 一个标签就够--人家关掉页面三天后还能想起来的那个词

3. 你想让他干什么？ 看你的作品？关注你的公众号？还是记住你的名字？

拿我自己的站给你对答案。stormzhang.ai 的三个答案是：身份--「前程序员 & 产品人，AI Builder」（这就是首屏标语的原文）；标签--「All in AI 的人」；行动--看「我在做什么」板块。至于视觉往哪个方向走，我的灵感来自一场线下大会「仰望星空，脚踏实地」的视觉风格--所以整个站是宇宙星空主题，配一个转动的点阵地球。

别小看这三问。你站上的每一块内容，都是从这三个答案里长出来的：首屏放身份、中间板块支撑标签、末尾引导行动。答案没想清楚就开工，AI 盖得再快，盖出来的也是一间不知道给谁住的屋。

💡 一句话总结：一句话身份 + 一个标签 + 一个行动，站上每块内容都从这三个答案长出来。

03 画图纸：写一份 AI 看得懂的 DESIGN.md

三个答案有了，别急着让 AI 开工--先把它们写成一份文档，业内习惯叫 DESIGN.md（设计文档）。这就是你的装修图纸，AI 照着干才不跑偏。

写给 AI 看的图纸，有三条规矩：

规矩一：要数值，不要形容词。「科技感的青色」AI 只能瞎猜，「主色 #38f9d7」它闭眼执行。我的图纸里连首屏大字的字号都写死了--clamp(40px, 8vw, 80px)，意思是最小 40、最大 80、中间跟着屏幕宽度缩放。你不用会写这个，让 AI 帮你把「想要的效果」翻译成数值，再存进图纸就行。

规矩二：写死技术约束。「纯 HTML / CSS / JS，不用框架，不上数据库」这句必须写进去。不然 AI 一热情，给你上一套专业前端工程，文件多到你不敢碰。

规矩三：给验收尺子。 每一块写清楚「做到什么样算过」--比如「首屏 3 秒内能看明白我是谁」「手机打开不乱」。有尺子，你才验得了收。

一份普通人够用的极简图纸，长这样：

# 我的站 DESIGN.md

## 我是谁：____（一句话身份，放首屏）
## 访客要记住：____（一个标签）
## 访客该干什么：____（看作品 / 关注公众号 / 记住名字）

## 板块：首屏 → 关于我 → 我在做什么 → 联系方式
## 视觉：背景色 #____、主色 #____、标题字体 ____
## 技术：纯 HTML / CSS / JS，不用框架，手机上也要能看
## 验收：首屏 3 秒知道我是谁；手机打开不乱；配色跟图纸一致

填不出来也有办法：把这个模板直接丢给 Claude Code，说「一项项问我，问完帮我填好」--让 AI 反向访谈你，比自己憋快得多。

💡 一句话总结：图纸三规矩--给数值、锁技术、留验收尺子。

04 盖楼：分阶段派活，每步验收

图纸交给 AI，怎么派活有讲究。最容易犯的错是一句「照图纸全做完」--AI 一口气全盖完，出了错你都不知道错在哪层。

正确姿势是像包工头一样分阶段派活：

1. 先搭骨架和首屏--验收：打开浏览器，色值、字号对不对图纸

2. 一块块铺板块--「关于我」铺完看一眼，再铺「我在做什么」

3. 一个个加动效--加一个看一个，别一次全加

4. 收尾--细节打磨

每步验收就一个动作：打开浏览器看一眼，对得上图纸再往下。

这套流程不是理论，是坑里总结出来的。盖 stormzhang.ai 时我踩过两个坑，都出在动效阶段：

坑一：第三方库。 我想要个转动的点阵地球，AI 说得用一个叫 cobe 的开源库。第一版它直接从网上引用这个库--结果加载时不时抽风，地球时有时无。最后让 AI 把这个库下载进我自己的站里（自托管），才彻底稳了。教训：站里引用的外部东西越少越稳。

坑二：画布尺寸。 地球是画在一块「画布」上的，AI 第一版忘了给画布写死尺寸，页面一缩放地球就变形消失。我把现象原样甩给它--「地球在手机上没了」--它自己定位到问题，给画布补上了明确的宽高。

两个坑的共同解法你也看到了：出岔子别慌，把看到的现象原样描述给 AI，它多数能自己修；实在修不好，退回上一个能跑的版本重来。

💡 一句话总结：分四步派活、每步开浏览器验收；出岔子把现象原样甩给 AI。

05 隐形功课：让站看起来「正经」

主体盖完先别急着上线，还有一批小东西--访客未必说得出来，但少了就是显得不专业。品牌站不做这些，等于西装配拖鞋：

• favicon：浏览器标签页上那个小图标

• 404 页：访客走错路时看到的页面，别让人家看一屏英文报错

• 手机适配：电脑上的鼠标特效，手机上没有鼠标--得禁掉，不然一堆奇怪的残影

• 分享卡片（og-image）：你把网址发到微信群、发到 X，人家看到的那张预览图--品牌站的门面

• sitemap 和 meta：给搜索引擎看的说明书，让别人搜你名字能搜到你的站

好消息是，这批活一句话就能派完：

给我的站补上：favicon、404 页、手机端适配检查、
社交分享预览图（og-image）、sitemap 和 meta 信息。

💡 一句话总结：favicon、404、手机适配、分享卡片、sitemap--一句话让 AI 全补上。

06 站做好了，放哪？

现在你的站还躺在自己电脑里，只有你能看。12 讲过：想让全世界访问，得把这堆文件放到一台常年不关机、连着网的电脑（服务器）上。

那是不是得买台服务器？搁以前是--买云服务器、配环境、做备案、年年续费，一年几百上千块，还得懂点运维，出了问题自己扛。对一个纯静态的个人站来说，这套完全是杀鸡用牛刀。

2026 年做个人静态站，正确答案是：不买服务器，用 Cloudflare Pages，免费。

两条路摆一起，你自己看：

💡 一句话总结：个人静态站不用买服务器--Cloudflare Pages 免费托管。

07 赛博菩萨 Cloudflare：它到底免费给你什么

该正式介绍这位了。

Cloudflare 是家美国公司，干的事一句话能说清：站在全世界的网站和访客中间，让访问更快、更安全。它在全球 300 多个城市部了节点，互联网上相当大比例的网站，流量都从它家过--你今天上网，大概率已经在不知不觉中用过它了。

中文互联网叫它「赛博菩萨」（也有人叫赛博佛祖），就一个原因：对个人用户大方到离谱--个人站要用的东西，几乎全免费。

类比：Cloudflare 的节点网络，像一套全球前置仓。 你的货（网站文件）只上传一次，它自动铺到全球各地的仓库；日本访客从东京仓取货、欧洲访客从法兰克福取--每个人都从离自己最近的仓拿，所以都快。

（这张图讲的就是上线的全过程：你的站上传一次到 Cloudflare Pages，它自动铺到全球节点，各地访客就近访问。）

它家功能很多，跟个人站相关的看这张地图就够：

R2 我自己就在用：stormzhang.ai 上的宣传视频这类大文件全走 R2--因为 Pages 对单个文件有 25MB 的上限，大文件本来也不该塞进站里。它最狠的一点是出口流量（下载流量）完全免费--视频被一百万人看，也不多花一分钱，这是传统云存储比不了的地方。

这里的「免费」不是抠抠搜搜给你个体验版。拿主角 Pages 说：纯静态站的访问次数和流量都不限量--官方文档写得明明白白，你的站哪天火了、一天来十万人，账单还是零。并发也不用你操心：这十万人不是挤在一台机器上排队，是被自动分流到全球 300 多个节点分头扛，跟自购云服务器「人一多就卡死」是两套逻辑--Cloudflare 官方也没给免费版设一个「最多同时在线多少人」的上限，这正是前面「全球前置仓」类比想说明的事：货铺到了全球各地仓库，不会所有人都挤同一个仓库门口。个人站能碰到的天花板，它基本都给你垫到够不着的高度。

说句实话，第一次了解到这些的时候我也犯嘀咕：天下哪有免费的午餐？后来搞明白了--Cloudflare 主要赚大企业的钱，个人免费用户对它来说是顺手服务、还替它攒了口碑，双赢。你在整条链路上唯一要花钱的，就是域名：普通 .com 一年几十块；我的 .ai 后缀属于贵的，一年几百块--这是我整个站一年的全部成本。

💡 一句话总结：托管、加速、解析、防护全免费--个人站唯一的成本是域名。

08 上线实录：stormzhang.ai 是怎么挂上网的

上线有两条路，按你对命令行的接受度挑一条。

路一：网页拖拽（不碰命令行）。 去 Cloudflare 官网注册个账号，进 Pages，把你整个站的文件夹拖进上传框--完事。它会分给你一个 xxx.pages.dev 的免费网址，从这一秒起，全世界都能访问你的站。

路二：一条命令（我的做法）。 让 Claude Code 帮你装好 wrangler（Cloudflare 的官方命令行工具），以后每次改完站，一条命令推上去：

npx wrangler pages deploy 你的站文件夹 --project-name 你的项目名

我的站在 Cloudflare 上的项目名就叫 home，部署完它给的默认网址是 home-2rr.pages.dev 。日常我改完东西说一声「部署」，Claude Code 就帮我把这条命令跑了--从改到上线，一分钟内。

wrangler 不止会部署

「一条命令」用到的 wrangler pages deploy，其实只是它最基础的功能。wrangler 是 Cloudflare 官方的命令行工具，装上以后你电脑里等于多了个 Cloudflare 遥控器，常用的还有：

• wrangler pages deployment list：查最近几次部署记录，能看出每次是 Production（正式环境）还是 Preview（预览环境）

• wrangler r2 object put / list / delete：往 R2 传文件、看文件列表、删文件--07 节说的宣传视频，就是用这条命令传上去的

第一条我自己吃过真实的亏：2026 年 5 月把 Git 默认分支从 master 切到 main 时，忘了同步改 Cloudflare Pages 项目里的「生产分支」设置。之后整整一个月，wrangler pages deploy 每次都显示部署成功，但其实全落在 Preview 环境--域名一直指着一个月前的旧版本，中间一次文案改动完全没人看到过。从那以后，我上线完都会顺手跑一遍 wrangler pages deployment list，确认最新一条记录是 Production 而不是 Preview，才算真正放心。部署命令跑成功，不等于你的域名真的更新了。

Workers、KV、D1 数据库这些 wrangler 也能管，个人静态站用不上，知道有这回事就行，不展开。

到这一步，你的站已经全世界可访问了。但网址还是 xxx.pages.dev 这种「租来的门牌」--挂在名片上终究不像话。下一节，给它配个真正属于你的名字。

💡 一句话总结：拖拽或一条命令，静态站几分钟上线；wrangler 不止会部署，部署完顺手核对一下是不是真的到了 Production。

09 给站配个真名字：域名、注册商、CNAME 一次讲透

域名相关的几个词，很多教程张嘴就用、从不解释。这一节一次给你讲透--以后不管在哪家买域名、配解析，你都知道自己在干什么。

域名：全球唯一、按年租的招牌

stormzhang.ai 这一串就是域名：前半截是你起的名字，后半截 .ai 叫后缀。它**全球唯一、先到先得**--被人注了你就只能换名字或换后缀，所以好名字得趁早下手。

另一件必须知道的事：域名不是买断，是按年租的。你跟「注册商」（有资质帮你办登记的机构）签约、一年一付；不续费，域名就会被释放、被别人抢注。价格看后缀：.com 一年几十块，.me、.dev 也都不贵；我的 .ai 属于贵价后缀，一年几百块。

在哪买：直接在 Cloudflare，一条龙

Cloudflare 自己就是注册商（07 节功能地图里的 Registrar），而且是行业里少见的按成本价卖、不赚差价--别家卖域名靠首年低价钓鱼、续费翻倍，它没这套路。

更重要的是省心：买域名、DNS 托管、绑定 Pages，一条龙全在一家后台搞定，不用在 A 家买了再倒腾到 B 家解析。已经在别家买过域名的也不用重买，转入或者把解析托管过来就行。

付款也不用愁：国内银行发行的 Visa 双币信用卡可以直接支付，也支持 PayPal。

CNAME：把域名指向你的站的那条「呼叫转移」

买好域名，最后一步是让它指向你的站。还记得 12 讲的「查号台」（DNS）吗？查号台里登记的一条条信息，就叫 DNS 记录，最常用的两种：

• A 记录：直接登记机器地址--「查这个名字，去这串数字地址」

• CNAME 记录：登记一个别名--「查这个名字，等于查那个名字」，相当于呼叫转移

绑 Pages 用的就是 CNAME。我的查号台里登记的是：「查 stormzhang.ai，转 home-2rr.pages.dev」--连 www.stormzhang.ai 也是同一条转移的路数。为什么用呼叫转移、不直接写死地址？因为 pages.dev 背后的机器地址是会变的，写死就断了；转移到名字上，它变它的，你的域名永远跟得上。

实际操作比原理简单得多：在 Cloudflare 后台给你的 Pages 项目点「添加自定义域名」，它自动把 CNAME 记录帮你写好，几分钟生效。顺手连 https 加密证书（浏览器地址栏那个小锁）都自动配好--这东西以前单买一年也要几百块，现在你甚至感觉不到它的存在。

从此，全世界任何一个人，输入 stormzhang.ai，看到的就是你花心思想清楚、AI 照图纸盖出来的那个站。

顺带一句：Cloudflare 托管的站国内能正常访问，不用魔法上网，速度中规中矩。真要面向国内用户做到极快，那得国内云加备案，是另一条路--个人品牌站，不折腾这个。

💡 一句话总结：域名是按年租的招牌，CNAME 是呼叫转移--查你的名，转到你的站。

10 动手：这周把你的站挂到网上

系列最后一次动手环节，走完你就毕业了：

1. 填图纸：把 03 的 DESIGN.md 模板填了，10 分钟；填不出来让 AI 反向访谈你

2. 分阶段盖：图纸交给 Claude Code，按 04 的四步派活，每步验收

3. 补隐形功课：05 那句话原样甩给 AI

4. 免费上线：注册 Cloudflare，拖拽上传，拿到你的 pages.dev 网址

5. （可选）绑个域名：按 09 节的路数，几十块买个 .com 或 .me，CNAME 指过去--然后，把网址甩到朋友圈

💡 一句话总结：图纸 → 分阶段盖 → 补隐形功课 → 拖上 Cloudflare → 绑域名。

小结

个人站点系列三篇，到这就完整闭环了：

这一篇的要点：

• 个人站是纯静态页，不需要架构设计，需要想清楚你是谁--三问：身份、标签、行动

• 图纸三规矩：给数值、锁技术、留验收尺子；填不出让 AI 反向访谈你

• 盖楼分四步派活、每步验收；出岔子把现象原样甩给 AI

• Cloudflare 是个人站的「赛博菩萨」：托管、加速、解析、防护全免费，唯一成本是域名

• 上线两条路：网页拖拽零门槛，一条命令最省事

• 域名是按年租的全球唯一招牌，在 Cloudflare 一条龙买齐（国内 Visa 双币卡能付）；CNAME 就是呼叫转移，把你的域名转到你的站

下一篇预告

个人站点系列到此收官。你现在手里有一套完整打法：想清楚 → 画图纸 → 分阶段盖 → 免费上线--而且这套打法不止能做个人站，往后做任何小产品的展示页、落地页，都是同一个路数。

AI 学习之路还会继续更新。下一个系列，教大家做 AI 音乐，期待就好。

本系列持续更新，建议收藏。