搭建 JohnBuilds 并不是从一份完整设计稿开始，也不是一次性把所有页面写好。更真实的过程是：先有一个模糊想法，再不断整理定位、规划结构、修改文案、调整 Logo 和导航，最后一步步把它变成一个可以访问、可以展示、也可以继续更新的网站。
这个过程中，我依赖的不是某一个万能工具，而是一组分工明确的工具。它们分别负责思考、执行、沉淀、管理、上线和检查。
1. ChatGPT：把模糊想法整理成清晰结构
ChatGPT 是整个过程中最核心的思考工具。一开始，我并不只想做一个普通个人主页，而是想做一个可以长期更新的 AI 作品集网站。它需要展示的不只是“我是谁”，还要让别人看到我如何用 AI 把想法做成网站、知识库、内容系统和可展示的项目。
在反复讨论中，我逐渐想清楚了几个关键问题：
- JohnBuilds 是个人主页，还是 AI 项目作品集？
- 首页、项目页和记录页应该如何分工？
- 项目卡片应该展示结果，还是展示过程？
- 一篇建站记录应该放在博客里，还是归入项目主页？
- 网站后续应该如何扩展，而不让结构越来越乱？
ChatGPT 的作用不只是回答问题，更像一个项目顾问。它帮我把一句模糊的“我想做个网站”，拆解成页面结构、内容层级、项目入口和后续更新方式。
2. Codex：把想法落实成具体页面
如果说 ChatGPT 更像项目顾问，那么 Codex 更像执行工程师。当结构和内容方向确定之后，Codex 负责把自然语言需求落实到 HTML、CSS、页面链接和文件结构里。
在 JohnBuilds 的搭建过程中，Codex 主要帮我完成了这些工作：
- 修改首页内容和导航结构
- 调整项目页的卡片和链接关系
- 创建项目主页和文章页面
- 统一品牌名称、邮箱和页面描述
- 处理 Logo 资源并检查本地页面效果
- 打包网站文件，准备同步到 Cloudflare
Codex 让“想法到代码”的距离变短了，但它并不替代人的判断。页面结构是否合理、内容是否真实、视觉是否协调，仍然需要我自己决定。Codex 负责执行，我负责方向。
3. Obsidian：保存过程，连接长期资料
Obsidian 不是直接生成网页的工具，也不负责部署。它更像 JohnBuilds 的本地知识底座，用来保存网站定位、文案草稿、页面规划、Logo 修改记录、项目复盘和后续文章想法。
这些内容如果只散落在聊天记录、代码文件和临时备忘里，后面很容易找不到。Obsidian 的本地存储、快速搜索和双向链接，让我可以把零散的过程逐渐整理成一个网状的个人知识库。
比如一篇关于 Logo 的记录，可以同时关联品牌视觉、首页设计、项目主页和导航优化；一篇关于项目页的记录，也可以关联知识库、网站搭建实验和后续文章计划。
Obsidian 负责保存过程、连接想法、沉淀文章和管理长期资料。
4. GitHub：作为代码和版本管理的下一步
网站持续更新之后，代码需要一个稳定保存和追踪变化的地方。GitHub 适合承担这个角色：保存网站文件、记录每次修改、在改错时回看之前的版本，也方便未来把部署流程做得更自动化。
JohnBuilds 当前仍以本地文件和手动部署为主，GitHub 是我接下来准备补上的工程底座。它会让这个网站不仅有最终页面，也有一份清楚的版本档案。
5. Cloudflare：让本地文件变成可访问的网站
网站不能只停留在本地文件里，最终要能被别人打开。Cloudflare 负责域名、DNS、网站部署和访问管理，让 johnbuilds.xyz 成为一个正式的个人作品集入口。
Cloudflare 不负责写内容，也不负责设计页面，但它让这个项目从“我电脑里的文件”变成了一个真实存在、可以分享的网站。这一步很重要，因为只有上线之后，网站才会开始接受真实访问和真实反馈。
6. HTML、CSS 和浏览器：保持网站轻量，并检查真实效果
JohnBuilds 当前阶段并不需要一开始就引入复杂框架。HTML 负责页面结构，CSS 负责视觉样式，少量 JavaScript 可以在需要时补充交互。轻量的静态网站结构清楚、修改成本低，也更适合持续迭代。
浏览器预览则是整个流程里不可缺少的一环。很多问题只有在真实页面中才能发现：Logo 和文字是否协调、标题是否太长、卡片内容是否重复、导航链接是否清楚、手机端是否拥挤。
网站最终不是给代码编辑器看的，而是给访问者看的。代码写完不等于工作结束，真实页面是否舒服才是最终判断标准。
7. AI 图像工具：快速探索品牌视觉
JohnBuilds 的 Logo 也经历了多轮尝试：从较强的金属质感，到更适合白底网站的轻科技方向，再到单独导出 J 图形作为导航图标和 favicon。
AI 图像工具的价值不是替代设计判断，而是快速生成不同方向，让我可以比较、筛选和调整。有些方案看起来很炫，但放进网站后太重；有些方案很简洁，却缺少记忆点。最终仍然需要在个人品牌感和 AI 科技感之间找到平衡。
8. 我的工具组合方式
这次搭建 JohnBuilds，我逐渐形成了一条比较清晰的协作流程：
ChatGPT：整理想法、规划结构、打磨文案
Codex：执行代码修改、创建页面、调整链接
Obsidian：保存资料、沉淀笔记、连接知识
GitHub：管理代码和版本
Cloudflare：管理域名、部署和访问
HTML / CSS：构成网站基础
AI 图像工具：探索 Logo 和视觉方向
浏览器：检查最终页面效果这些工具不是互相替代，而是各自解决不同问题。ChatGPT 让我想清楚，Codex 帮我做出来，Obsidian 帮我沉淀过程，GitHub 负责保存版本，Cloudflare 让网站上线，浏览器帮助我判断最终效果。
9. 这次建站给我的启发
AI 时代做个人网站，更重要的不是一开始就掌握所有技术，而是能够清楚表达：我想做什么、这个网站给谁看、首页要表达什么、项目页要展示什么、哪些内容需要长期沉淀。
当这些问题想清楚之后，AI 工具可以显著提高执行效率。但 AI 不能替我做所有判断。网站名称是否合适、首页和项目页是否重复、Logo 是否适合当前风格、资料应该如何长期管理，这些问题最终仍然需要人来决定。
AI 可以提高效率，但方向感仍然很重要。
10. 总结
JohnBuilds 的搭建过程，不是为了展示我用了多少工具，而是为了验证一件事：通过合理分工，模糊的想法可以逐渐变成一个真实存在、能够持续更新的网站。
JohnBuilds 现在还不是最终完成品。它更像一个正在持续生长的项目，而这个过程本身，就是 JohnBuilds 最重要的作品之一。
返回记录页