把自己编译成一个网站

从一个念头开始

第一篇笔记，就从这个网站本身写起。做它的起点很简单：我想自己设计一个真正属于自己的网站。不是去看别人做好的网页，挑一个顺眼的，再照着复刻一份。我看了很多不同的设计，最后还是回到了自己一直喜欢的赛博朋克：编辑器、终端和代码，是我每天待着的地方；夜里亮着灯的城市，是我想放进去的另一半。至于这两边怎么接上，我试了很多次，才慢慢试出现在的样子——一个编辑器，和一座由代码长出来的城。

第一次提交是在 2026 年 10 月 13 日。写下这篇笔记时，刚到第三天，已经有了三十多次提交。中间大部分时间不是在加东西，而是在改：做出来，觉得不对，撤回，再换个方向。有些地方来回改了好几轮，最后留下的甚至比最初还少。现在回头看，这个网站的样子，与其说是一步步搭出来的，不如说是在这些尝试里慢慢挑出来的。

为什么长成一个编辑器

我每天大部分时间都在编辑器和终端里，所以网站也用了编程工具的外壳：顶部是文件标签，底下是状态栏，右边有一条小地图。但我不想让它只是一份套着编辑器皮肤的履历，也不太想用某一种技术或者职业来定义自己。浏览器标题上就只写了 Wen，独立开发者、理想主义和 Peerframe 则放在描述、签名和代码里。它们可以告诉你我现在在做什么、在意什么，但不必把我完整地概括出来。

于是，主页没有按「关于我」「项目」「联系方式」依次排开，而是写成了一段跟着滚动推进的叙事：init.sh、wen.config.ts、build.log、git log、notes.md，最后是 manifesto.md。打开网站，一个 agent 正在终端里准备「把 Wen 编译成一个网站」。启动卡片先拉出一条线，再展开，随后才开始打字。

继续往下滚，wen.config.ts 被逐行写出来，里面有我的身份、正在做的 OpenBot，还有一行 why：让技术把时间还给人，而不是让人一直工作。配置写完，build 跑起来，城就从地面升起。

一座由代码组成的城

这座城会跟着访客当地的时间切换昼夜，早上七点到傍晚六点是白天，其余时候是夜晚，也可以手动切换。我不想让白天变成一座写实的城市，它仍然得属于编程工具的世界：像亮色编辑器里的检视模式，每栋楼的窗户都是一段代码，鼠标停上去，会显示楼的名字。到了夜里，同样的位置亮起灯，代码就成了窗户里的光。

镜头落到街上，脚下的大道是一张带着行号的编辑器纸面。这条路其实折腾了很久：最开始什么都没有，我觉得空，就试着画了一张 Git 提交图，做完又觉得不太像这个网站；换成行号和缩进参考线，线一多，画面又乱了。最后绕了一圈，还是回到一张几乎空白的纸面，只在大约三分之一的行上留下一小段代码。建城时，它们从近往远一行行写出来，镜头前方那一行是当前行，光标在上面一段段地打字。路面不用塞满，留出空白以后，两边的楼和远处的光反而更看得清。

楼也不全是方盒子。我把大约 15% 的普通楼换成了代码结构的形状：嵌套代码块是一层层收进去的阶梯塔，数组是坐在同一块底座上的一排矮楼，栈是错位叠起来的板楼，指针是一座顶着天线的细塔，注释楼则只剩一圈虚线轮廓。外圈和远处还有大约 20% 参考了现实城市里的楼型，放进退台、双塔、裙楼、厂房和楼顶设备。它们不承担什么必须被看懂的信息，只是一些可以慢慢发现的小彩蛋。

走到 git log，三栋地标楼会跟着提交记录依次亮起来，对应我做过的三件事：设计 AI 课程，给高校的 IDEA 孵化器搭飞书知识库，还有用 vibe coding 做出 OpenBot。课程是一座阶梯教室，孵化器是一座孵化舱塔，OpenBot 则是五栋用连廊连起来的小塔。我一开始给它们加了很粗的蓝色描边，想让人一眼找到，结果实在太抢眼。后来改成只在对应的提交出现时，轻轻亮起一层淡蓝，窗灯也跟着亮一下，之后再褪掉。它们可以在讲到自己的时候被注意到，不需要一直从楼群里跳出来。

最后一幕，楼群沉进地面，镜头升到高处，地上的灯光拼出一句话：在有限的一生里，创造无限的可能。英文版用的是我写的另一句，To live freely, To create endlessly. 最初这里的灯光太亮，文字一出来，整个画面都被发光盖住了。现在把字的亮度压低了一些，主张出现时，画面的泛光也会减弱四成。折腾到最后，我发现自己在很多地方做的其实是同一件事：让该出现的东西出现，再把多余的强调拿掉。

改掉的那些

整段叙事也因此只跟着滚动走，没有自动播放，没有播放和跳过按钮。访客可以停在一栋楼前，也可以直接往下走，不用等一段动画播完。顶部标签跳转的位置，我也调到了每一幕完整显示的地方，而不是它在页面里的起点。我希望点开一个标签时，看见的是这一幕本来的样子，不必再上下挪一点，自己找位置。

但到了文章页，这种展示的欲望就得收一收。主页可以让人看城市，文章页还是应该让人看文章。我试过在左边放一整栏 OUTLINE 面板，带编号和已读进度，做完又撤了；也试过在右边加一栏属性，放日期、阅读时间、标签和复制链接，最后还是撤了。现在只留下一条目录，旁边的竖线跟着阅读位置变青。目录可以折起来，折起来以后，正文就滑到页面正中。阅读时间也去掉了，因为估不准，干脆只写字数。页脚同样从三行压成一行，去掉分隔线，左边留下文件最后一行的行号和注释，右边是一条 open 命令。

还有些地方，我想让编辑器的设定不只停留在外观上。合作表单里的「想聊什么」，原本是几个单选按钮，后来换成了终端里的 Tab 补全：打几个字筛选，按 Tab 补全，回车确定。以后选项多了，也不用把按钮铺满一整块。错误页则共用一套编辑器报错的模板，404、403、429、500、503 各自打开不同的文件，出错的那一行画着波浪线，下面放着「快速修复」。既然已经走进这个编辑器，出错的时候也不必突然被带到另一种页面里。

和 AI 一起做

这些东西，都是我用 Claude Code 一边聊一边搭出来的。我负责说想要什么、哪里不对，有时候说得很具体，有时候就只是「太满了」「这个描边不好看」「再压缩一下」；它负责写代码、截图给我看，再按反馈修改。新的版式和视觉方向，我会先让它在设计画布上并排摆出几个方案，挑定一个，再开始写代码。这样至少能先看清楚自己在选什么，不至于等整页都写完，才发现方向根本不对。

Peerframe

这也和 wen.config.ts 里的最后一个词有关：Peerframe。它是我建的一个 GitHub 组织，想留给身边那些愿意为同一个目标努力的同伴。名字由 peer 和 frame 拼起来，一个是同伴、同行的人，一个是框架。我把它们放在一起，是因为这两件事都很重要。

一个人能看见的，往往只是事情的一个切面；能想到的问题，也总是从自己的经验和位置出发。一个想法要从脑子里走到现实，中间得经过很多双眼睛、很多次追问和反驳。同伴不只是帮你多做一些事情，也会指出你习以为常的地方、问出你没有想过的问题，让你有机会站到一个人站不到的位置上，再看一遍眼前的东西。

而 frame 是我做事时的另一个习惯：先想清楚这件事要解决什么，分成几块，每一块之间怎么连接，再往里面填东西。框架定下边界和骨架，里面可以大胆试，也可以随时改；没有这一步就开始堆，东西可能越来越多，最后却连自己也说不清它为什么长成这样。用 AI 写代码时，这个问题尤其明显。你说一句，它很快就能写出一大片，几轮下来，每次修改看着都有道理，整体却可能已经不是你最初想做的东西。所以我更愿意先把框架想清楚，再让 AI 往里填。先在画布上定方案，再写代码，也是一样的道理。

用到的东西

当然，实际开发也有不少临时的取舍。城市用 three.js 实时渲染，楼、路面和灯光的着色器都是单独写的；页面则由一个很小的静态构建脚本生成，用的是 Markdoc 和 esbuild，没有用完整的站点框架。最初没上 Astro，只是因为当时的开发环境装不了 npm 包，先用能跑通的办法把网站搭起来。内容和脚本也留着以后迁移复用，不必为了这次的选择把后面的路堵死。

字体倒是很早就定下来了：标题用得意黑，代码和标签用 Maple Mono CN。中文正好是英文的两倍宽，放在代码里，中英文能对齐，这个细节很适合网站的样子。字体都托管在自己的服务器上，不依赖 Google Fonts，只是中文字体太大，还得拆开：网站已经用到的字放在一片，GB2312 里其余的常用字每 150 个一片。浏览器只下载当前页面需要的那几片，之后写新笔记，也不用每次重新裁字体。上线前，我还用 axe-core 跑了一遍主页、合作页、笔记页、文章页和 404，日夜两种主题都检查过，按 WCAG 2.2 AA 的规则，这轮自动检查没有报错。

后来加上的

做到这里，它已经能把「我」介绍一遍了。但上线第二天，我又给它加了一个很小的后端，和静态页面跑在同一个 Cloudflare Worker 里，数据存在 D1。城市里也从此多了一点与访客有关的东西：每个人来过，都会点亮一扇窗。白天，那是一小段琥珀色的代码；夜里，它是一盏灯。属于你的那扇会更亮一些，旁边写着 window#you。至于怎样在不用 Cookie、不存 IP 的情况下数访客，我另外写了一篇。

主页 notes.md 那一幕下面还有一个输入框，可以在自己的窗户上留一句话。留言先等我看过，通过后才会公开，变成弹幕，从大道两侧的窗户里飘出来。网站也有单独的留言本，文章下面可以评论。我喜欢这个变化：城市不再只有我预先写好的内容，也能留下别人来过的痕迹。

为了之后能方便地写下去，我还做了一个只有自己能进的后台。笔记仍然存在 GitHub 上，点保存就是一次提交，点发布就提交到 main，再由 Cloudflare 自动构建上线。网站的内容和它自己的代码一样，都有记录，也都可以继续修改。

现在

现在，它部署在 Cloudflare Workers 上，地址是 wwen.net。笔记就从这一篇开始，之后会写 AI 应用、自动化工作流和独立开发，也会写产品设计、软硬件，和技术跟人的关系；偶尔写旅行、露营，或者一些暂时没有答案的问题。我不想太早给这里划定一个只能写什么的范围，就像一开始不想用某一种职业来定义自己一样。它能慢慢装下我在做的事、走过的地方，以及还没想明白的东西，就很好了。