Astro 搭建个人博客

你好，我是小树。这是我为你写的第 50 封信。每期都会同步更新在微信公众号一颗小树和竹白专栏。现在有 203 位朋友订阅了这封信，也欢迎你邮件订阅，第一时间收到更新推送。

这篇文章是我用 Astro 重构个人博客的经验总结。

内容分为以下几部分：

如果你也有类似的需求，希望这篇文章对你有帮助。

为什么想要重构博客？

主要原因是颜值不够，Next 主题用了太久，有点审美疲劳。

另外一方面是因为 Hexo 的架构相对比较旧，还是基于 nunjucks 模版的渲染，很多社区现代化的前端组件集成不方便。

还有一个原因是希望了解下时下流行的 Island 架构，并且借助这次重构，尝试找到比较便捷的高性能内容站点解决方案。

关注 Astro 其实有段时间了，之前很多地方会把它和 Next.js 放在一起，没有太深究。

最近社区里有不少人用 Astro 改写了自己的博客或者是其它类型的内容站点，风评很好。看了官方文档之后，确实和我之前理解的不同，Astro 会更专注在内容站点，而 Next.js 更偏向于构建 Web APP。

尝试了跑了一个 demo 之后，发现上手也足够简单，技术栈很熟悉。

默认支持 Markdown 和 MDX 的渲染，这意味着迁移起来成本也会低不少。

接下来，说干就干。

迁移过程中做了以下工作：

由于构建配置不兼容，所以单独切出了一个 v2 分支和独立的 Vercel 项目用于部署验证。

基于 Astro Paper 主题初始化了工程结构，只保留了之前的博客内容和图片。

检查页面的基础功能：如博客列表、标签、关于、搜索等基础功能，然后是诸如页面信息（用于 SEO）、文章展示字段、社交媒体、数据埋点等细节。RSS 和 Sitemap 的能力是内置的，也不需要做什么修改。

这次重构把归档页面取消了，只是一个基于年份的分组列表，目前看没有必要单独一个路由来承载。

项目默认只有 blog 一种文章类型，为了方便区分，利用 Astro 内置的 Collection 能力，新增了 newsletter 类型的文章，顺便统一了类型定义和文章的查询方法，避免获取全部文章列表时有遗漏。

还剩下一些像返回页面顶部、赞赏、知识产权声明等能力，暂时就没有了，后续慢慢再补上。

由于一共有一百多篇文章，靠人力去修改格式，就违背了自己不要做低水平重复的原则。

用 Node.js 简单写了一个迁移脚本，将 Markdown 文件的 frontmatter 转换为新的规范。

Markdown 的内容渲染是完全兼容的，所以到这里开发工作也就接近尾声了。

最后是检查功能，比如页面的路由是否有不兼容的更新，保持前后版本已有页面的路径一致，避免从之前的链接访问过来就找不到内容了。

再者是页面的文案和样式，需要比较细致地走查和调整。

经过这一番折腾之后，终于把代码合并到了主干分支，发布到了正式环境。

整个迁移过程用了 1.5 天。

预先说明：Astro 框架默认依赖是很少的，TailwindCSS 等能力是 Astro Paper 这个主题内置的，非必需。

优点：

缺点：

说了这么多，最重要的收获是：基于 Astro 框架，能够快速上线、高性能内容站点，并且用很低的成本持续管理内容。

最后，欢迎访问我的新博客：https://yeshu.cloud

说点题外话，从这期开始标题上就不加序号了。一来能避免标题太长影响观感，二来能减弱文章的时间顺序，方便后续专题的整理。如果有什么其它建议或意见的话，也欢迎留言反馈给我。

谢谢你的关注，我们下期再见。👋🏻

你也可以在这里找到我：即刻、Twitter、微信公众号一颗小树。

这里是小树的 newsletter。每周一发布，欢迎订阅。如果你觉得这篇文章对你有用，欢迎分享给更多好友。