Guide into Static Site Generators

As of right now, there are multiple options to choose from when it comes down to Static Site Generators. It doesn’t matter which language you prefer.

Would you like to code in JavaScript? There’s Next.js¹ and Gatsby² among the most popular ones. You like to write in Go? Hugo³ would be the best option for you.

If Ruby is the language of your choice you should probably go with Jekyll⁴ or Middleman⁵. You can explore the whole list of 458 static site generators here⁶. More enjoyable version of the list here⁷.

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.

Jekyll

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.

Jekyll Pros 👍:

👍 Simplicity

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.

Jekyll Cons 👎:

👎 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

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)

Hugo Pros 👍:

👍 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.

👍 Flexible

You don’t have to search and install any plugins since Hugo supports multiple content types alone.

👍 Cross-platform

Hugo has binaries for Windows, Linux, FreeBSD, NetBSD, macOS, and Android for x64, i386 and ARM architectures.

Hugo Cons 👎:

👎 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

The first version of Next.js was released on October 26th, 2016 which makes it the youngest contender in this article. Even though it’s popularity has been rising insanely fast, it may be a little bit concerning for some that Next.js is not a pure Static Site Generator, but can be used as one. So what exactly is Next.js? In a nutshell: it’s a framework for server-rendered or statically-exported JavaScript applications.

Next.js’s popularity on GitHub over time:

Next.js Stars on GitHub (data fetched with https://github.com/timqian/star-history)

Next.js Pros 👍:

👍 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

If static page is no more sufficient, you can enable Node.js server.

Next.js Cons 👎:

👎 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

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)

Gatsby’s Pros 👍:

👍 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¹²

Gatsby’s Cons 👎:

👎 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.

Summary

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.

Why? Because javascript is eating the web development world. If you’re fresh in this field and looking for something that has a big community, is trending and has a good outlook for the future — you should definitely go with the last two frameworks described in this article.

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/

Footnotes

1. https://nextjs.org/
2. https://www.gatsbyjs.org/
3. http://gohugo.io/
4. https://jekyllrb.com/
5. https://middlemanapp.com/
6. https://staticsitegenerators.net/
7. https://www.staticgen.com/
8. https://en.wikipedia.org/wiki/Go_(programming_language)
9. https://forestry.io/blog/hugo-vs-jekyll-benchmark/
10. https://nextjs.org/learn/
11. https://www.gatsbyjs.org/plugins/
12. https://www.gatsbyjs.org/tutorial/