从博客园到自己的服务器。一次关于表达、设计与性能的迁移。
在博客园写字的第一百多天，我决定给自己造一个房间。
它不需要很大，但要足够安静；不需要很多人来，但要能装下那些没地方放的句子。于是有了这个站点：一台 2 核 2G 的云服务器、一个 Nginx、几张自己调的 CSS，以及一张看了很久的插画。
为什么要有自己的博客
平台有平台的好处：写完就发，不用管服务器，也不用担心样式。但写到后来，总会想要一点别的东西。
- 完全的控制权。 字体、留白、导航、404 页面，甚至一句标点后面的间距，都可以自己决定。
- 可被记住的样式。 我希望别人第二次来的时候，还能认出这是同一个地方。
- 更小的负担。 没有数据库，没有插件，没有不断弹出的升级提醒。打开就是文字。
- 一块可以练习的土地。 建站本身就是一篇文章：选型、设计、部署、优化，每一步都值得记录。
博客园仍然是重要的。那里有编辑器、有推荐、有一群写了很久的人。这个站点更像一个备份，也是一种更私人的表达方式。旧文章会慢慢搬过来，原文链接会保留。
黄、紫、黑
视觉的起点是那张插画：砖墙、涂鸦、霓虹黄和紫色的阴影。
我没有把它做成一张普通的全屏背景，而是让它从右侧进入画面，再用渐变把左侧压暗，给标题留出呼吸的位置。这样它既是背景，也是构图的一部分。
黄色负责提醒，紫色负责做梦，黑色负责让它们都安静下来。
具体到界面里：
- 黄色只给真正重要的东西：主按钮、当前状态、关键数字、链接下划线。
- 紫色用于氛围：光晕、卡片边缘、分隔线、悬停时的阴影。
- 黑色不是纯黑，而是带一点蓝紫的
#07060a，这样屏幕上的层次不会糊成一块。 - 英文标签用等宽字体，全部大写，像机器打印出来的坐标。
- 卡片切掉一个角，边框细到几乎看不见；鼠标经过时才亮起来。
我想避免那种“所有东西都在发光”的赛博朋克。真正的夜晚不是一直亮的，霓虹只是少数几处。
它现在有什么
第一版的功能尽量完整，但不做多余的事：
- 首页：最新文章、分类频道、作者卡片、RSS 入口。
- 文章库：按分类和标签筛选，带即时搜索。
- 文章页：目录、阅读进度、代码复制、上一篇/下一篇、相关阅读。
- 归档：按年月排列全部文章。
- 标签：全部标签与出现次数。
- 关于：作者、站点档案、时间线。
- 搜索：
Ctrl / ⌘ + K或按/唤起，支持标题、摘要、标签和正文。 - RSS、站点地图、
robots.txt和自定义 404。
评论暂时没有接。与其放一个空荡荡的评论区，不如先留一个入口：想说话的人可以去博客园找我。等这个站点再稳定一点，再考虑用 Webmentions 或者自建评论。
为什么是静态站
一开始考虑过 WordPress、Typecho、Halo。它们都很成熟，但对我来说，功能过剩了。
这个博客的主要内容是文章，没有用户系统，没有电商，没有复杂的后台。既然如此，最合适的架构就是：构建时生成 HTML，运行时只让 Nginx 发文件。
本地 Markdown
↓ npm run build
静态 HTML / CSS / JS / JSON
↓ rsync
Nginx → 浏览器
这样做的直接好处：
- 服务器不需要 PHP 或 Node 常驻进程，2 核 2G 绰绰有余。
- 页面是提前算好的，TTFB 只取决于磁盘和网络。
- 攻击面很小：没有登录页、没有数据库、没有可执行的 PHP。
- 整个站点可以打包带走，换服务器只需要重新解压。
代价也很明显：写作和发布是两步。改完 Markdown 要重新构建、上传。为了少一点麻烦，我写了一个部署脚本和一轮线上自检；后面如果更新频率变高，再考虑自动构建。
性能是设计的一部分
这张插画原始大小是 645KB。对首屏来说，它太重了。
所以我做了三件事：生成 640 / 960 / 1280 三个尺寸，输出 AVIF、WebP、JPEG 三种格式，用 <picture> 让浏览器自己挑；给首屏图片加 fetchpriority="high" 和预加载；把装饰性的网格、扫描线、光晕全部交给 CSS，而不是再叠几张图。
结果写在另一篇文章里：在 960px 宽度下，首屏主图从 645KB 降到了约 65KB；手机 1x 屏的 640 档约 43KB，2x 屏会自动选择 960 档。
接下来
这个站点还会继续长。短期想做的几件事：
- 把博客园的旧文章整理、补全，保留原文链接。
- 给文章加入真正的更新时间和修订记录。
- 做一个更安静的阅读模式。
- 等域名备案和 443 端口就绪后，补上 HTTPS。
如果你也在犹豫要不要搭自己的博客，我的建议是：先写，再建。工具是次要的，持续记录才是这个房间里真正重要的东西。
