跳到窗口内容

作品 / 个人网站重构

个人作品

个人网站重构

把偏模板化的 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 脚本,没有任何前端框架。

后续方向#

继续补充真实游戏、开发视频和项目复盘。像素字体目前是首屏最大的一块固定成本,内容规模再长的话会评估子集化。网站仍会保持纯静态部署,不引入需要长期付费维护的应用服务器。

持续迭代 2026-07-20

按任意键跳过