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

CMS前端开发Headless CMSNetlify CMSGatsby.js

Connect

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

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

Drop her an email