Astro 博客搭建 #1：为什么选 Astro

想搭博客的人很多，但第一步就卡在选框架上。

我也是。试了好几个，最后选了 Astro。这篇记录我的选型过程和理由。

我试过的方案

最早用的是 Hexo。中文社区大，主题多，部署简单。

但用了一阵子就受不了了。主题想改点东西，得去翻 EJS/Pug 模板，文档质量参差不齐。而且生成速度越来越慢，文章多了以后每次构建都要等很久。

Hugo 快，真的快。几百篇文章秒级构建。

但 Go 的模板语法太反人类了。我写了两天模板，心态崩了。而且 Hugo 的主题生态虽然丰富，但大部分主题更新不活跃，想自定义也挺痛苦。

Next.js 能力最强，想做什么都行。

但杀鸡焉用牛刀。博客是纯静态内容，用 Next.js 意味着要处理 SSR、ISR、Server Components…… 对于一个博客来说太重了。而且打包出来的 JS 体积不小。

Astro 的核心理念正好戳中博客场景：

零 JavaScript 默认。文章页不需要 JS，Astro 输出的就是纯 HTML + CSS。只有你主动声明的交互组件才会加载 JS。

内容层（Content Layer）。Markdown 文件就是数据源，类型安全，构建时校验。不用折腾数据库或 CMS。

岛屿架构。需要交互的部分（评论、搜索）可以按需加载，不影响其他页面的静态性能。

构建速度快。目前十几篇文章，构建只要几秒。比 Hexo 快多了。

搭下来的感受：上手简单，想做好看需要花功夫。

Astro 本身不提供主题系统（不像 Hexo 有一键安装的主题）。你得自己写布局、写样式。好处是完全可控，坏处是前端基础不好的话会比较吃力。

我用 Tailwind CSS 来写样式，配合一些自己写的组件，大概花了一周搭出现在的样子。

base path 配置。部署到 GitHub Pages 的子路径（/blog），所有链接和资源路径都要注意 import.meta.env.BASE_URL。一开始忘了，样式和图片全挂了。
trailing slash。GitHub Pages 对 /about 和 /about/ 的处理不一样。统一设成 trailingSlash: 'always' 可以避免很多 404。
图片优化。Astro 的 <Image> 组件很好用，但放在 public/ 目录的图片不会被处理。需要用 src/assets/ 目录才能享受自动优化。
View Transitions。Astro 内置的页面过渡动画很方便，但和某些第三方库（比如代码高亮）有冲突。需要在 astro:after-swap 事件里重新初始化。

如果你想要一个：

那 Astro 是个很好的选择。

如果你完全不会前端，只想找个主题一键部署，Hexo 或 Hugo 可能更适合。

下一篇会讲具体怎么从零搭建：项目结构、内容配置、部署流程。

这是「Astro 博客搭建系列」的第一篇。系列文章会记录从选型到上线的完整过程。