enpitsulin

使用Nextjs重构我的博客

又到了一年一度鼓捣博客的时间咳咳,因为升级 gatsby 导致仓库收到太多依赖警告了,同时意识到大而全的框架的一些缺点,所以决定抛弃 Gatsby 转而使用 Nextjs

Gatsby vs Nextjs

同为 React 生态中的页面构建框架,他们均提供了 SSG 的功能,作为一个简单的博客仅静态导出就完全能够达到我的需求了。

对于页面数据的获取上,Gatsby 和 Nextjs 差异在于 Nextjs 允许从任意的数据源获取数据,仅仅需要在指定生命周期函数getStaticProps中返回相应的值即可,但是 gatsby 的数据源是基于graphql的,但是很多实现均依赖插件,很大程度上依赖社区和官方的工作。

当前文章内容都是通过本地文件系统保存,使用 Gatsby 和 Nextjs 基本等效,但是对于 Typescript 的支持 Nextjs 远远的将 Gatsby 甩在后面

使用模板

本身是想将原先的使用 Nextjs 复现然后再进行更改,但是中途发现使用 MDX 来构建文章会比纯 markdown 的展示效果更好。

但是在集成的过程中发现在 Nextjs 中使用 MDX 如果不作为 pages 页面交给 Nextjs 处理则无法进行很好的自定义,但是通过next-mdx-remotemdx-bundler在渲染的时候需要使用new Function()

虽然最后解决了这个问题,但是觉得不是很优雅,然后在寻找解决方法的过程中发现了一个模板,同时此模板使用了tailwindcss,近期我也总是有在使用同类型的windicss因为之前 tailwind 没有 JIT 模式

然后就转而使用该模板,很多布局我觉得挺不错的,但是其中的一些功能和页面展示样式我觉得还是需要改进,首页之类的还过于简陋。

内容管理

在先前 Gastby 最后的版本中我使用了 Netlify CMS 来管理内容,基本也形成了 JAMStack 的结构,但是使用体验来说着实还是差点,作为内容管理我觉得使用体验不是很到位。

中途也尝试用 Notion 来做内容管理,但多多少少又一些不如直接 markdown 来的效果好

使用额外的内容管理

现在目标是通过 Sukka 大佬的这篇文章使用 Next.js + Hexo 重构我的博客的启发使用 hexo 与 nextjs 整合或者与 contentlayers 结合。

contentlayer

这个包的野心很大,目标是整合各种内容源——无论是本地文件如 MDX、markdown、json、纯文本或者是 CMS 都可以通过其进行管理

但其部分目标功能处于 wip 状态,不过可能的未来能和 notion 集成我觉得挺香的。

hexo

Hexo 不仅是一个静态站点生成器,其内部的数据库还暴露了一系列 api 可以直接操作本地的文章

这部分可以参考 Sukka 大佬的文章和 hexo 官方文档,而且有一方面的优点 hexo 可以基于文件系统将数据持久化,这个可以让构建省去一部分的时间资源

同时 hexo 集成的一些功能如 rss 和 sitemap 生成可以让我将现有的此部分内容重构为更简单的代码,还有很多 hexo cli 能提供的功能也是很香

集成 i18n

其实国际化似乎对于我这个小博客没有什么多大的作用,但是一直在工作中用不上,就算是为以后的英文文章铺路?会有吗?

next-translate

其实看仓库的提交记录就知道一开始是选择next-i18next来做 i18n 的但是发现需要对所有动态路由手动增加 props,十分的麻烦,然后还是使用了next-translate

日后的计划是对文章的 frontmatter 增加额外的 lang 属性用于标识语言,然后在文章列表显示语言标签来标识文章内容的语言,以及可能未来有的双语文章中切换语言就以后在做额外的处理吧。

不过格式化时间字符串似乎还是跟随读者的语言而变化的,这个还是有待改善的。

做字符串翻译工作也好费时间

解析域名

挂载 github 或者 vercel 看着怪 low 的,于是斥巨资购买了一个enpitsulin.xyz域名然后去 vercel 控制台绑定blog.enpitsulin.xyz,然后在阿里云的控制台按照 vercel 给出的记录添加解析设置,然后稍等一会就行了

但是好像现在还是要挂梯子,这部分以后在调整吧。

然后根域名就备案了放着为以后做学习用途吧。

使用Nextjs重构我的博客

https://enpitsulin.xyz/blog/rebuild-my-blog/

Author

enpitsulin

Posted on

Updated on

Licensed under