The Beginner’s Guide to Static Site Generators

Back to blog

6 min to read

The Beginner’s Guide to Static Site Generators

World of static sites has grown beyond HTML, CSS and occasional JS and much of it is owed to static site generators.

Denis Kostrzewa

By Denis Kostrzewa, July 19, 2018

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.js1 and Gatsby2 among the most popular ones. You like to write in Go? Hugo3 would be the best option for you.

If Ruby is the language of your choice you should probably go with Jekyll4 or Middleman5 You can explore the whole list of 458 static site generators here6. More enjoyable version of the list here7.

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:

GRAPH

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.

  • 👍 Simplicity

    It’s very simple and fast to set up and deploy your site on Github Pages as they fit well together.

  • 👍 Huge community

    This means a plethora of tutorials that’ll show you how to get started. You’ll also easily find support if you’re faced with difficulties.

  • 👍 Liquid templating engine

    If you’re coming from the most popular CMS options available on the market, such as WordPress, you should feel right at home with the 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 where the long list of Jekyll plugins comes in 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

    Plugin availability can be a Con as well. As your list of plugins grows, so does your build time, meaning it will 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. Golang8. 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 posts9!

Hugo’s popularity on GitHub over time:

GRAPH

  • 👍 Incredibly fast building

    Hugo is unbeatable when it comes down to building times. I personally don’t know of any Static Site Generator faster than Hugo, which makes it a great choice for big websites.

  • 👍 Flexible

    You don’t have to search and install any plugins since Hugo supports multiple content types out of the box.

  • 👍 Cross-platform

    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. Hugo 0.43 came out with Hugo Pipes, so this con is not valid anymore!

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:

GRAPH

  • 👍 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 the 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 here10.

  • 👍 You can jump to full PWA anytime

    If a static page is no longer sufficient, you can enable a Node.js server for a full PWA experience.

  • 👎 Learning curve

    Comparing to what you have to learn going the Jekyll/Hugo route, it’s a lot harder to jump into Next.js, especially if you’re totally green with React, JS, JSX etc.

  • 👎 Static page building time

    It’s hard to beat Hugo in this area. With Next.js, 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.

GRAPH

  • 👍 GraphQL inside

    Data directly into our components - in the shape and form we want. GraphQL is a pretty big topic, you can read more about it here.

  • 👍 PWA by default

    You don’t have to put in much effort to turn your Gatsby static website into an offline available app. Setting up Gatsby service workers is as easy as pie! Just add 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! 11

  • 👍 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 here12

  • 👎 Learning curve

    You will need to have a solid grasp of JS, React, and GraphQL in order to get going with Gatsby.

  • 👎 Long building times

    Compared to all of the above Static Site Generators it takes Gatsby a lot of time to throw out the files after you hit the build command.

Summary

This is what we have 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 a pretty short learning curve - you’d better go with Jekyll. Building a big site, you want to change and add a whole lot of new posts? Choose Hugo. In any other cases, I’d suggest you 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 one of the last two frameworks described in this article.

These are just my thoughts though. What do you think of it? Are there any pros or cons that I didn’t bring to the table?

Share

About author

Denis Kostrzewa

Denis Kostrzewa

Technology Enthusiast, lover of any kind of music. I like meeting new people, marinated tofu and building stuff from nothing. Not necessarily in that order.

Readers also enjoyed