没事造轮子没事造轮子

没事造轮子

Nextjs 博客搭建教程

  • W_Z_C
  • 阅读约 4 分钟
Nextjs 博客搭建教程

从 2021 年初建立博客又过了一年,时间转瞬即逝,期间博客程序经历了三次转变,从 Ghost 转到 WordPress,又从 WordPress 转到 Next.js,每一次的理由好像都很充分,但博客的核心内容却没有怎么增长,很是惭愧。本套教程是我在使用 Next.js 搭建过程中整理的笔记心得,如果你想要学习 Next.js,本教程算是一个很好的切入点,毕竟我也是新手上路,共同语言应该很多。

1. 背景

本年首次搭点博客用的 Ghost 系统,这个系统我非常喜欢,它的后台使用的是 Nodejs,开发语言使用的是 JavaScript,后台框架用的 Express,这三者正好是我学习 web 开发的上手之路。

我对于 web 开发一直处于半桶水的状态,公司当初想搞个 web 系统,但是没有专业搞这方面的人,而我当时刚好通过 C++ 招聘的岗位入职没多久,再加上我个人确实对 web 开发有点兴趣,所以直接上手开搞。

因为半路出家不想涉及 php、asp、jsp 之类的重量级框架,所以在 Nodejs 和 OpenResty 之间犹豫很久,最后还是选了 Nodejs,当时的 Nodejs 算是刚刚开始流行,阿里那时候还没有宣传它们的中台概念,选它主要是因为想要少学一门语言,毕竟搞 web 开发肯定要接触 JavaScript,前后台语言一致说起来还是蛮诱人的。

当时后台选的是 Express 框架,前台选的 Extjs 框架,整体上可以说一门 JavaScript 语言搞定一切了,过程很顺利,系统正常上线。期间我无意间发现了 Ghost 博客系统,那时候它刚面世不久,整体上不是很完善,因为它同样用的 Express 框架,我还特意学习了它的后台代码结构,并深入的研究了 Express 框架代码,后来还写了 Express 源码阅读教程

所以整体上对于 Ghost,我还是很有好感的。不过 Ghost 也有很多弱点,首先它不支持评论系统,再有它的第三方插件没有 WordPress 丰富,很多功能都不支持,再者它最新的付费订阅功能国内根本无法使用,所以在 9 月份的时候我头脑发热,换了 WordPress 系统。

换系统的过程非常痛苦,基本上一篇篇复制过去的,但是换了之后当时很愉快,首先评论有了,各种插件也有了,并且最重要的我当时发现现如今的 WordPress 更加强大了,特别是配合 Elementor 插件,分分钟可以建立一个不错的网站,现在的网站样式就是那个时候打下的基础。在此期间我还用过很多其它的插件,例如 Avada 主题、Divi 主题等等,说实话,它们大多数功能都很反人类,还是 Elementor + Astra 组合给力,我为此还特意写了 WordPress 建站教程(目前没发布)。

换了主题之后舒服了一阵,整个人又开始犯贱了,直接原因是 WordPress 的编辑器反人类,从 HTML 编辑界面切换到可视化界面,会自动进行转义,我博客中有很多 HTML 代码会在切换中消失掉,简直太要命了,只要重新编辑一篇文章,这种事情大概率会发生,所以我就很不爽,在加上 WordPress 不支持 Markdown,需要额外的插件,并且 WordPress 太重量级了,反正借口有了,我总想要一个支持 Markdown支持版本管理支持可交互的博客系统,显然最终我选择了 Next.js。

类似 Next.js 这样的系统,这几年基本已经处于泛滥的趋势,这种 Serverless + SSR 的组合算是一种大势,其中 WordPress、Ghost 都支持前后端分离,你可以用 Next.js 这样的框架搭建自己的前端,后端依然使用 WordPress 或 Ghost 这样的服务来保存数据,它们本质上已经算是一种 Serverless 的变体了。

这里不过多的展开,之所以选择 Next.js 实际上并没有什么理由,只是无意中看到而已,再加用起来比较顺手,自身对于 React 有过一点了解,所以就直接开干了。

2. Next.js

Next.js 优点很多,它支持很多种模式,什么 BSR(Broswer Side Render)、SSG(Static Site Generation)、SSR(Server Side Render)之类的,我个人其实并不推荐新手了解这些乱码七糟的,我喜欢的是直接开干模式,当然开干也是有套路的,需要遵循最小知识栈原则。

使用 Next.js 搭建一个网站,并不需要你了解什么 BSR、SSG、SSR 之类的概念,你只要按照官方文档的描述,一步一步实现自己的需求就可以了,对于这些概念最好的了解时间应该是你有一定的基础之后,类似于你已经实现了一个 demo,或者完成一些玩具式的程序,这样才能体会这些概念之间的区别和用意。例如我在 demo 中用了哪些方式,为什么用这些方式,可不可以换一种方式来实现?

这一说就扯远了,说白了我想表达的是一个学习方法,当然每个人的基础不一样,也都有自己的学习体会,也没有什么放之四海而皆准的方法,只能说看个人喜好了。

Next.js 的很多功能在接下来的教程中都会涉及,我会具体的讲一下这些概念的区别,以及使用这些方法方式坑爹的地方,因为我本人也是 web 开发的半桶水,所以下面的教程仅供新手参考,如果发现什么错误或者值得讨论的地方,欢迎随时联系我进行反馈,再次感谢你的观看,希望本教程对你有所帮助,笔芯🤞!