我如何搭建一个可持续维护的个人网站

个人网站最容易陷入一种循环：兴奋地重做首页，花很多时间调整字体、动效和卡片圆角，发布两篇文章，然后因为每次更新都太麻烦，网站再次停在原地。

这次搭建 Hsu’s Space 时，我先给自己定了一条不太浪漫的原则：衡量网站的标准，不是上线那天有多完整，而是半年后我是否还愿意打开编辑器。

先确定网站真正要保存什么

我没有从页面结构开始，而是先列出希望长期积累的三类东西：文章、项目和仍在变化中的想法。它们的共同点是内容会持续增长，展示方式却可能改变。因此，内容不应该被写死在组件里，也不应该依赖某个页面布局才能成立。

文章和项目都被放进内容集合，用明确的字段描述标题、摘要、日期、分类、封面和发布状态。页面只负责读取和呈现。以后即使首页彻底改版，已有内容也不需要跟着搬家。

const publishedPosts = posts
  .filter((post) => !post.data.draft)
  .sort(
    (left, right) => right.data.pubDate.getTime() - left.data.pubDate.getTime(),
  );

这种分离带来一个很实际的好处：新增内容时，我只需要回答“这篇东西是什么”，而不是重新处理“它在每个页面里应该长什么样”。

把维护成本当成设计约束

我曾经很喜欢为网站设计复杂的内容模块：文章可以有多种卡片样式，项目可以自由组合大图、视频和数据面板。它们在设计稿里很丰富，真正写第二篇内容时却开始变成负担。

这次我刻意缩小首版能力：稳定的正文排版、清晰的元信息、一张有辨识度的封面，以及足够简单的导航。只保留那些会反复使用的结构。

判断一个功能要不要加入，我会问三个问题：

它是否帮助读者更快理解内容？
下一篇文章是否还会使用它？
如果半年后要修改，我能否在十分钟内找到位置？

只要有两个答案是否定的，它就不应该进入首版。

让视觉系统服务于内容

个人网站需要个性，但个性不等于每个区域都争夺注意力。我把视觉重点留给标题、封面和少量强调色，正文则尽量克制。页面之间共享间距、字号和颜色规则，让读者在不同内容间移动时不必重新学习界面。

我也尽量让动效表达状态变化，而不是单纯证明页面“会动”。悬停反馈告诉读者什么可以点击，进入动画帮助建立层级；如果一个动画无法回答它在解释什么，就先不加入。

给未来的自己留下出口

可持续并不意味着永远不改。恰恰相反，一个可持续的网站应该允许局部替换：内容格式稳定，组件可以重写；链接结构稳定，视觉语言可以演进；发布流程稳定，技术栈仍然可以升级。

所以我没有试图一次规划未来五年的所有栏目，只为当前真实存在的内容建立边界。等某类内容累积到值得拥有独立页面时，再从使用中长出新的结构。

最终，这个网站更像一间持续整理的工作室，而不是一次完工的展厅。它不追求“完成”，而是保持一种低阻力的更新状态。对个人网站来说，这可能比任何首屏特效都更重要。