目标与背景
我一直想要一个能长期沉淀学习笔记和项目经历的小窝：长篇技术排查写进「文章」，阶段性的作品与实验进度整理进「项目」，平时零碎的想法和折腾日常则放进「动态」。「佩璃的小屋」既是我的个人知识库，也是我按自己审美打磨前端细节与阅读体验的自留地。
站点最早基于 Zola 搭建，随着内容类型和交互需求逐渐丰富，在 2026 年 10 月完成了向 Astro 的本地重构迁移。
我的工作
整个站点由我独立设计与维护，涵盖内容数据模型、页面布局与视觉样式、按需加载的原生交互脚本，以及配套的草稿脚手架、构建期完整性检查和 Playwright 浏览器回归测试。
日常写作完全围绕本地 Markdown 与扁平化的顶层 YAML 字段展开；文章分类、标签与项目技术栈在构建阶段自动归并汇总，既支持预设标准名称与图标，也能自动兼容新添加的标签。
实现内容
- 内容组织与双向关联：首页集成文章分页流、精选项目与最近随记；项目详情页按“里程碑时间线 → 聚焦图库 → 项目正文 → 关联文章”展开，文章与项目阶段可双向跳转，动态时间线则自动汇总文章发布、项目节点与手写随记。
- 按需搜索与多维筛选：全站全文搜索基于 Pagefind 构建，支持关键词检索与分类/标签组合过滤；项目列表提供纯前端的分类并集与技术栈交集筛选，所有筛选状态均同步至 URL 参数，方便直接复制分享。
- 阅读体验与无障碍细节：配备樱花粉点缀的深浅双主题、响应式多端布局、桌面/手机壁纸轮换与柔化背景补齐的完整比例图片；项目图库支持键盘方向键切换与原图灯箱查看，且在禁用 JavaScript 时依然保证正文与全部截图正常可读。
方案与取舍
技术选型坚持轻量、可控的纯静态路线：使用 Astro + TypeScript + SCSS + 原生 JavaScript 在构建期直接生成 HTML，不引入后端数据库或重型前端运行时框架。图标在编译期直接输出为内联 SVG，Mermaid 图表渲染与 Pagefind 索引分片只在真正用到的页面和操作时才按需加载。
为了方便长期用 Git 管理，所有文章配图与正文同目录存放，GitHub 仓库统计信息采用本地快照而非构建时联网拉取。草稿与未来日期内容在底层共享模块中统一拦截，正式产物（dist）与含草稿的预览目录（dist-drafts）物理隔离，最后由 GitHub Actions 在跑完测试与链接检查后自动部署至 public 分支。
复盘与维护重点
当站内不再只有单一的时间序文章列表，而是把文章、项目里程碑和动态串成一张网之后，维护的重心就从“写好单个页面”变成了“守住全局规则的一致性”——比如草稿项目绝不能通过公开文章的关联卡片漏出来，项目状态必须如实由已发生的里程碑节点推导。
把这些约束全部写成构建检查与自动化测试后，平时写文章就不用再提心吊胆地靠脑子记规则，可以把精力安心放在记录内容和打磨阅读细节上。