我用 Codex 搭个人网站：从选 UI 到部署上线
我不是学计算机的，但一直想借助 AI 做一些自己技术能力范围内做不到的事情，个人网站就是其中一个。
最近开始做自媒体，我也想有一个自己的页面，介绍我是谁、想用 AI 做什么，放上实际做过的作品、实践中写下的文章，以及用过之后觉得好用的 Skills。以后有了新的作品和心得，就继续往里面加。
9月2日，我在 X 上看到 Miles Ma 用 Codex 搭个人网站的文章，转发时写了句：“正好规划项目之一就是个人网站，明天就开整。”
做网站时，我参考了其他人的个人网页，再构思自己的框架。内容都围绕自己展开，UI则想做得有冲击力一点，最好让人打开就能留下印象。
现在网站可以打开了，下面是目前的首页。
DerrickLi个人网站首页，电影感背景配有“让想法，开始运转”的标题，以及个人介绍和阅读入口。
网站地址：
先想好，网站里要放什么
我想让别人通过这个网站，比较完整地认识我：现在在做什么，未来想用 AI 做什么，已经做出了哪些东西。
所以框架围绕这些内容来安排：个人介绍、作品、文章、Skills，还有联系入口。参考别人的网站后，我构思自己的内容，再和 Codex 讨论、实现。
对我来说，作品和文章是需要慢慢积累的。正在探索的事情可以继续做，等有了适合展示的结果再放上来，不用为了填满页面就把计划写成成果。
Skills 也是一样。我想分享的是实践中觉得好用的工具，讲清楚自己拿它做过什么、有什么心得。现在页面中收录的组合，使用心得还在整理，不能把收录过当成每一项都已经验证过。
文章区目前放了两篇已经发布的 X 长文。
网站文章区域，列出关于show-me项目流程和个人工作台搭建的两篇X长文。
UI 是我反复确认最多的部分
一开始，我想要 Pear 那种令人震撼、有冲击力的页面。
我先让 Codex 给几版有科技感、科幻感的动态方案，再根据脑海里的想法继续描述，让它调整。项目里探索过巨树、机械鸟、飞船等方向，但做出来的效果都没达到我的预期。
具体差在哪里？画面细节不好，素材不匹配，动态效果也几乎没有。
我能说出自己想要“科技感”“科幻感”，可真正看到页面后，又觉得不是脑海里的样子。只靠这些描述继续改，还是很难满意。
探索过程中，也考虑过通过 Higgsfield 生成想要的动态视频，但需要花费积分。有些方案涉及付费，有些实现方式则是我当时还没有摸索清楚的。
后来，我通过 X 作者 Viktor Oddy 的文章发现了 MotionSites 的素材，最终选择了其中一个方向，让 Codex 结合我的内容继续搭建，做成了现在的电影感页面。
**有具体参考之后，讨论也更有依据了。**至少双方可以对着同一个画面说哪里要保留、哪里需要调整，不用一直解释“我脑海里大概是什么样”。
现在的 UI 我是满意的。之后还是想继续探索更有冲击力的效果，但这一版可以先用起来。
这里也说明一下：页面中的电影感视觉采用了参考素材，并不是这次全部从零生成的原创视频。
修改&调试
UI 确认以后，部署又遇到了一些不顺利的地方。
这次经历了预览发布、开放访问，再到正式域名接入。过程中需要根据实际访问结果继续检查和修改，并没有一路顺利地走完。
域名接入时，我按 Codex 的说明配合完成设置，它再检查解析、HTTPS 和页面访问。有问题就继续把现象和截图发过去，再调整、再确认。
对这些技术环节，我还没有完全掌握，所以更需要看实际结果。Codex 检查之后，我自己也用手机打开了正式网址，目前访问正常。
如果你也准备做网站，建议从一开始就把这一步算进去：除了看电脑上的页面，还要用手机打开正式网址，点一下文章和主要入口。否则很容易把“页面做出来了”当成“已经可以给别人用了”。
我把这次从构思到上线的过程，用 show-me 整理成了下面这张流程图。
建站过程分为定内容、选画面、做上线和继续填内容。三列分别展示我的判断、Codex的执行和阶段产物，橙色箭头表示UI与部署返工，虚线表示后续计划。
图里保留了两处来回修改的过程：UI 不满意，就补充描述或换参考；上线访问有问题，就反馈现象、继续排查。
我负责提供想法、选内容、看效果，Codex 根据这些信息整理方案、实现和检查。我的反馈会影响接下来做什么，所以过程中不能只等它最后交一个页面。
这张图是根据本次经历整理的回顾，不是所有建站项目都必须照着走的流程。show-me 用于把这些关系展示清楚，不代表画完图就能证明网站没有问题。
框架搭好后，还要继续做内容
目前，我对网站的 UI 和框架都满意。接下来最重要的，还是内容。
作品区暂时留了空位，等有值得展示的成果再放进去。
网站作品区域保留待更新位置，注明“留给值得展示的作品”，目前没有填入未完成的作品。
现在开始做自媒体，我会继续记录借助 AI 做过的事情，把实践中的方法和问题写成文章，再挑选适合的内容放进网站。
网页有了这些板块，也会不断 push 我去完成更多的作品实践。想让作品区丰富一点，就得真的去做；想更新文章，就得有新的经历和心得可以写。
接下来我想先把这些内容补起来，UI 有新的想法再继续迭代。我希望以后别人打开这个网站时，能看到的不只是一个页面，还有我实际做过的东西。
参考与来源
建站文章：Miles Ma，X
。
https://x.com/miles_mazy/status/2095079179553505737
视觉参考：Pear。
素材发现线索：X 作者 Viktor Oddy；本文链接为作者主页。
页面视觉参考素材：MotionSites。
流程图工具：show-me，来自 humanlayer/skills。
https://github.com/humanlayer/skills/tree/main/plugins/show-me
