我如何从 0 搭出 JohnBuilds 个人网站

我最近开始搭建自己的个人网站 JohnBuilds。这个网站不是一个一次性完成的作品集，而是我用来持续展示 AI 网站、知识库、自动化流程和产品原型的入口。

一开始我只是想有一个能访问的主页，但真正做下来发现，个人网站不只是页面设计，还包括域名选择、部署平台、DNS、HTTPS、邮箱和后续内容维护。这里记录我从 0 到第一版上线的完整过程。

1. 为什么我要做这个网站

我一直想有一个自己的个人网站，但以前这个想法比较模糊：可能是作品集，也可能是博客，也可能只是一个简单的个人主页。真正开始做的时候，我发现自己最需要的不是一个“看起来很完整”的网站，而是一个能持续放项目、记录过程、展示能力的入口。

这也是 JohnBuilds 这个名字对我的意义。它不是只强调某一个 AI 工具，也不是只做一个单独的展示页，而是更像一个长期项目空间：我可以把自己做过的网站、知识库、自动化流程、产品原型和学习记录慢慢放进去。它可以先很小，但要能持续更新。

一开始网站叫 AskJohnAI，后来我把它改成 JohnBuilds。这个变化对我来说很重要。AskJohnAI 更像是一个围绕 AI 问答或 AI 助手的名字，而 JohnBuilds 更接近我真正想做的事情：持续把想法做出来，把过程记录下来，把结果展示出来。

所以我做 JohnBuilds 的目的，不是先做一个完美的网站，而是先建立一个可以持续更新的个人项目入口。只要这个入口跑起来，我后面做的每一个项目、每一次修改、每一个踩坑记录，都可以继续沉淀到这里。

2. 第一版网站先做什么

确定要做 JohnBuilds 之后，我没有一开始就去想复杂功能。第一版最重要的目标不是“功能完整”，而是让网站先跑起来，让别人打开后能快速知道：这是谁的网站、在做什么、可以看什么、怎么联系。

所以我把第一版拆成了四个静态页面：首页、项目页、记录页和联系页。这样做的好处是很直接，不需要后台、不需要登录注册、不需要数据库，也不需要先搭一个复杂系统。只要页面结构清楚，内容能表达出来，就可以先上线。

首页负责讲清楚 JohnBuilds 是什么。它不是一段很长的自我介绍，而是先告诉访问者：我正在用 AI 做网站、知识库、自动化流程和产品原型。项目页用来放作品方向，先不追求每个案例都完整，但要先把分类搭出来。记录页用来写过程和复盘，也就是我现在正在写的这篇文章。联系页则提供一个明确的邮箱入口，让别人想交流项目时能找到我。

第一版的页面分工很简单：

• 首页：介绍 JohnBuilds 和当前方向
• 项目页：展示 AI Website、Knowledge Base、Product Prototype
• 记录页：记录项目过程和学习路径
• 联系页：留下合作和交流入口

这个阶段我刻意没有做太多功能。因为对个人网站来说，最容易卡住的地方不是技术不够，而是想一次做太完整。我的想法是，先完成一个能访问、能展示、能继续更新的版本。等这个基础版本稳定后，再慢慢补真实项目、文章和更多细节。

3. 我是怎么做出页面的

页面真正开始做的时候，我采用的是比较直接的方式：先在本地把网站文件搭出来，再不断调整内容和结构。这个项目不是一开始就用复杂框架，而是用静态网页先完成第一版。这样我可以更清楚地看到每个页面负责什么，也方便后面一点点修改。

我先确定了网站的几个核心页面，然后围绕这些页面写内容。首页负责整体介绍，项目页负责展示方向，记录页负责沉淀过程，联系页负责留下邮箱入口。页面结构确定之后，再去调整文案、标题、按钮、导航和页面之间的链接。

AI 在这个过程中主要帮我做两件事：一是把想法整理成页面结构，二是帮我修改具体文件。比如我原来的网站名称是 AskJohnAI，后来决定改成 JohnBuilds，就需要把首页标题、导航品牌、页面描述、文章标题和页脚域名都一起改掉。只改一个位置是不够的，因为网站里很多地方都会显示品牌名。

类似的还有邮箱修改。联系邮箱不只是页面上看到的一行文字，它还藏在 mailto: 链接里。如果只改显示文字，不改链接，别人点击联系按钮时还是会发到旧邮箱。所以这次我检查了首页页脚和联系页按钮两个位置，把邮箱统一改成 askjohnbuilds@icloud.com。

我的基本流程是：先在本地改网站文件，再打开本地页面检查效果，确认没有明显问题后，再同步到 Cloudflare。同步完成后，还要打开线上网站验证一次，确认线上看到的内容和本地一致。

这一步让我感觉到，做网站并不是一次性把所有东西写完，而是一个不断校对的过程。每改一个品牌、域名或邮箱，都要想清楚它在网站里出现了哪些位置。本地看起来没问题之后，还要检查线上是否真的更新成功。

4. 域名遇到的问题

网站本地做好之后，真正让我卡住的不是页面本身，而是域名。之前的网站已经部署过，本地也可以正常打开，但原来的域名出现了无法访问的问题。也就是说，问题不是“网站文件坏了”，而是访问入口出了问题。

一开始遇到这种情况，很容易把问题想复杂：是不是页面写错了，是不是部署失败了，是不是 Cloudflare 设置不对。后来我把问题拆开检查，发现本地页面能打开，部署平台上的服务也能正常返回内容，真正异常的是域名访问。

我还去查了邮箱，发现 Namecheap 的风控团队之前发过账号验证邮件，主题是 [NC-UTE-0725] Namecheap.com Account Requires Verification。我已经回复过验证资料，但后面没有马上看到处理结果。这个时候继续等待原域名恢复，可能会让整个网站项目停在那里。

所以我最后选择了更实际的办法：不再把时间全部卡在原域名上，而是更换到 Cloudflare 新域名 johnbuilds.xyz。这样做的好处是可以继续推进网站上线，不用一直等原来的域名风控结果。

这次让我学到一个很重要的判断方式：域名出问题时，不要先怀疑网站代码。要分清楚问题是在网站文件、部署平台、DNS、HTTPS，还是注册商风控。只要网站本身和部署服务是正常的，就可以考虑换域名或临时访问地址，先让项目继续往前走。

5. 更换到 Cloudflare 后怎么验证

换到 Cloudflare 之后，我没有只看“后台显示成功”就结束，而是分几层去验证。因为域名和网站上线这件事，中间有很多环节：域名是否注册成功、DNS 是否生效、HTTPS 是否正常、部署服务是否能访问、最终页面内容是不是最新的。

我先确认 johnbuilds.xyz 在 Cloudflare 里的注册状态是 Active，说明域名本身已经在 Cloudflare 账户里。然后再看它是否绑定到了实际的网站服务上。我的网站部署在 Cloudflare Worker 上，原始地址是 little-heart-a366.berlinjon594.workers.dev。这个地址能返回 200，说明网站服务本身是正常的。

接着我检查自定义域名 johnbuilds.xyz。一开始它还不能访问，公网 DNS 查询也返回过 NXDOMAIN。这个结果说明，当时不是网站内容的问题，而是新域名还没有在公网 DNS 里完全生效。后来 DNS 生效后，再访问 https://johnbuilds.xyz，页面就能正常打开了。

最后我还检查了页面内容是不是最新版本。比如品牌是否显示为 JohnBuilds，页脚域名是否是 johnbuilds.xyz，联系邮箱是否已经改成 askjohnbuilds@icloud.com。这些看起来是小细节，但如果不检查，线上很容易还停留在旧版本。

这次我用的验证顺序大概是：

1. 看 Cloudflare 域名状态是否 Active。
2. 看 Worker 原始地址是否能正常访问。
3. 看自定义域名是否绑定到正确服务。
4. 等 DNS 生效后，打开 https://johnbuilds.xyz。
5. 检查 HTTPS 是否正常。
6. 检查线上页面是否显示最新品牌、域名和邮箱。

做完这些检查后，我才确认：JohnBuilds 的第一版不只是本地能打开，而是真的已经在线上跑起来了。

6. 这次我学到了什么

这次搭建网站，我最大的感受是：做一个个人网站，不只是把页面写出来。页面只是其中一部分，真正上线还会遇到域名、DNS、HTTPS、部署平台、缓存和内容同步这些问题。

第一个经验是，本地能打开，不代表线上一定能打开。本地页面正常，只能说明文件本身没有明显问题；线上访问还要看部署、域名和网络环境。反过来，线上打不开，也不一定代表代码坏了。这次原域名无法访问，就是一个典型例子。

第二个经验是，遇到问题时要拆开排查。不要一看到网站打不开就慌，也不要马上把所有东西推倒重来。可以按顺序看：本地文件是否正常、部署服务是否正常、Worker 或 Pages 原始地址是否能访问、DNS 是否生效、HTTPS 是否正常、浏览器显示什么错误。这样问题会清楚很多。

第三个经验是，项目记录很重要。如果没有把每一步记录下来，后面很难回忆清楚自己到底做过什么。比如域名为什么换、邮箱改了几个位置、Cloudflare 后台检查了哪些状态，这些如果只留在脑子里，很快就会忘。

这也是我开始用 Obsidian 管理这个项目的原因。Obsidian 更像项目控制台，用来记录状态、任务、决策和文章草稿；Codex 更像执行助手，用来帮我检查文件、修改页面、排查问题和整理内容。两者配合起来，项目就不会只散在聊天记录里。

如果把这次复盘成三句话，就是：

1. 先让网站跑起来，再慢慢完善内容。
2. 遇到访问问题，按“本地文件、部署平台、DNS、HTTPS、浏览器结果”逐层排查。
3. 每次改动都记录下来，后面写文章就不会从零开始回忆。

7. 下一步我要做什么

JohnBuilds 的第一版已经上线，但它还只是一个开始。现在网站已经有了首页、项目页、记录页和联系页，接下来更重要的是把内容继续填实。

下一步我想先补齐项目页里的三个真实项目。现在项目页里已经有 AI Website、Knowledge Base、Product Prototype 这些方向，但它们还需要更具体的案例和说明。只有把真实项目放进去，这个网站才会从“个人主页”变成真正的作品集。

第二件事是继续写记录页。现在这篇文章就是第一篇记录，它把 JohnBuilds 从 0 到上线的过程整理出来。后面我希望每做一个重要修改、每完成一个项目、每踩一个坑，都能写成一篇短记录。这样网站本身也会变成我的成长档案。

第三件事是继续优化首页。第一版首页已经能说明方向，但后面还可以加入更清楚的项目入口、更真实的案例、更好的视觉细节。网站不需要一次做到完美，但需要持续更新。

对我来说，JohnBuilds 的重点不是“上线之后就结束”，而是把它当成一个长期系统。以后我做的 AI 网站、知识库、自动化流程和产品原型，都可以慢慢放到这里。

JohnBuilds 的第一版已经上线，但它还不是终点。接下来我会继续补真实项目、写搭建记录、整理 AI 工具使用经验。对我来说，这个网站最大的价值不是“做完一个页面”，而是建立一个可以持续更新的个人项目系统。