个人作品
个人网站重构
把偏模板化的 Hugo 博客改造成一台 8bit 复古操作系统,同时不丢掉写作、搜索和静态部署能力。

项目信息
- 状态
- 持续迭代
- 职责
- 规划、设计、开发与内容整理
- 工具
- Hugo、原生 JavaScript、GitHub Pages、Cloudflare Pages
- 时间
- 2026-07-20
相关链接
项目目标#
这个网站既是个人博客,也是小游戏和其他作品的长期归档入口。核心取舍从一开始就没变过:不为了外观从零重写,而是在保留 Hugo 的写作、搜索、RSS 和静态部署能力的基础上,把表现层换成有辨识度的东西。
第一阶段:把地基修好#
- 将站点和文章图片迁回 Git,移除失效图床依赖。
- 建立 Godot 在线试玩页面骨架,游戏运行时只在用户点击后加载。
- 建立作品内容类型和轻量视频组件。
- 增加构建质量门禁:断链、页面锚点、图片替代文本、搜索索引、按需加载规则和体积预算,检查不过就不发布。
第二阶段:改成一台 8bit 操作系统#
2026 年 8 月把整个表现层重写成模拟 8 位机操作系统:桌面、图标、可拖动窗口、任务栏、CRT 滤镜和开机自检。
这一步移除了原来的 Blowfish 主题——它的设计语言和操作系统外观直接冲突,留着会一直打架。全部模板、样式和脚本改为自建,仓库不再有任何 Git 子模块。
几个我自己比较满意的决定:
- 每个窗口都对应一个真实网址。 服务端渲染出完整窗口,窗口管理器抓页面时直接读它。一份标记同时满足 SEO、无 JavaScript 可读和客户端开窗,不需要为外壳另外维护一份内容接口。
- CRT 滤镜不做几何形变。 扭曲文字不耐看也不好读,弯曲感靠圆角、暗角和玻璃高光组合就够了。
- 正文用系统易读字体,界面保持像素字体。 长篇学习笔记全用 12px 像素字体读起来太累;分层之后风格没破,可读性也保住了。
- 音效全部用 Web Audio 现场合成。 13 个音色,零音频文件,对体积预算没有任何成本。
- 桌面上有个加密盘,内容在构建时用 AES-GCM 加密,产物里只有密文没有明文页面。但它不是机密存储——纯静态站点没有服务端校验,密文公开可下载,短密码可以离线枚举。定位就是「不想被搜到」而已。
外观层最后的成本是压缩后 38 KiB 样式加 38 KiB 脚本,没有任何前端框架。
后续方向#
继续补充真实游戏、开发视频和项目复盘。像素字体目前是首屏最大的一块固定成本,内容规模再长的话会评估子集化。网站仍会保持纯静态部署,不引入需要长期付费维护的应用服务器。