个人博客重构：从主题站点到内容系统

背景与目标

这个博客最初以手动修改主题为主。页面可以访问，但主题依赖、内容格式、图片资源和发布流程缺少统一约束。随着修改增多，新设备克隆后能否构建、旧链接是否稳定，以及视觉是否一致，都变得难以确认。

这次重构没有更换 Hexo，也没有增加 CMS。目标是保留 Markdown 和 Git 的轻量写作方式，同时把博客整理成一个可以长期维护的个人内容系统。

我负责确定网站方向、整理旧内容，并持续判断视觉是否符合自己的审美。实现范围包括工程依赖、主题管理、内容规范、首页与文章页体验、自动构建和质量检查。

网站最终围绕技术、日记和项目三个频道组织。技术成长通过真实文章、标签和项目体现，不再额外维护一份容易过期的技能清单。

工程运行时统一为 Node.js 22，站点使用 Hexo 8.1.2 和 Butterfly 5.6.0。主题代码直接纳入仓库，避免全新克隆依赖缺失的 Git 子模块。

写作流程增加了三条创建命令，自动生成统一的 Front Matter 和文章图片目录。内容检查遵循阮一峰的中文技术文档规范，并补充了标题层级、摘要、频道、标签、图片和永久链接规则。

视觉上保留沉浸式首页大图。首屏只显示名称与简短介绍，导航在首屏保持透明；内容区使用克制的液态玻璃和卡片层级，正文继续使用高对比度实体背景。浅色、深色、减少动态和不支持背景模糊的环境都有独立处理。

发布前由统一命令完成内容检查、图片优化、Hexo 构建、HTML 检查、链接检查、资源预算、交互测试、视觉回归和 Lighthouse 检查。推送到 hexo 分支后，再由 GitHub Actions 构建并发布到 main 分支。

液态玻璃需要背景层次才能成立，但过多透明表面会降低阅读效率。因此，玻璃只用于导航、搜索、目录和少量强调区域，文章正文与主要信息列表使用稳定的实体表面。

主题直接纳入仓库会增加代码体积，却换来了可重复构建和可控修改。对个人博客来说，这个取舍比依赖不完整的主题链接更可靠。

旧文章暂时保留了少量检查例外。它们不会阻塞新内容，但需要在后续重写时逐步移除。依赖审计中剩余的问题来自 Stylus 构建链，目前记录在依赖策略中，并限制在可信的本地构建环境内。

全新环境可以通过 npm ci 安装依赖，并使用 npm run verify 完成完整验证。技术、日记和项目文章可以通过快捷命令创建，图片会在构建前生成 WebP 和 AVIF 版本。

当前 Lighthouse 结果如下：

页面	Performance	Accessibility	Best Practices	SEO
首页	88	100	100	100
文章页	94	100	100	100

旧文章永久链接、RSS、Sitemap、CNAME、搜索、主题切换、代码复制和 Twikoo 评论也纳入了自动检查。

时间	内容
2026-07-26	完成工程地基、视觉系统、内容工作流和第一版项目展示。

这次重构最重要的变化不是某一个视觉效果，而是建立了可以持续演进的边界。内容、视觉和工程流程有了各自的规则，新修改能够被验证，旧问题也能逐步处理。

下一步是补充 About 页面、首页内容层级和真实项目案例，再按新的写作规范重写旧文章。个人网站不会一次完成，它会随着新的技术实践和生活记录继续更新。