背景

博客从 2015 至今一直用的是Typecho ，当时看中了 Typecho 的轻量、占用小等优点，但是由于名气远不足 Wordpress ，所以社区支持和主题插件都比较少。

而且 Typecho 的更新和维护比较慢，所以一直都有重建的想法，但想法一直只停留在脑海中。

然后就一直拖着直到去年 Blog 的 VPS 服务商失联，当时是因为自己美西梯子的服务器出现问题所以也只是对那个 VPS 换了个服务商，也知道后续 Blog 的服务器也可能出现类似问题但因为各方面的原因一直没做迁移或重建工作。（唉，现实所迫）

从今年初开始我自己的 Typecho 程序所在的服务器开始出现连接问题，一开始只是 IPV4 无法连接，到了前阵子连 IPV6 也无法连接了。 （说你啥好呢，知道出问题了也不急）

于是被逼无奈决定重新搭建一个博客（

框架选择

先直接说结论：这次我选择了 Astro 作为博客的框架。

但为什么选择 Astro 呢？

首先 Wordpress 和 Typecho 这类动态博客框架很重，虽然很适合日常使用和新手入门，但由于性能开销尤其是加了各种插件后比较大，我不想再搭一次 LNMP 环境然后体验什么都要慢个半拍的感觉。

再说 Hexo ， Hexo 的问题是对于新特性的支持度太差了，这几年的新特性都不支持或者要自己实现，有一种在用十年前的老古董的感觉。

然后是 Hugo ， Hugo 的问题在于扩展性比较差，虽然可以通过插件来实现一些功能，但是插件的质量参差不齐，而且官方文档也不够详细。以及 Hugo 的生态圈也开始有衰落的趋势。

接下来是 SPA (Vue, React)，每次加载都要下载一堆 JS 在浏览器端渲染，体验不是很好。

其他的比如 Next.js 生态很好但是比较重， VitePress 生态也才刚起步不久之类的。

（以上这些也是 Blog 出问题了也一直没怎么动的一个原因吧）

直到有一天看到了有关 Astro 的贴子，于是就去了解了一下，这不看不知道一看好家伙野心很大啊！

Astro 的特点是：

• 一个现代化的静态站点生成器，支持多种前端框架和组件。
• 构建速度快，性能好。
• 有丰富的生态系统和社区支持。
• 有详细的文档和教程。
• 有官方的 CLI 工具，可以快速创建项目。
• 有官方的组件库，可以快速开发。
• 有官方的部署工具，可以快速部署。

由于其本身独特的群岛架构设计，把页面内的各种元素都拆分成相互隔离的独立的组件，这种特性也使得 Astro 可以混用不同的框架甚至每个岛屿都用不同的框架，并且官方维护了很多集成可以很方便的添加到项目内。

如果不主动添加 JS 的话， Astro 构建的纯静态的，一行 JS 代码都没有的网页。以及各种资源文件如果没有用到的话就不会加载，比如你导入了一个图标库但是大多数人都不可能全用到，那么没有用到的部分就不会加载，进一步提升了性能。

极致性能和极致的灵活度，非常酷不是吗？

（但名气也不大啊，你还不如去用 Hugo 或者 Hexo 呢）（不过至少更新不慢文档也全不是吗？）（曾经确实搭过 Hexo ，不过只是为了应付备案审核x）

🧑‍🚀 Hello, Astronaut!

对于 Astro 来说，好的主题是好的开始，因为 Astro 本身并不是能开箱即用的博客框架，所以需要自己去实现很多功能，这时候如果有一个现成的模板就方便很多了。

之前看到了一个主题 HsuBlog ，但由于其本身是基于 Astro v2 的，上次代码提交也是两年前了，适配最新的 Astro v5 版本比较困难。

后来在 Astro 官方收录的主题 中我找到了 Yukina 这个主题，这个主题是基于 Fuwari 修改的，于是就决定主题的大概样式就是类似这样的。

Node.js 版本问题

在正式开始搭建 Astro 项目之前，其实遇到了一个小问题。一开始我是直接用 winget install nodejs 安装的 Node.js 版本是 24.4.0 ，然后使用的包管理器是 pnpm ，结果在创建项目并安装依赖时一直报错，提示 FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory ，我就想我 96G 的内存不会不足吧？

一开始我还以为是主题问题使得我从 Fuwari 换成了 Yukina ，然后在装其他的一些依赖的时候又出现了这样的问题。

但是其他的模板比如官方的模板就没问题，于是我就搜了一下这个错误，搜到了 https://github.com/pnpm/pnpm/issues/9743 以及相关联的 https://github.com/nodejs/node/issues/59057

然后我卸载了通过 winget 安装的 Node.js ，改用 Node.js 官网 下载的 LTS 版本安装包，安装后一切正常，依赖项也能顺利安装。

适配最新版本

由于我自己有追新的习惯，所以创建项目后立刻把所有的依赖全升到最新版本，结果等着我的就是无尽的报错。

首先是 Tailwind CSS ，由于主题本身用的是 Tailwind CSS v3 而我升级到了 v4 ，所以需要修改很多地方，靠着查看文档和找来 Gemini 这类的 LLM 勉强解决了报错问题。

但随之而来的就是排版混乱，很多样式都没有正确生效，靠着 Google 和 LLM 以及脑洞大开来调整最终解决。这对于一个前端技能树为零的我来说还是挺麻烦的，不过也算点新的技能了。

添加 MDX 支持

MDX ，即 Markdown + JSX ，是一个将 Markdown 和 JSX 结合在一起的语法，并且 Astro 官方提供了支持，可以在文章内导入和使用 Astro 组件和自定义组件。

但由于主题本身没有 MDX 的相关适配，所以我就自己动手丰衣足食，在主题中添加了 MDX 的支持。

由于官方提供了 MDX 集成的文档 所以直接使用

pnpm astro add mdx

就安装好了，但这其实只是适配的开始，因为还需要手动在 content.config.ts 中添加集成：

const blog = defineCollection({
  loader: glob({
    pattern: "**/*.{md,mdx}",

而我在这里就犯了一个习惯性的错误，习惯在半角逗号后面加空格，结果导致排查了半天的错误，找了半天改了很多地方最后才发现是这里的问题。

优化图片加载方式

由于 Yukina 的 avatar, banner 是直接通过 img 标签加载的，所以无法享受到 Astro 的图片优化功能，于是我就改成了和 Fuwari 项目中一样的方式：用 ImageWrapper 组件来加载图片，这样就可以享受到 Astro 的图片优化功能了。

添加文内属性显示

这也是看到 Fuwari 中的实现于是考虑搬过来的，过程比较曲折。从搬代码过来到修修改改就用掉不少时间，然后还遇到了比较奇怪的字体颜色问题，找了半天都没发现是哪里的覆盖了，最后是直接添加 !important 才算解决了问题。

以及在更新这篇文章的时候发现更新日期的显示出问题没有显示然后又找了半天，最后发现还是 content.config.ts 中的 schema 没有添加 updated 字段导致的。

但这也导致越来越想之后重构一遍了（

总结

这次博客重建选择了 Astro 作为框架，主要是看中了它的性能和灵活性。从最初的框架选择到主题适配，再到各种功能的添加和优化，虽然过程中遇到了不少问题，但最终都一一解决了。

从 Node.js 版本问题到依赖升级带来的各种报错，从 MDX 支持到图片加载优化，每一步都是一次学习和成长的机会。尤其是对于一个前端技能树接近于零的人来说，这次重建经历让我对前端开发有了更深的理解。

虽然目前博客已经基本可用，但仍有很多可以改进和优化的地方。希望通过不断的迭代和完善，最终能够打造出一个既实用又优雅的博客系统。

TODO

后续还需要做的事情：

• 完善其他页面比如关于我、友链等
• 使用 UnoCSS 代替 Tailwind CSS
• 添加评论系统，比如 giscus
• 文章内添加目录显示
• 重构整个网站，统一代码风格，做成标准的主题模板