你好，我是小树。这是我为你写的第 50 封信。每期都会同步更新在微信公众号一颗小树和竹白专栏。现在有 203 位朋友订阅了这封信，也欢迎你邮件订阅，第一时间收到更新推送。
这篇文章是我用 Astro 重构个人博客的经验总结。
内容分为以下几部分：
- 为什么想要重构博客
- 为什么选择 Astro
- 博客迁移过程
- Astro 的优缺点
如果你也有类似的需求，希望这篇文章对你有帮助。
为什么想要重构博客？
主要原因是颜值不够，Next 主题用了太久，有点审美疲劳。
另外一方面是因为 Hexo 的架构相对比较旧，还是基于 nunjucks 模版的渲染，很多社区现代化的前端组件集成不方便。
还有一个原因是希望了解下时下流行的 Island 架构，并且借助这次重构，尝试找到比较便捷的高性能内容站点解决方案。
为什么选择 Astro?
关注 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 的优缺点
预先说明：Astro 框架默认依赖是很少的，TailwindCSS 等能力是 Astro Paper 这个主题内置的，非必需。
优点：
- 开箱即用，常见的 RSS、Sitemap 等能力都很容易集成
- 默认支持 SSG，没有 JavaScript 依赖，页面加载和渲染非常快
- 类型安全，Markdown 文件的 frontmatter 可以用 Schema 来约束，背后是基于 Zod 的类型校验
- 支持集成 Typescript、React、TailwindCSS 等常见技术栈，定制起来更顺手
- .astro 页面有点像 Vue 的单页面模版，可以很简单的实现数据的获取和转换，并且可以通过 JSX 的方式互相引用
- 绝大部分功能逻辑都由自己掌控，相较于 Hexo 主题的黑盒逻辑，定制更容易
缺点：
- 相较于 Hexo 主题开关式的配置方式，更灵活，但通用性会变弱，功能需要额外的开发成本
- TailwindCSS 和其中的的 Typography 插件的代码写起来可读性很差
- 没发现页面模版的能力，额外写了一个 Node.js 脚本来通过模版创建新文章
- 没了自动生成永久 slug 的能力，需要自己写一个具有语义的名称，但 url 可读性好一些
- 构建会比之前略慢，但基于自动的流程，影响可以忽略不计
说了这么多，最重要的收获是：基于 Astro 框架，能够快速上线、高性能内容站点，并且用很低的成本持续管理内容。
最后，欢迎访问我的新博客：https://yeshu.cloud
碎碎念
说点题外话，从这期开始标题上就不加序号了。一来能避免标题太长影响观感，二来能减弱文章的时间顺序，方便后续专题的整理。如果有什么其它建议或意见的话，也欢迎留言反馈给我。
谢谢你的关注，我们下期再见。👋🏻
往期推荐
你也可以在这里找到我：即刻、Twitter、微信公众号一颗小树。
这里是小树的 newsletter。 每周一发布，欢迎订阅。 如果你觉得这篇文章对你有用，欢迎分享给更多好友。