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 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

Connect

Keep updated with her latest updates on design, code and writing. Follow her on Twitter or GitHub.

欢迎订阅博客RSS,分享她的思考、记录与分享

Drop her an email

This website was designed and built by Millie with Bulma, Gatsby and Netlify.