我给自己的数字世界造了一个家：www.heylai.cyou 的诞生记

一台跑了很久的服务器，几个零散的子域名，和一个「总觉得少了点什么」的念头。这个九月，我终于把它们变成了一个家。

缘起：一个模糊的想法

事情开始的时候，我脑子里只有一个很模糊的画面：打开自己的网站，不是冷冰冰的「站点创建成功」，而是一面流动的极光，浮着几块毛玻璃，时间在上面走，天气在角落里悄悄更新，我散落在各个子域名的东西——博客、RSS 阅读器、问卷、在线 IDE——都能从这里一跳即达。

我说不清楚什么叫「好看」，但我心里清楚它不是什么：不是图标的堆砌，不是信息的倾倒，不是那种一眼就让人想关掉的仪表盘。

于是我做了一件以后会反复庆幸的事：我没有急着动手，而是先让 AI「采访」了我。

一次一个问题，从「谁会在什么设备上看这个页面」问到「便签要不要公开」，从壁纸的四种形态问到后台编辑的自由度。十几个问题问完，那个模糊的画面变成了清晰的需求清单：毛玻璃、动态壁纸、可拖拽的组件、赛博风的时钟艺术字、按访客 IP 定位的天气、对接我服务器上已有的 FreshRSS、一个能拖拽排布的后台……

原来我不是没有想法，只是缺一个把它挖出来的人。

设计：在「说不出哪里不好」里打捞答案

第一版上线后我看着总说「不够美观，但说不出具体问题」。让我意外的是，对方没有敷衍一句「我帮你优化一下」，而是像个真正的产品设计师那样，给了我四个具体的选项让我选：壁纸往深邃还是明亮的调性走？卡片要通透还是厚重？字体排印改不改？便签待办用什么形态？

我选了「深邃但更有色彩」「更通透轻薄」，还提出了自己的想法：时钟要赛博艺术字，天气挪到角落做成悬浮角标。

于是有了现在这个样子：极光在深蓝紫的夜空里缓慢流动，卡片轻薄得像窗上的雾气，时钟用 Orbitron 字体泛着主题色的辉光。后来我明白了一个道理：审美是问出来的，不是猜出来的。「说不出哪里不对」不是审美差，只是缺少把它翻译成选项的人。

开发记录：那些 3 秒定位不到的 bug

这部分是写给同样折腾服务器的人看的，也是我日后最想回来看的部分。整个项目两天成型，之后又迭代了三轮，每一轮都留下了几个「当时气死、事后好笑」的瞬间。

一、手机端网格塌陷之谜

手机端截图像遭遇了地震：所有卡片叠在左上角。我查了很久 GridStack 的初始化参数，甚至怀疑是它不支持 4 列，最后翻它的 dist 目录才发现——GridStack 的 2~11 列宽度规则不在主 CSS 里，而在一个叫 gridstack-extra.css 的文件里。我只引入了主文件，12 列的世界正常运转，4 列的世界寸步不移。加一行 import，世界恢复。

二、从后台返回主页，页面永远停在加载动画

复现路径诡异：主页 → 后台 → 浏览器后退，页面就白屏在启动动画上，刷新才好。排查发现是 Vue 的 watch 写法问题：从后台返回时，数据已经是加载完成状态，watch 检测不到任何「变化」，启动流程永远不会执行。修复只要一个参数：{ immediate: true }。最隐蔽的 bug 往往藏在「状态没有变化」这种最平凡的场景里。

三、音乐播放器的图标变得巨大

音乐组件依赖 CDN 上的 APlayer，某天图标突然膨胀成 120px 的巨物。排查发现 jsdelivr 在服务器上时通时断，CSS 加载失败导致样式全丢。与其祈祷 CDN 长命百岁，不如把播放器打进本地构建——npm install aplayer meting 两个包完事。那一刻我再次确认了工程师的直觉：凡是会坏的依赖，终会坏掉；能本地化的，就别远行。

四、一个被「干净地」杀死的进程

上线一周后的某个早晨，主页 502。上服务器一看，服务停在 7 小时前，journal 里没有任何报错、没有登录记录、没有停止命令——进程被外部直接发了 SIGTERM，最大嫌疑是腾讯云的安全 Agent 误杀。更让我后背发凉的是：当时服务配置的是 Restart=on-failure，而「被干净地终止」不算 failure，systemd 就这么眼睁睁看着它躺了 7 个小时。改成 Restart=always 之后，无论谁想杀它，3 秒内都会爬起来。

五、后台里藏着一个我从未打开过的页面

迭代待办打钩功能时顺藤摸瓜发现，后台「便签与待办」页竟然一直是坏的——接口按一个不存在的字段排序，悄悄 500 了很久。因为它坏着的样子看起来只是「列表为空」，我从未点开过它。修完之后我才意识到：你以为它坏了，和你看见它坏了，中间隔着一整个产品的盲区。

那些被「采访」出来的决定

回头看，这个项目里我最满意的几个设计，都不是我自己想出来的，而是被问出来的：

• 便签和待办为什么不占格子？ 因为采访聊到一半，我意识到它们是「随手记一下」的东西，不值得占据主页的黄金位置。于是它们变成了悬浮在两下角的贴纸卡——按住顶栏能拖到任何地方，位置会被记住；后台打钩，前台就会亮起绿色的小勾。
• 时光进度为什么好看？ 因为「进度条」没有时光感，但「一年 365 颗小圆点，每过一天点亮一颗，今天是一颗呼吸的白点」有。第一次在屏幕上看到自己的一年被压缩成一片渐次亮起的星海时，我盯着看了很久。
• 壁纸为什么是极光？ 因为「深邃但更有色彩」这六个字，最终变成了深蓝紫夜空里六层缓慢流动的极光色块。代码画出来的壁纸没有版权、没有体积、永远清晰。

服务器上的旧邻居们

这个主页还有一个隐藏的温柔：它不是孤岛。RSS 组件直接读我服务器上跑着的 FreshRSS，站点卡片通向 blog、code、claude、note 这些早已存在的老邻居。之前它们像散落在一片土地上的几间小屋，如今终于有了一条从「家」出发的小路。

写在最后

如果你也想给自己的数字世界造一个家，我的建议是：

1. 先把模糊的想法说出来，哪怕一开始只是「想要个好看的首页」。说不清楚就让人来问你，一次一个问题。
2. 把「说不出哪里不好」当成起点而不是绝境——具体的选项会把审美从雾里捞出来。
3. 给自动恢复留余地（Restart=always 救了我的 502），把依赖拉回本地（CDN 终会背刺），定期点开产品的每一个角落（盲区里的 500 错不会自己喊疼）。

这个家现在还在生长：博客还是占位页，note 应用躺在服务器上等一个前端。但没关系，家就是这样，一砖一瓦慢慢添。

项目地址：https://www.heylai.cyou
技术栈：Vue 3 + Vite + GridStack / Express + SQLite / 宝塔 Nginx 反代

本文写于 2026 年 9 月，服务器与主页仍在持续迭代中。