这个网站是怎样在 Codex 中一步步构建出来的

买了域名，然后呢

7 月 21 日，域名到手，备案在走。我想给自己弄个网站，需求听着特别朴素：浅色、好看、能写东西、能给自建服务挂个入口。就这样。

参考了 xiaommx.cn，觉得人家做得挺炫，但冷静想了想--不要小游戏，不要数据库，不要后端，不要那些听着就维护不动的东西。网站只需要四样：介绍自己、写文章、服务入口、关于。这个判断很省事，后面所有技术选型都是被它倒推的。Nuxt 4、Nuxt Content、原生 CSS，没有 Hono，没有 SQLite，不用纠结。

"算了，全权交给你负责了！Kimi 用的人太多了，整个网页全部交给你了！"

于是 Codex 上场。接下来三天，8 个会话，大约 230 条输入。这个网站就是这么搞出来的。

第一版：什么都有，但就是没意思

浅绿色、大图 Hero、导航栏、文章列表、服务区、关于页。功能该有的全有，看着也像模像样。但怎么说呢--就像一个精心装修过的样板房，你能看出花了心思，但说不出这是谁的家。

然后改文案。原来的介绍写得跟产品着陆页似的，特别正经。"把那些尴尬的文案改了好不好。"删掉那些抽象表述，换上"这是我自己部署的个人主页"和"正在上班当牛马"。这一步让我明白一件事：网站的性格不靠功能堆出来的，靠语气。

复刻 rauno.me：从真香到翻车

"你详细调研一下 rauno.me，我想完全复刻这个网站做我的主页。"

rauno.me 那种横向画框的玩法确实好看。旧首页二话不说推翻，改成五张横向全屏画框：自我介绍、文章、服务、联系方式、宣言。顶部还加了刻度和滑动指示器，像那么回事。

然后就开始跟滑动手感死磕。太慢、惯性不够、触控板方向反的、自动吸附老打断节奏。最后让滚轮和触控板只管注入速度，动画循环自己算惯性，去掉自动吸附，第一张画框加个弹簧聚焦。Playwright 测试也是这时候开始写的--手动搓滑动根本测不出问题。

复刻到一比一了，新鲜劲也过了。"现在网站基本是一比一复刻，我想做出差异化。要不改成竖着的？横着的太明显了。"道理很简单：可以学人家的视觉语言，但不能变成中文版 rauno.me。于是横改竖，每幕换个进入动画，去掉编号。

改完一看--好家伙，这不就是个 PPT 吗。

不做 PPT 了，做工作台

"要不只保留第一张，把其他内容集成在第一个页面，参考 2023.rauno.me，保留一些好玩的互动。"

这是整个项目拐弯最大的一次。不做滚动，不做转场，不做一幕一幕的切换。让所有东西同时出现在一个屏幕里：介绍、最近文章、服务、时间、坐标、调色器、栏目入口，全塞进去。然后砍掉第二幕，服务摆成无边框 2×2 矩阵，底部入口只留三个。首页钉死在视口里，没有导航栏，不产生原生滚动。

从"复刻一个网站"到"设计一个工作台"，就这么转过来的。

右下角这块空地怎么办

工作台成型了，右下角一直空着。试了一圈：互动坐标场、大型指针圆圈、可拖动组件、涂鸦板。指针圆圈太大，喧宾夺主；拖动组件没啥用；涂鸦板跟网站气质完全不搭。最后只留了顶部一个克制的坐标读数。

"我想把它做成斜纹的、可拖动调色的条带，用红绿蓝三基色混合，最后出来的颜色是混合的。"

三条斜纹轨道放进去，拖红绿蓝三个通道调色，配黄橙蓝三个预设。但让它真正变成网站灵魂的决定是：这个颜色不只管按钮，而是接管整个页面--背景、网格、文字对比色、悬浮反馈、文本选中状态全跟着变。后来又顺手把浏览器标签页的 theme-color 和 favicon 也同步了，favicon 做成几何化的 Q，刷新还能恢复上次选的颜色。

本来只是想填个空，结果填出来一个控制中枢。

首页热闹，内页安静

"点进文章界面之后，不要再出现其他地方的入口，只专注于展示文章。"

分工很明确：首页负责有意思，内页负责能读进去。文章、服务、关于三个内页不要公共导航、不要页脚，只留左上角一个返回入口。文章页有分类、搜索、前后篇导航。其他内页黑白排版，安安静静的。

大结构定了，剩下的全是鸡毛蒜皮的微调。"最近写下的宽度稍微窄一点。""SYSTEMS 再左移一点点。""手机端网格线不能覆盖整个页面。""返回按钮字体颜色淡一点，加上符号标识。""状态小点再浅一点，深的看不清。"每条单独看都不值一提，但加在一起就是"差点意思"和"对了"之间的区别。字号、间距、颜色、断点，全靠浏览器截图反复比对。最后紧凑桌面、超宽屏、手机都能正常显示，不会因为某个标题长了一点就整个错位。

连发文章都想重新发明一遍

"这都 2026 年了，谁还手写文章。我把和其他 AI 的对话链接分享给 agent，然后它自动按照模板整理好文章并分类发布。"

文章不临时编，来源就是真实对话。分类定了随笔、学习、交易、观察四类。发布前跑一整套：内容验证、类型检查、单元测试、静态生成、Playwright 测试。

发文章还撞上一个离谱的问题：构建静态站点居然要占 3000 端口，也就是说每次发文章都得把线上服务停了。"为什么发布文章还要占用 3000 端口？为什么要停止开机服务才能自动发布？"改完之后，生产服务读版本化 release 的 current 链接，构建完原子切换目录，3000 端口根本不用动。开发预览走 3100，测试走 3101。构建失败也影响不到线上。

内容管理也顺手迁了：个人资料和文案放 YAML，文章还是 Markdown，加了 Sveltia CMS 做可视化管理，Git 当唯一真实来源。

越做越少

"能不能简单点？这么多策略配置，我觉得只需要维护一个 skill。"

OpenClaw 工作区里重复的角色说明和工具配置全删了，文章整理和发布逻辑收进一个 personal-site-publisher skill。到最后整个系统就四样东西：一个静态站点、一套内容规则、一个发布 skill、一条原子部署流程。

回头看，这个网站不是哪个版本的直接产物。传统首页做过，横向画框做过，纵向幻灯片做过，第二幕做过，自动吸附做过，指针圆圈做过，涂鸦板做过--然后全删了。留下来的东西有个共同点：反复用着觉得对。单屏工作台、服务矩阵、RGB 全局调色、安静的阅读页、对话驱动的内容发布，每一个都是推翻好几轮之后才定下来的。

文章和服务越来越多之后，单屏首页还能不能撑住，得接着看。远程管理和自动部署等接了正式私有仓库再验证。