为啥迁移
大约两三年前 Gatsby 被收购后更新就开始变得缓慢了，于是很多人选择迁移到其他的框架去，几乎首选的都是 Astro 这个后起之秀，我也不例外。
次要原因还有 Material UI 的新样式计划已经“中道崩殂”了，我一直在期待这个新的 Material You 样式😭。既然这样就一起换了。
打算把博客迁移到 Astro，功能不多因此不打算引入 React 了，但是每个组件都得自己写，便想起了号称浏览器原生支持的 web component，立刻 npm install！结果试了两个都是依赖 lit 的！而 Astro 还刚把 lit 的支持删了！为什么这些 web component 组件不打包好再发包啊？不是浏览器原生支持嘛？🤔
但是我的迁移之路也推进的不快，据我发推过了差不多一年了，现在才搞好😂。主要是因为平时工作已经把我对编码的热情消耗得差不多了，回到家后只想好好玩几把游戏，所以我也挺佩服那些有本职工作还能在开源社区贡献的大佬们。
然后呢，我前段时间离职了，玩了几天后我又回满了能量条，这两天就把剩余的迁移工作都完成了，加上现在有了 AI Agent 的帮助，效率可以说是大幅提升！这篇文章的封面也是 AI 生成的！当然文章还是我自己一个字一个字敲的，写作的乐趣还是留给自己吧。
新的技术栈选择
JS 框架——React
本来是打算完全抛弃 React 直接写 Astro 文件的，后面发现直接写原生 JS 还是太折磨了，于是又拥抱回 React 了😉。
状态管理——Nano Stores
Astro 是“群岛架构”，每个岛屿或者说每个组件之间都是不互通的，因此像 React Context 这样的全局状态管理就用不了了，Astro 官方推荐的解决办法是 Nano Stores。
组件/样式库——Beer CSS
这块的选型可以说是最为艰难的。
同样受制于群岛架构，熟悉的 React 组件库都没法直接拿来用。它们大多依赖 React Context 来共享主题、弹窗状态或者一些全局配置，且我需要 Material You 风格的样式。我最开始尝试的是 Google 自家的 @material/web，基于新的、号称浏览器原生支持的 Web Component 标准。但实际用起来发现有点多此一举······
首先，它依赖 lit 这个库，也就是还不能直接用，而是像 React 一样编译成 html、js 后才能用······这令我不仅思考，Web Component 的意义到底在哪？且 Astro 在 5.0 就移除了对 lit 的支持。
后面选择了一个 CSS 框架——Beer CSS。使用简单！全局引入它的 CSS 文件，然后在需要的元素上加上对应的类名就行了，基本就跟原生网页一样，这也使得它无论在 Astro 还是 React 上都有同样的开发体验。基本就是群岛架构的完美解了！
<button className="chip round">示例</button><button class="chip round">示例</button>迁移
如何一比一复刻原博客就不说了，有几个功能点的复刻我觉得可以记录下。
评论
评论没变还是用 Waline，但正好看见 LeanCloud 公告说要停止对外服务了，所以还是得迁移一下数据库。后台之前是用 Netlify Function 跑的，想着既然如此还是放一起吧，反正我的服务器流量也用不完，而且这样能降低评论加载延迟。Waline 的官方文档提供了独立部署的方式，我选择了用 docker + sqlite 的方式部署。数据迁移这步直接在评论后台点导出、导入就行了，会自动转换还是很方便的。
推文卡片
之前用 react-tweet 来实现这块的功能，后台同样是 Netlify Function 部署的。迁移的时候想了下，反正我都是在 Markdown 文件里用，不如直接搞个 Remark 插件，这样后台也省了！消耗了 200 AI Credits 外加五分钟后，我就得到了我想要，这要是放以前我至少得花两天才能搞出来🥲。
链接卡片
之前用自己写的库，通过 puppeteer 来获取预览图和 SEO 信息。文章数多起来后十分影响打包速度，因此最后只留下获取 SEO 信息生成链接卡片这部分功能，将其迁移到了本地插件去。
部署
为了获取链接预览图需要 CI 支持 CJK 字体，所以之前是通过 GitHub Action 打包好再推到 Netlify 上去部署，现在不需要预览图打包这步也交给了 Netlify。此外 Astro 的 Netlify 适配器很好用，无需配置就能使用 Netlify Image CDN，很棒！现在连图像都不用处理，打包速度飞快！代码推上去后不用半分钟就能看到新网页了。
最后
迁移这事就说这么多。后面还有别的一些想法想要实现，等都完成了再找下一份工作吧，希望一切顺利！
Preview: