前言

之前一直使用 Hexo 的 solitude 主题,虽然颜值在线,但 Hexo 本身体积庞大、配置繁琐,每次构建都要等很久,再加上主题升级和插件兼容的问题,用起来越来越不顺手。于是萌生了换一个更轻量、更现代的技术栈来重建博客的想法。

刚好 Astro 这两年非常火,号称”为内容驱动网站而生”,构建速度快、支持 islands 架构、还能混合使用 React/Vue 组件。更重要的是,它原生支持 Markdown,对博客场景非常友好。既然如此,干脆从零开始手搓一个主题!

说干就干,打开 Trae,开启 AI 结对编程模式,开始了长达 14 小时的鏖战。

技术栈

技术说明
Astro静态站点生成框架,核心驱动
TypeScript类型安全的脚本语言
Node.js ≥22运行时环境
Markdown文章写作格式
CSS自定义主题样式,无 UI 框架依赖
Twikoo评论区系统
Meting API网易云音乐歌单接入
腾讯云 EdgeOneCDN 加速 + 自动缓存刷新
AI 摘要文章自动生成摘要(调用大模型 API)
本地搜索构建时生成文章索引,支持全文检索

设计与借鉴

网站的视觉风格大量借鉴了 solitude 主题,尤其友链页面的分组展示、关于页面的个人信息卡片等。solitude 的配色和动画细节做得非常精致,我在 Astro 中通过纯 CSS 尽量还原了这些效果,同时根据 Astro 的组件化特性做了适当重构。

踩坑记录

整个过程并非一帆风顺。构建时遇到了路由模式的问题(file vs directory 的取舍)、CommonJS 模块在 ESM 下的兼容问题(archiver 的导入方式)、以及 Twikoo 评论区样式覆盖等坑。好在有 AI 辅助,大部分问题都能快速定位和解决。

总结

使用 Astro 从零自建博客,鏖战 14 小时终于完工。虽然过程很痛苦,但当看到构建完成、部署上线的那一刻,所有疲惫都化成了成就感。相比 Hexo,Astro 的构建速度快了数倍,开发体验也更加现代。如果你也想折腾博客,不妨尝试一下 Astro。