Goodbye Nuxt. 以 Gatsby 重构个人网站

为什么重写？

本打算以 Netlify CMS 给基于 Nuxt.js 的网站添加博客管理系统，但经历了一下过程：

2019年12月28日，折腾了一天，用 Netlify CMS 给曾经基于 Nuxt.js 只有简单四五个静态页面的网站添加了博客内容管理系统。根据 Netlify CMS官方文档，初步的CMS整合与实现很容易，结合支持 Github 的 Netlify Git Gateway 的功能，在可视化的 Netlify CMS 编辑器里每保存一次内容修改都会触发一次 git commit 及 Netlify 服务器端的自动部署发布。

下图是 Admin UI 截图：

Netlify CMS Admin UI

Netlify CMS + Nuxt.js 遇到的问题

• 若内容的format 设为 JSON，文章内容编辑器用 markdown，则若markdown 中需要嵌入 HTML 代码，则无法实现
• 可通过 Netlify CMS 上传图片，但需要记得在 static 目录中预先创建和 yaml 文件里配置一致的文件夹，否则图片上传功能不可用。
• Netlify CMS 输出的内容默认按时间升序排列；若需按时间降序排列，则需要自己在 async 之后用 sort 的方法改变排列方式。
• 分页功能更是没有了，若需要得自己写
• Admin UI 的文章内容输入框总是出现粘贴时内容被自动重复粘贴两次，或全文被重复粘贴的情况，导致额外修改时间，是个大bug。

放弃 Netlify CMS + Nuxt.js

将这个 Netlify CMS 应用后的网站分享至掘金社区，不少网友访问后提醒我说文章页面无法访问，或导航刷新后出现404。在本地 Debug 之后发现确实有这个问题，各种尝试修复之后发现此问题是生成的路由有问题，以 nuxt generate 生成的静态页面版本无法正常加载对应的页面链接，看来是必须要有服务端渲染才行。同样的代码，build 之后 跑 nuxt start 则能正常运作。但由于不想再折腾复杂的服务器，只想用 Netlify 免费加载静态版，加之 Netlify CMS 的编辑器复制粘贴有严重问题，于是我决定尝试用基于 React 的 Gatsby 重现全站，不想在 Netlify CMS 和 Nuxt 上耗费更多时间。

以 Gatsby.js 重写网站

2020年1月1日，成功跟着 Gatsby.js 的博客教程及官方 starter 完成了 MillieLin.com 网站的重构，顺利迁移了自己设计的这版基于 Bulma CSS 的框架，并顺利添加了 Blog 功能及基本的博客列表分页。 2012年1月2日，花了不少时间给博客的标签文章列表页面添加分页导航，好在1月2日晚10点跟着网上搜到的另一篇 gatsby-node.js create-page 的教程重新梳理了相关逻辑，终于顺利让基于选中标签的文章列表页顺利实现。

帮了大忙的 Gatby 添加分页导航教程： Advanced blog system in Gatsby by Danilo Woznica on Medium

至此，也算以个人网站的重构刻意练习了前一段入门的 react.js 和 GraphQL. 顺便推荐一下德国人 Robin Wieruch 写的挺不错的两本入门教程（纯电子书版是免费的）The Road to Learn React (简体中文版) 和 The Road to GraphQL。