从Hexo到Astro

3 min

为什么

动机?

直到前几天我的博客一直使用 Hexo,而且整个工具链还是很旧的版本,靠flake.lockpackage-lock.json苟命。作为博客,文字比这些门面重要,所以本来没有动机迁移。

机缘巧合发现了这个主题,朴素的风格和排版我很喜欢,不过动画和一些细节不尽人意,但很快在 Astro 的主题列表发现了这个,是前者同风格的再创作,好看好用,那么我就有迁移的动机了(

好在哪

完全 TypeScript!还有现代前端工程的 Ergonomics. 静态类型,良好的模块化,使我真正有意愿去入门前端,再给主题做点自由的魔改了。

我原来在 Hexo 上用的主题使用的是 ejs,是个 manipulating string 的模板引擎,满屏模板可谓可读性灾难,没有 Typed 寸步难行。

迁移

Astro 毕竟是通用 SSG,自己从头搓博客还是麻烦的,好在我的动机来源就是现成的 Astro 项目,Just git clone, pnpm install 然后 pnpm dev,把原来的文章复制过来改一下 frontmatter,在配置文件里看着类型和文档改改,大体上就迁移好了。这个主题的可配置部分比较少,那么再做一些额外的工作和魔改:

  • 加友链页:把关于页相关的代码 copy 一下
  • 给关于页和友链页补上评论区:和普通文章对比一下源文件,把相差的<Comments />组件补上
  • 首页里文章的标题和摘要的字重和大小对比不太明显,给标题改重了点,摘要改小了点
  • 首页文章没有显示 tags, 加上
  • 加个全站统一的 CC License 吧

旧的文章链接呢?

原来的文章链接形如/YYYY/MM/DD/slug/, 现在的链接是/posts/slug/(两者的 slug generate 方式还有细微差异),为保留旧链接,让 Astro 生成两份页面就好了,先给旧文章的 frontmatter 里加一个自定义的legacyPaths字段,然后修改getStaticPaths() 多返回一份旧路径。由于评论区是按地址栏的路径区分的,所以给评论区组件加了一个可选属性用来覆盖路径设置,在旧链接页面里改用新链接对应的评论区。

整点新组件

链:

links

License:

license