从Hexo到Astro
3 min
为什么
动机?
直到前几天我的博客一直使用 Hexo,而且整个工具链还是很旧的版本,靠flake.lock
和package-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()
多返回一份旧路径。由于评论区是按地址栏的路径区分的,所以给评论区组件加了一个可选属性用来覆盖路径设置,在旧链接页面里改用新链接对应的评论区。
整点新组件
链:
License: