web 2.0时代,人人都会有自己的个人主页。」如果你经历过那个年代,那么肯定会对那个万物竞发的景象印象深刻:懂点技术的都在折腾自己的博客,而不懂技术的,也要在QQ空间之类的地方装装点点,玩出花来。

作为「数字原住民」的我也被这盛况感动,思忖着,想在这广袤的互联网空间开辟一块属于自己的地方。

但也只是想想。等我真正拥有了自己的电脑的时候,主流操作系统从Windows XP变成了Windows 7,IE也被Chrome替代。那股人人搭博客的热情也消散得差不多,大家又回到了贴吧、天涯,图的是人多热闹。

但论坛的黄金期也没撑过几年。微博、B站快速成为主流,快手、抖音崭露头角。「人人都有个人主页」的预言的确实现了,只是依附在各个社交平台上。

这很好,每个人都能输出内容,每个人都能被看见。但裹挟在爆炸信息中的我突然想到:我在这片互联网上还是没有一个真正属于自己的地方。

瓜田不纳履,李下不整冠。每个平台有每个平台的规矩与限制。我发现我还是想要一个自己的网站,不寄人篱下,受制于人。

博客是个人网站最常见的形式。我也了解到了GitHub Pages的存在。Jekyll的主题挑花了眼,配置文档慢慢才琢磨透。输入属于自己的github.io网址,看着顶上大片的蓝绿色渐变,兴奋之余,我却觉得,这还不是我想要的。

我想要的究竟是什么?

我在画图上画,在Illustrator上画,在Figma上画。工具换了一轮又一轮,设计稿攒了一版又一版。

外界的趋势也在变:从分页到无限滚动,从网格到瀑布流。我跟着潮流走了一圈,却转身看向了纸。

第一代的Material Design提醒了我这一点。它把纸与墨、层次与留白重新带回了屏幕,几乎可以与Apple的人机界面指南分庭抗礼,证明了纸上的排版智慧在屏幕上依然成立。

屏幕越来越大,但为了阅读舒适,网页的行长却缩得越来越窄,在屏幕两侧留下了越来越大的空间。两侧要么空着,要么被目录、作者简介等别的信息填满。

纸媒是怎么处理宽版面的?人们在纸上排版了上千年,这个问题早就有了成熟的答案。看看大开本的报纸、书刊、杂志,答案很明显:分栏。

剩下的则水到渠成。屏幕是横的,分栏也是横着分,横向滚动似乎是一件再自然不过的事情。设计稿画出来了,效果很好。我踌躇满志,决定把这设计给实现。

这时,静态博客生成器已经很成熟了。我选择了Hexo,生态齐全、部署到GitHub Pages上也方便。唯一的不足是我对前端三件套:HTML、CSS以及JS没有任何了解。

所幸前端很容易上手。而Hexo又把网站结构以及Markdown渲染之类的东西都封装好了,我只需要照猫画虎、按图索骥,把主题写好就行。我一边看菜鸟教程,一边把学到的东西转换成EJS和Stylus。导航栏、文章卡片,网站的整体框架很快就搭建了起来。

现代网页工具终究还是为竖向滚动服务的。当实现到文章页时,这个问题就完全暴露了出来。在CSS中,column-widthcolumn-count所定义的数值都是「理想的」,浏览器会根据容器和窗口大小重新计算。在纵向滚动时,这个特性很方便。在横向滚动上,却成为了很大的阻碍。

基于「行长为字号的整数倍」的原则,我将行长设为了24个字,也就是24em。固定行长也带来了一个意外的收获:我开始像排印刷品一样处理中西文混排,调整用词,避免两端对齐拉出难看的大段空白。我甚至考虑起孤行、孤字。这是以前纸上才会有的体验。

然而,浏览器会自动将栏宽和栏数设定为屏幕刚好能装下。这与我的需求相悖,还完美避开了露出半栏内容,提示用户滚动方向的可能。

我找到了一个邪门的方法:在column内再套一层,在里边定死宽度。这是个未定义行为,在所有的浏览器内核上,分栏的整体宽度都会测量失败,导致栏后边与其他元素重叠。但这是我找到的唯一方法。

最大的问题解决了,我很快定义完了Markdown元素的样式,搭建好了其他几个页面,博客建成近在眼前。

一些朋友告诉我Hexo有点过时了。这在我写的时候就已经察觉到了:EJS很笨重、模板年久失修、没有组件化概念、资源管线老旧。我经常要使用一些很脏的办法来修改一些功能,也有一些地方很难自定义。

我是一个逐新的人,我希望我刚写出来的网站至少用的不是现在就已经过时的技术,因为我将来还要数以年计地维护这个网站。

我转向了Svelte,单文件组件、响应式赋值、作用域样式——之前在Hexo里要绕着弯才能做到的事,在这里都是理所应当。

但是Svelte不是静态博客生成器。它是一整个前端组件框架,没有现成的路由、也不管Markdown渲染。这意味着我在享受摆脱Hexo的自由时, 要亲自负责它之前接管的脏活累活。

由于其他事务缠身,我没有很多的精力投入去学习这一崭新的领域。我也急于求成,只想调整视觉效果,不想干这些背后的活计。进展越来越慢,最终搁置。

这一放就是一整年。期间我无数次想捡起来,却怯于背后要投入的精力。直到vibe coding爆火,我半信半疑,想找个项目试试。

我立即想到搁置的博客。

导入项目,看着之前半成品繁杂的文件,我手足无措,似乎回到了刚下载好Hexo模版的时候。即便有了LLM做帮手,我还是不知道该让它做什么。

我想了想,试着在对话框中输入:「我现在对这个项目毫无头绪,你能看看我接下来应该做什么吗?」

它读了半天文件,又想了一会,开始输出。把我积压一堆的事情抽丝剥茧,排列得井然有序。也刚好,我的前端水平处在写不出来,但能看懂的位置。我一边感叹时代进步,一边审查LLM写的代码。

接下来的事情就容易多了。如果抛去Antigravity大砍额度至几近不可用,令我逃窜到Codex的故事,整件事进展得飞快。

我把之前的样式迁移过来,并作了改进,又完成了归档页面。LLM也把之前栏后内容重叠的bug用JS解决了。甚至还用Pagefind给网站接上了搜索。当然,LLM还是不擅长视觉上的东西,每次写组件还是错漏百出,要我手动改。但整体还是快到不真实。

再后来,博客就是现在你眼前的样子了。我也终于可以在偌大的互联网中偏安一隅,有了自己的地方。