Designing a fast personal site

这是一个占位文章，用来把新的内容系统先搭起来。

真正的内容后续会从私有内容源同步进来，但站点本身已经按内容集合、动态路由和静态构建方式组织好了。

为什么先做静态优先

内容型个人站并不需要像应用那样在首页加载大量运行时逻辑。先把 HTML、排版和结构做扎实，后面的动态模块才不会反客为主。

如果一个网站的主要工作是展示文字、图像和少量结构化元信息，那么它首先应该像一份可以稳定打开的文档，而不是一个到处都需要 hydration 的应用。用户点开链接时期待的是立刻看到内容，而不是先等一个 JS runtime 把页面拼出来。

我现在更在意的是这几个问题：

• 首屏是不是在网络一般的情况下也能快速稳定显示
• 正文是否可以在没有额外客户端逻辑时直接阅读
• 后续加上的互动能力会不会影响主内容
• 整个站点能不能长时间保持简单

交互应该后挂载

阅读量、reaction、留言墙这类能力都应该是增强层，而不是阻塞首屏的前提条件。

如果这些功能失败了，页面主体仍然应该完整。也就是说，用户不应该因为统计服务超时、评论接口暂时不可用，就看到一个半残废的页面。对个人站来说，这类失败几乎总是“可接受失败”，因此最合理的设计就是把它们放到后面去。

页面应该先像文档，再像产品

很多个人网站的问题并不是功能不够多，而是正文没有被当成真正的主角。导航、卡片、动画、主题切换、状态徽标都可以很酷，但如果最后用户还是在和 UI 打交道，而不是在读内容，那这个网站的中心就偏了。

这也是为什么我更喜欢把文章页做成明显的三段结构：

1. 顶部给足标题、摘要和元信息，让文章的主题先站住。
2. 中段提供一个稳的阅读列，减少无关视觉噪声。
3. 底部用自然的尾部模块收尾，而不是正文突然消失。

宽度是一种态度

阅读宽度不是一个单纯的视觉决定，它会直接决定段落节奏、标题重量和用户的扫读速度。太窄会让页面像笔记应用，太宽会让眼睛一直来回摆动。

对于 bojin.co 这种内容和项目混合的个人站，我目前更倾向于：

• 首页宽一些，允许信息模块横向铺开
• 详情页正文固定在明显更窄的中心列
• 左右 rail 都是辅助信息，不去争正文空间

架构的分界线

这版项目把主站、动态接口和私有内容源刻意分开。这样做的好处不是“更现代”，而是方便保持内容路径稳定，同时减轻页面负担。

更具体地说，现在的职责拆分大概是这样的：

bojin.co        -> 主 HTML 和 canonical
static.nszero.net -> 静态资源
api.nszero.net    -> reaction / views / guestbook / comments
private content   -> 原始文章和翻译稿

这个边界一旦清楚，后面的很多决策都会简单很多。比如你不会再纠结“是不是要把所有逻辑都塞进一个框架里”，因为主站和动态服务从一开始就不是同一个问题。

内容仓库独立

公开仓库负责站点本身，私有仓库负责原始文章和多语内容。

这点对开源项目尤其重要。一个公开的站点仓库，最好能够被别人直接 clone、build、学习，但不意味着原始内容、草稿和翻译工作流也必须暴露出去。

更理想的状态是：

• 公开仓库里保留可复用的页面系统
• 私有内容仓库里维护真正的写作资产
• 两者通过构建同步联通，而不是运行时硬耦合

内容模型先于 CMS

在真正需要一个内容管理系统之前，最值得先设计的是内容模型本身。文章要有哪些字段，如何标记翻译状态，如何处理 tags、updatedAt、canonical locale，这些决定了你以后能不能顺畅迁移。

如果这些东西不清楚，先上 CMS 只会把问题藏起来，而不是解决掉。

细节延后

评论系统和其他需要长期维护的动态模块都放在后面，先把阅读体验搭稳。

这里的“延后”不是放弃，而是把顺序排对。一个阅读体验还没站稳的文章站，过早接评论，往往只会把精力拖到 moderation、滥用控制和接口细节上。

动效和质感应该服务结构

我仍然喜欢 cali.so 那种非常克制但明显精心处理过的质感，不过真正值得拿来的不是某一个 blur 值，也不是某一个胶囊导航，而是它对“层次”的理解。

好的细节一般有几个共同点：

• 不会抢正文的戏
• 不需要用户学习
• 不影响速度
• 在滚动或 hover 时才显现一点点额外味道

什么时候该停手

如果一个视觉细节需要很多 JS 才成立，或者必须引入额外状态机才能让它看起来“高级”，那通常就说明它不够值。对于个人站，我更愿意保留一些克制感，而不是把每个区块都做成一个小组件演示场。

后面真正会决定成色的事情

等这些基础铺好之后，真正决定站点成色的，其实不是“再加什么功能”，而是以下几件事：

• 首页和列表页的完成度能否追上详情页
• 多语言内容能否在不破坏内容结构的前提下生成
• 动态模块能否始终作为增强层存在
• 每个页面在中国大陆和海外都能保持一致的打开体验

如果这些问题处理好了，那么这个站点自然会比“功能全但速度慢”的站更耐看，也更耐用。