With the sheer number of options available, choosing one will be a tough nut to crack. In this article, I’d like to go through some of the most popular options and help you make the best decision for your project.
This Static Site Generator is built on top of Ruby. The first version on Github was released in 2009, making it the oldest SSG from the top 4 that I’m describing in this article. Jekyll is also the engine behind GitHub Pages which explains why it’s the most popular option right now.
Jekyll’s popularity on GitHub over time:
Jekyll Stars on GitHub (data fetched with https://github.com/timqian/star-history)
The biggest advantage Jekyll has over other SSGs is it’s simplicity. You don’t have to put in a lot of effort to set up a simple blog-aware website.
It’s very simple and fast to set up and deploy your site on Github Pages as they fit well together.
👍 Huge community
What means a plethora of tutorials that’ll show you how to get started. You’ll also for sure find support as you face some difficulties.
👍 Liquid templating engine
If you’re coming from the most popular CMS options available on the market, like WordPress, you should feel well with Liquid templating structure.
👍 A whole lot of available open-source plugins
In most cases you’d like to do more with your websites than just generate static files. That’s when the long list of Jekyll plugins comes to help you.
👎 Ruby environment needed
It might be a tough nut to crack, especially for Windows users since it’s not officially supported by Jekyll.
👎 Building time
Plugins availability can be a Con as well. If you’ll use a couple of it then it’ll definitely slow down your building process.
Hugo’s first release came out in the second half of 2014. It’s powered by Go programming language aka. Golang⁸. Hugo’s general structure is very similar to the one offered by Jekyll. It’s really important to mention that Hugo is unbeatable when it comes down to building times. It turns out that Hugo can be as much as 63 times faster than Jekyll when handling big amounts of posts⁹!
Hugo’s popularity on GitHub over time:
Hugo Stars on GitHub (data fetched with https://github.com/timqian/star-history)
👍 Incredible fast building
Hugo is unbeatable when it comes down to building times. I personally don’t know any faster Static Site Generator than Hugo, which makes it great choice for big websites.
You don’t have to search and install any plugins since Hugo supports multiple content types alone.
Hugo has binaries for Windows, Linux, FreeBSD, NetBSD, macOS, and Android for x64, i386 and ARM architectures.
👎 Golang Syntax
Go language is definitely not the most popular programming language so you may have some difficulties with Hugo’s syntax at the beginning.
👎 No built-in asset processing
There’s no asset pipeline built into Hugo, so you have to use external tools.
Next.js’s popularity on GitHub over time:
Next.js Stars on GitHub (data fetched with https://github.com/timqian/star-history)
👍 Single Page App feeling
Since Next.js is built on top of React.js it brings to it all the advantages React has like pre-fetching and JSX template system to name a few.
👍 Automatic Code Splitting
Pages never load unnecessary code.
👍 Great learning materials
If you’re not familiar with building Single Page Applications you can get started very fast here¹⁰.
👍 You can jump to full PWA anytime
static page is no more sufficient, you can enable Node.js server.
👎 Learning curve
Comparing to what you’ve to learn going the Jekyll/Hugo way it’s a lot harder to jump into Next.js if you’re totally green with React, JS, JSX etc.
👎 Static page building time
It’s hard to beat Hugo in this area. Building time for large websites could be pretty long.
Gatsby’s first release took place on October 6th, 2015. It’s worth mentioning that it has one of the most active communities of all the Static Site Generator projects — 807 contributors as of right now. To cut a long story short, Gatsby is a static Progressive Web App generator.
Gatsby’s popularity on GitHub over time:
Gatsby’s Stars on GitHub (data fetched with https://github.com/timqian/star-history)
👍 GraphQL inside
Data directly into our components — in the shape and form we want. GraphQL is pretty big topic, you can read more about it here.
👍 PWA by default
You don’t have to put much effort to turn your Gatsby static website into offline available app. Setting up Gatsby service workers is as easy as pie! Just one gatsby-plugin.
👍 Growing plugin ecosystem
There are dozens of plugins, you can easily connect most popular Headless CMS, Google Analytics, image optimization, service workers and more!¹¹
👍 Data & code prefetching
Site would feel like a single page app while still benefiting from the performance of a static site.
👍 Great community and learning materials
It’s easy to get started with Gatsby’s step by step tutorial available here¹²
👎 Learning curve
JS, React, GraphQL.
👎 Long building times
Comparing to all of the above Static Site Generators it takes Gatsby a lot time to throw out the files after you hit the build command.
This is what we learned so far by using Static Site Generators at Bejamas. Let me wrap things up a little bit at the end:
If you’re seeking simplicity and pretty short learning curve — you better go with Jekyll. Building a big site, want to change and add a whole lot of new posts? Choose Hugo. In any other cases, I’d suggest you to go with Gatsby or Next.js.
That are just my thoughts though. What you think of it? Are there any pros or cons that I didn’t bring to the table?
This article was originally posted on our company website: https://bejamas.io/blog/guide-into-static-site-generators/