Published on

从 jekyll 转向 Next.js

Authors
  • avatar
    Name
    wellsleep (Liu Zheng)
    Twitter

Next.js 是 Vercel 主推的内容框架。既可用于商业网站的制作,也可以用于自己的内容展示。

由于 FarBox 2.0 (简称 FB2)的主题匮乏,自己也实在没有时间把 Bitcron 的主题移植到过来,导致 tech站 的主题非常之丑,代码段渲染看得自己都心灵扭曲。于是考虑把内容还是从 FB2 迁出,放到一个轻松的托管平台。加上自己最近把 Git 那套 CI/CD 的流程逻辑摸得差不多,对于 git push 类型的日志上传也找到了自动化的方案(理想中就是 Ctrl+S 直接推发布)。所以,说动就动吧。

在 Next.js 之前参考了很多方案,Hexo,Hugo,Gatsby,甚至 Pelican——唯一的 Python 渲染方案。最后选了 Next.js,一是因为 Markdown 和代码混写的特性还挺有趣(虽然可能导致 md 解析问题重重,这是后话),二是平台原生的框架应该兼容性不错(并不!),三是因为 Hexo 和 Hugo 在国内被玩烂了,Next.js 至少个人用的少一些,算是 zb 的私心吧。

很快,在 Vercel 和 GitHub 之间授权好很快就搭起来了基于 demo 模板的静态站。然而当我把过去仅仅 75 篇技术站的 markdown 文档推到 /data/blog 文件夹后,噩梦开始了。在 Vercel 的 Deployment 段不停地报错,而且并不告诉错误地具体原因,只说代码地某个字段找不到/不正确。比如:

  1. frontmatter 里需要 title, date, tags 三个必选字段,且 tags 需要是列表

  2. 由于 Next.js 采用了 mdx 的生成模式,默认 markdown 允许和代码混写,所以对于特殊字符 [], <>, $ 等都有很严格的检查。使得在 markdown 纯文本中写特殊字符会被认为是代码,而报语法错误。网友推荐的办法是批量替换,比如 <{'<'} 代替。但要知道之前做 CTF 题的时候特殊字符数不胜数,这种替换做完的话,原文惨不忍睹。最后还是手工把特殊字符用顿点括起来解决。

Vercel 一排一排的部署报错

花了好几个小时逐步把之前随心写的 frontmatter 一一修正——有 jekyll 时期超级繁多的字段需要删减;有 bitcron 时期超级简洁的字段需要添加;还有 FB2 时期发现转框架兼容性问题后,开始老老实实写,但有的字段名对不上仍然需要修改的内容。总之,每一次转框架或者换平台都是一次蜕皮。75 篇文章的技术站已然如此,近千篇文章的 二货分享 主力站要改可能要下辈子了——或者自己把 js 代码吃透,修改 frontmatter 的判定标准吧。

不过从 FB2 迁出来,从个人维护的开源框架转向社区维护的前沿技术栈,距离下次换框架应该要久一些了吧。