盖茨比乔布斯

In this article, I compare two static site generators, Gatsby and Hugo. I discuss framework familiarity, stability, security, tooling, build speed, performance and the community surrounding both. So let’s get started.

在本文中，我比较了两个静态网站生成器Gatsby和Hugo。 我将讨论框架的熟悉程度，稳定性，安全性，工具，构建速度，性能以及周围的社区。 因此，让我们开始吧。

About a year ago, I changed my website from Wordpress to Hugo, which is a static site generator written in Go that uses Go’s template libraries for templating. I have recently done a viability assessment of Gatsby, another static site generator written in React that uses React for templating.

大约一年前，我将网站从Wordpress更改为Hugo ，这是一个用Go编写的静态网站生成器，使用Go的模板库进行模板制作。 我最近对Gatsby进行了可行性评估， Gatsby是另一个用React编写的静态站点生成器，它使用React进行模板化。

In this article, I compare the differences between Hugo v0.42 and Gatsby v1.93. For the comparison, I used this Hugo site and this Gatsby site. The code for each can be found on Github for the Hugo site and for the Gatsby site.

在本文中，我比较了Hugo v0.42和Gatsby v1.93之间的区别。 为了进行比较，我使用了这个Hugo网站和这个Gatsby网站 。 可以在Github上的Hugo网站和Gatsby网站上找到每种代码。

框架熟悉 (Framework familiarity)

If you are not familiar with React and you don’t plan on learning React, then you should probably choose Hugo. If you know and like React, should you choose Gatsby? Well, not necessarily.

如果您不熟悉React，并且不打算学习React，那么您应该选择Hugo。 如果您知道并喜欢React，您应该选择Gatsby吗？ 好吧，不一定。

I would argue that you need a decent understanding of React (see Learn React with these Resources) if you want to use Gatsby. And in order to understand React, you need a decent understanding of JavaScript (see Learn JavaScript with these resources).

我想说，如果您想使用Gatsby，则需要对React有一个体面的了解(请参阅使用这些资源了解React )。 为了理解React，您需要对JavaScript有一定的了解(请参阅使用这些资源学习JavaScript )。

Even though I have been using Hugo for almost a year, it wasn’t necessary for me to understand Go. I also only had to learn a little bit about Go’s template libraries. However, I did find that I had to refer to the documentation more often with Hugo because of my lack of familiarity. Gatsby requires a deeper understanding of React than Hugo expects of Go. Nevertheless, if framework familiarity were the only criteria, I would choose Gatsby because it’s nice not to have to refer to the documentation while adding new features to my website.

即使我已经使用Hugo近一年了，对我来说也没有必要了解Go。 我也只需要学习一点有关Go的模板库。 但是，我确实发现，由于缺乏了解，我不得不与Hugo经常联系该文档。 与Hugo期望Go相比，Gatsby需要对React有更深入的了解。 但是，如果只有框架熟悉度是唯一标准，我会选择Gatsby，因为在向我的网站添加新功能时不必参考文档也很好。

稳定性 (Stability)

One way of assessing stability would be to compare Hugo’s issues on GitHub with Gatsby’s issues on GitHub. You will see that Gatsby has more features, (which is exciting) but also has more bugs (which is not so exciting). I initially did not consider stability as a criteria until I found this bug and that made me realise the importance of stability in software. I may be taking this one personally because of the time and effort I expended, trying to find that bug, but I still think Hugo is more stable than Gatsby.

评估稳定性的一种方法是将GitHub上的Hugo问题与GitHub上的Gatsby问题进行比较 。 您将看到Gatsby具有更多功能(令人兴奋)但也具有更多错误(并非那么令人兴奋)。 直到发现此错误 ，我才开始将稳定性视为准则，这使我意识到了软件稳定性的重要性。 我可能是因为花了很多时间和精力而试图亲自发现这个错误，但我仍然认为Hugo比Gatsby更稳定。

安全 (Security)

Gatsby uses JavaScript, and JavaScript applications are notorious for requiring a lot of Node modules to run. There is even a Node module that sends Hot Pocket tweets and another that harvests credit card numbers :D. Static sites tend to be more secure by nature, but I still think it is worth mentioning that more dependencies result in more code that you might not trust.

Gatsby使用JavaScript，而JavaScript应用程序因需要运行许多Node模块而臭名昭著。 甚至有一个Node模块发送Hot Pocket推文 ，另一个则获取信用卡号 ：D。 静态站点本质上倾向于更安全，但是我仍然认为值得一提的是，更多的依赖关系会导致更多的代码您可能不信任。

工装 (Tooling)

Gatsby has all the advantages of the JavaScript toolchain and all the disadvantages of JavaScript fatigue. On top of that, Gatsby has a really nice plugin library. In particular, gatsby-plugin-offline allowed me to easily add offline capabilities to my website, which I still haven’t figured out with Hugo.

Gatsby具有JavaScript工具链的所有优点以及JavaScript疲劳的所有缺点。 最重要的是，Gatsby有一个非常不错的插件库 。 特别是，通过gatsby-plugin-offline，我可以轻松地将脱机功能添加到我的网站中，但是我对Hugo仍然不了解。

On the other hand, some things that require a plugin with Gatsby just come out of the box with Hugo. For example, gatsby-plugin-react-helmet is needed to edit the head tag, whereas this can be done with simple HTML in Hugo. Since I enjoyed using the tooling that came with Gatsby, I give this one to Gatsby.

另一方面，一些需要使用Gatsby插件的东西随Hugo开箱即用。 例如，需要gatsby-plugin-react-helmet来编辑head标签，而这可以使用Hugo中的简单HTML来完成。 由于我喜欢使用Gatsby随附的工具，因此将其交给Gatsby。

建立速度 (Build speed)

Hugo is able to build my website without any additional tooling in less than 100ms. Gatsby is able to build my website in about 15 seconds, but this does include a lot of additional tooling. Adding PostCSS and Imagemin to the Hugo build bumps the build time up to about 5 seconds. Watching for changes during development was also faster using Hugo. I think Hugo is the winner here.

Hugo可以在不到100毫秒的时间内建立我的网站，而无需任何其他工具。 Gatsby可以在大约15秒内建立我的网站，但这确实包括许多其他工具。 在Hugo构建中添加PostCSS和Imagemin会使构建时间最多增加约5秒。 使用Hugo，在开发过程中监视更改的速度也更快。 我认为雨果是这里的赢家。

文献资料 (Documentation)

Both Gatsby and Hugo have really nice documentation. Hugo has a Quick Start and Gatsby has a Getting Started section. Gatsby also has a really nice tutorial, which evens out the steeper learning curve. Personally, I found it easier to get started with Gatsby, but that is because I already understood React. I think it is fair to say that both Hugo and Gatsby have great documentation.

Gatsby和Hugo都有非常好的文档。 雨果有一个快速入门 ，盖茨比有一个入门部分。 Gatsby还提供了一个非常不错的教程 ，该教程使学习曲线变得更加平坦。 就个人而言，我发现使用Gatsby入门更容易，但这是因为我已经了解React。 我认为可以说，雨果(Hugo)和盖茨比(Gatsby)都有出色的文档。

性能 (Performance)

Using Lighthouse, the performance score was 100 for my site in Hugo and 95 for my site in Gatsby. The First Contentful Paint for a 3G connection was about 1 second for the Hugo site and 1.5 seconds for the Gatsby site. Using Web Page Test the load time on a 2G connection was 8.7 seconds in Hugo and 11.7 seconds in Gatsby.

使用Lighthouse ，我在雨果的网站和在盖茨比的网站的性能得分分别为100和95。 对于Hugo站点，用于3G连接的“第一内容涂料”约为1秒，对于Gatsby站点为1.5秒。 使用Web Page Test ，在2G连接上的加载时间在Hugo中为8.7秒， 在Gatsby中为11.7秒 。

However, doing a simple manual test to see which site loads first, Gatsby was noticeably faster, so I don’t really understand what Lighthouse or Web Page Test was measuring. Furthermore, as Gatsby is a Single Page App, navigating within the website does not require a request from the server. Pages are just re-rendered with JavaScript. Anyhow, I can say with certainty that both Hugo and Gatsby are fast. I would be interested to hear your thoughts in the comments below.

但是，通过简单的手动测试来查看首先加载哪个网站，盖茨比明显更快，所以我真的不了解Lighthouse或Web Page Test在测量什么。 此外，由于Gatsby是单页应用程序，因此在网站内导航不需要服务器的请求。 页面只是使用JavaScript重新呈现。 无论如何，我可以肯定地说，雨果和盖茨比都很快。 我想在下面的评论中听到您的想法。

社区 (Community)

Gatsby is gaining popularity quickly, which comes with a thriving community. That is not to say that Hugo’s community is boring. If GitHub stars are anything to go by, Hugo has more than 27 thousand and Gatsby has more than 23 thousand. On Twitter, Gatsby seems to be more active than Hugo.

盖茨比(Gatsby)随着社区的蓬勃发展而Swift普及。 这并不是说雨果的社区很无聊。 如果要满足GitHub明星的需要，Hugo拥有超过27,000，而Gatsby则超过23,000。 在推特上，盖茨比似乎比雨果更活跃。

最后的想法 (Final thoughts)

So which one should you choose? Gatsby uses React, which I am more familiar with, it has better tooling, and it has a thriving community. On the other hand, Hugo is more stable and spends less time building. For larger websites, build speeds become more important and some of you might not care for React at all. In my case, stability was the most important criteria, so I decided to stick with Hugo. I am very excited to see what the future brings in this space.

那么您应该选择哪一个呢？ Gatsby使用了我更熟悉的React，它拥有更好的工具，并且拥有一个繁荣的社区。 另一方面，雨果更稳定，花费的时间更少。 对于大型网站，构建速度变得更加重要，你们中的有些人可能根本不关心React。 就我而言，稳定性是最重要的标准，因此我决定坚持使用雨果。 我很高兴看到这个空间带来的未来。

Before you go… Thanks for reading the article! I write about my professional and educational experiences as a self-taught software developer, so check out my blog or subscribe to my newsletter for more content.

开始之前……感谢您阅读本文！ 我写的是自学成才的软件开发人员的专业和教育经历，因此请查看我的博客或订阅新闻通讯以获取更多内容。

You might also like:

您可能还喜欢：

• How I release updates to my personal website

  我如何发布个人网站更新

• Learning material — software development (a list of learning resources, starting with Introduction to Computer Science)

  学习资料-软件开发 (从计算机科学导论开始的学习资源列表)

• Is full-stack web development worth learning?

  全栈Web开发值得学习吗？

翻译自: https://www.freecodecamp.org/news/gatsby-vs-hugo-a-detailed-comparison-e78d94f640fc/

盖茨比乔布斯