FanMa 博客 包含了关于前端学习的一系列内容,涵盖了 HTML、CSS、JavaScript、TypeScript、React、Next.js 等全栈方面的学习笔记。博客以技术为核心,深入浅出地讲解了这些技术的基础概念、实际应用以及最佳实践,并且结合了博主的个人经验和实践经历进行分享,有助于读者更好地理解和掌握这些技术。如果你有前端学习的需求或者对这些技术感兴趣,那么 FanMa 博客 将是帮助你实现这些目标的绝佳资源。

探索 Next.js:FanMa 博客发表第一篇文章的技术选择
- 2001

1、前言

在做这个博客网站之前,其实我已经使用 Hugo 做了一个博客网站《 黄胜丰 》。这个是我的一个生活博客网站,还想再做一个博客用来记录自己的一些笔记与心得。我在网上寻找了很久,也想了好久,其间又选择了使用 VuePress 来搭建我的笔记博客网站。我曾经试用过了 HexoDocsify ,虽然这两个框架使用起来更方便、更简单,但是后面还是决定选择 VuePress 来搭建我的博客网站。

2、选择与放弃

在使用 VuePress 一段时间后,发现 VuePress 也并不是我心里想要的。并不是说 VuePress 不好,它其实是一个比较适合我们中国人使用的一个文档类静态博客框架程序。虽然它是一个专注于文档类的静态博客框架程序,但是也有适用于大众博客的相关主题。有一个 VuePress 官方开发人员写的一个博客主题就很不错,功能也很多,细节方面也做得很好。我用的就是他的这个主题,我想要的功能,它基本上都有。

2.1、博客主题太占内存

虽然他这个主题还不错,但是功能太多了就比较吃电脑配置。我一开始在电脑里的虚拟机里跑,在开发模式下就可以正常运行,一到打包生成静态文件的时候,就出现错误,错误提示说电脑内存不足。我找了很久都没有找的解决方法,曾经删除掉整个程序,再重新安装,什么内容都不添加进去,直接打包也是出错。后面我大概花了一天多的时间,最终才把问题解决了。原来是在默认的情况这个主题开启了很多功能,要把部分功能关掉后,才可以正常打包。

后面我也试过,直接提交到 GitHub 上面去,通过自动部署让 GitHub 来进行打包生成静态页,也是一样出现内存不足的情况。后现我看了这个主题的项目源码,发现他 GitHub 自动部署脚本里加一个 8G 内存的参数。我看到这个信息后,也依葫芦画瓢把这个参数添加到我的 GitHub 自动部署脚本里。结果很是惊喜,它竟然可以正常的打包生成静态页了。

当然这个问题只存在于这位开发人员写的这个主题上,使用官方默认的主题没有这个问题。除了这位开发人员写的 VuePress 博客主题外,还有其他第三方人员也写有 VuePress 博客主题,不过很少,并不多见。由于他们的这些主题和这位开发人员写的相距甚远,因此我就没有尝试过这他们的主题,毕竟官方人员写的更具有可靠性。

2.2、对新手不友好

当然除了 VuePress 博客主题比较耗内存外,它上手也比较困难。想要修改一些网站的基本信息,看官方的文档也要找很久才能懂得修改。而且官方文档对普通用户并不友好,不懂 JavaScript 语言的话,根本很能看得懂文档里的内容。有些东西,我看了一两天才看得明白。还有就是它的布局基本上是写死了的,你很难去修改它原有的布局风格,这是最让我很不爽的。

2.3、选择放弃

总的来说 VuePress 还是不错的静态网站生成器,它的细节功能方面做得很好。如果适合使用这个框架的网站,使用 VuePress 是很不错的选择。但是对于我来说 VuePress 上手比较难,可自定义性差。相关的博客主题功能比较多,但是功能多了就意味着要使用更大的内存来驱动。官方文档也好,相关的博客主题也一样,有很多都很难看得懂。就是因为这些原因,我最后还是放弃了使用 VuePress 来搭建我的博客网站。

3.0、新的尝试

放弃使用 VuePress 后,我又找了一些网站生成器。先后有用过 DocsifyDocusaurusGatsby 等一些中国人比较不常用的网站生成器。如果不注重 SEO 或静态页的话, Docsify 是个不错的选择。它可以直接使用 Markdown 文件,就可以在线生成一个网站了,不需要生成静态页。 Docusaurus 它和 VuePress 是基本上是一样的,都是文档类静态网站生成器。我个人认为 Docusaurus 是一个对外国人比较友好的一个框架,而 VuePress 是比较适合中国人的一个框架。对于 Gatsby 来说,它和其他网站生成器有比较大的区别,它上手可能会比其他的也要难一些,但是可自定义性要比其他的要强很多。

4.0、最终选择

在使用上面那些框架程序之前,我就曾经尝试过 Next.js 来创建 FanMa 博客。一开始它对于并不友好,或许是我看不懂它。当我尝试过很多框架程序后,都没有找到比较合适我的。有部分框架程序我试用了好几遍,包括 Next.js 也是如此。后来我在 Next.js 主页右上角的地方,有个 Learn 的学习按钮。出于好奇我就点了进去,然后就开始慢慢的学习,花了两三个小时就根据上面的学习内容写出了一个简单的静态博客程序出来。

4.1、详细文档

可能是对于学习的吸引吧,我就一步一步地对 Next.js 产生了一些兴趣。不像 VuePress 那样, Next.js 并没有中文文档,虽然我不懂英文,也可以使用谷歌翻译 Next.js 的官方文档,但是有时候我不用看翻译也可以看得懂 Next.js 官方方档上的一些内容。对于新手 Next.js 并不吝啬,它会把文档说得很详细。一开始它会一点一点的讲,代码一点一点的告诉你,到最后也会把完整的代码贴出来看你看个明明白白。不像 VuePress 文档,只给个残缺的代码给新手看。

4.2、源码示例

除了有详细的文档说明外, Next.js 还有很多示例源码展示出来给你看,方便你参考学习使用,这个对新手来说是非常友好的。虽然 Next.js 学习文档写的博客太过于简陋,但是它却把我的兴趣给引入进来了,让我有了对它更深入了解与学习的动力。经过一个星期左右,已经把我的博客程序 FanMa 博客 写的差不多了。一些基本功能都已经能够实现,相比官方学习教程里的博客要完美好多了。

结语

虽然 VuePressNext.js 的用途区别可能不太一样,但是它们背后都是由 JavaScript 语言来驱动的。要知道在使用 Next.js 前,我是一个完完全全不懂任何不懂 JavaScript 语言的人。这就是为什么 VuePress 的官方方档对于我来说比较难懂,那是由于我不懂 JavaScript 语言。而 Next.js 并不会因为你不懂 JavaScript 而放弃你,它的文档可以让不懂 JavaScript 语言的人也能看懂,这就是它的厉害之处了。至此,我选择了 Next.js 作为我未来地发展方向,也开始了我对 JavaScript 语言的深入了解。