The Beginner’s Guide to Static Site Generators

Back to blog

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

By Denis Kostrzewa
August 25, 2019

Even if you are not entirely sold to the JAMstack idea, there is no doubt static sites are making a comeback, big time!

The sheer number of static site generators already available is amazing. Best of all it doesn’t matter which language you prefer. Do you code in JavaScript? There are Next.js and Gatsby among the most popular SSGs for you. Do you like to write in Go? Then Hugo is the best option. If Ruby is the language of your choice you should go with Jekyll or Middleman. Vue is your thing? Take a look at Gridsome.

The advantages of using static site generators are impressive with speed, security, and scalability among the top ones. What-more web developers are already adding dynamic elements broadening the use of SSGs.

But I’m getting ahead of myself. Let’s deal with the basics first.

What is a static site generator?

A static site generator is a tool that helps you build static pages out of the input files. It takes your content (from a headless CMS for example), applies a selected template, and generates static HTML pages out of it.

What is a static site generator?

Why use a static site generator?

As already mentioned benefits of websites built in such a way are many. Being that you are serving static HTML pages, load speed, and overall website performance is greatly improved when compared to the traditional dynamic websites (websites built with traditional CMSs like WordPress or Drupal). On top of that, it is incredibly easy to deploy and host static sites.

With SSGs you can also create content offline, in a text editor for example, and preview what the web page will look like before it is published.

Since you are serving only static files you are bound to have much fewer security issues simply because the surface area for harmful attack is reduced. And by having simple server-side setup maintenance and scalability are much easier as well.

Surprisingly there are some disadvantages to SSGs. Like adding interactivity with users within pages and the abundance of choice (I kid you not, right now there are around 500 listed SSGs so finding one might prove more difficult than anticipated). But those are too few to mention.

What are the best Static Site Generators for 2019?

In all honesty, choosing the right SSG depends on your project needs, SSG features, and programming language of your choice. Some are made with a specific front-end or back-end in mind. Some are made for creating fast photo gallery websites. Others help you create documentation pages/websites more easily. Most of them can help you manage a typical website with a blog.

With that being the case, instead of ranking them as ‘the best’ I’d like to go through some of the most popular options we’ve worked with, and that way, hopefully, help you make the best decision for your project. I’ll be talking about the following SSGs:

Looking for a complete list of available SSGs? Check out the links in the resources at the end of this article.

Sign up for our JAMstack newsletter!

Get our EXCLUSIVE web development case studies in your mailbox!


Jekyll • Simple, blog-aware, static sites

Jekyll is a static site generator that is built on top of Ruby. The brainchild of GitHub’s founder Tom Preston-Werner, the first version on Github was released in 2009, making it the oldest SSG from the top 7 mentioned here. Jekyll is also the engine behind GitHub Pages which explains probably why it’s the most popular option right now.

The biggest advantage Jekyll has over other SSGs is its 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 template 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 template 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.

    • 👍 Built-in development server

      Thanks to it you can access your pages at a local IP address. A simple refresh will allow you to see the changes to either your content or template.

    • 👎 Ruby environment needed

      It might be a tough nut to crack, especially for Windows users, since it’s not officially supported by Jekyll.

    • 👎 No image editor

      No image manipulation tool for interactively cropping and resizing images.

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


The world’s fastest framework for building websites | 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 (read it here)!

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

    • 👎 No XML support for data feeds

      Only JSON/CSV

    • 👎 No plugin support

      You have to work with what Hugo’s got. Adding highly custom functionality isn’t possible.


Next.js - The React Framework

The first version of Next.js was released on October 26th, 2016 which makes it one of the youngest contenders 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 purely static site generator, but can be used as one. So what exactly is Next.js? In a nutshell: it’s a React framework for server-side-rendered or statically-exported JavaScript applications.

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

    • 👍 CSS-in-JS

      NextJS has native support for ‘styled-jsx’ making them that much easier to use.

    • 👍 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 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 is a free and open source framework based on React that helps developers build blazing fast websites and apps

Gatsby is a static Progressive Web App generator. Its 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 - over 1,800 contributors as of right now. Being a free and open-source framework based on React certainly helped with its popularity.

    • 👍 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’s 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!

    • 👍 CSS-in-JS

      Just like NextJS Gatsby works great with css-in-js solutions like styled-components or emotion

    • 👍 Data & code pre-fetching

      The 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

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


Nuxt.js - The Vue.js Framework

Much like what Next.js is for React, NUXT is for Vue, a higher-level framework that builds on top of Vue with a purpose to simplify the development of universal and/or single page Vue apps. And just as Next.js, NUXT is a framework that can be pushed to have the content fully pre-rendered on the server and served in the manner of static site generators.

    • 👍 Universal apps

      It makes creating universal apps easier.

    • 👍 Code Splitting

      Nuxt.js is able to generate a static version of your website with a special Webpack configuration.

    • 👍 Starter template

      It is incredibly easy to start a project with Nuxt starter template which gives a good folder structure for the organization.

    • 👍 Nuxt community

      Easy to use GitHub collection called Nuxt Community that compiles helpful libraries, modules, starter kits, and more.

    • 👎 Learning curve

      It will take time unless you are already into Vue.js

    • 👎Lack of common plugins

      Even though it is evolving fast being a fairly new framework this is no surprise.


Modern Site Generator for Vue.js - Gridsome

If you prefer Vue.js over React and you are looking for all the functionalities Gatsby is offering then Gridsome is what you are looking for. In fact, Gridsome was heavily inspired by Gatsby. Released in October 2018 it is growing fast but we are yet to see its potential.

    • 👍 GraphQL data layer

      Data in Gridsome can be received through the official GraphQL data layer but also dynamic data with fetch.

    • 👍 Templates and plugins

      The ecosystem is growing.

    • 👍 Performance

      Build/performance wise Gridsome is right up there with Gatsby and Next.

    • 👎 Community, templates, and plugins

      The ecosystem is growing and with the wider adoption of Gridsome so too will these grow. But for now, this is a downside.

    • 👎 Learning curve

      It will take time unless you are already into Vue.js


Eleventy is a simpler static site generator.

Eleventy, created by Zach Leatherman, was built as a JavaScript alternative to Jekyll. Though new to the SSG scene it already has a serious following which comes as no surprise given that it aims towards simplicity and functionality of use. If you are new to the SSG-world, 11ty could be a really good start for you and with a little knowledge of HTML, JS, and CSS you can end up creating amazing websites.

    • 👍 Multiple template languages

      Eleventy supports currently 11 different templating engines. Do you have Jekyll background? Great, you can use Liquid templates. Best of all you can pick one or use them all together in a single project.

    • 👍 Zero boilerplate client-side JavaScript 🎉

      You are not required to use any specific JS library or framework. It means that you, as a developer, have a choice to pick whatever tools you need. React, Vue.js, or even jQuery.

    • 👍Zero-config by default

      Eleventy works with your project’s existing structure. It doesn’t force you to use a specific folder structure unless you want to. It transforms all files from your root folder.

    • 👎 Community, templates, and plugins

      Comparing to other JS-based SSGs, Gatsby or Next.js, the plugin ecosystem is very small. There are just 3 official plugins + a few unofficial.

    • 👎 JS functionality

      It doesn’t automatically provide some of the advanced features for JavaScript functionality.

Wrapping Up

With static site generators, you get the benefits of using a traditional CMS, with the simplicity and performance of static HTML. They’re reliable, scalable, can potentially save you time and money, and can handle high volumes of traffic well.

From our own experience if you’re seeking simplicity and a pretty short learning curve - you should go with Jekyll or 11ty. If you are building a big site, you want to change and add a whole lot of new posts, choose Hugo. In any other case, 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 mentioned.


In case I got you interested in static site generator, check out these resources for your further education. I’ve listed them in order of topic appearance I’ve covered:

StaticGen - A list of static site generators for JAMstack websites.
StaticSiteGenerators - Another list with SSGs.
Check out our headless CMS lists for a selection of CMS systems for your static site generator. - The first, the original JAMstack webpage.
JAMstack_conf - Flagship conference started out in San Francisco now in London as well.
Awesome-static-generators - Awesome GitHub page with a list of SSGs.
Jekyll Quickstart - Official documents.
Hugo Quickstart - Create a Hugo site from scratch using the beautiful Ananke theme.
NextJS - Learn to create a single-page JavaScript application.
Gatsby.js Documentation - There are four main ways to get started with Gatsby.
Gatsby.js Bootcamp - A course from Andrew Mead designed to help you learn everything you need to build and launch your first site with Gatsby.
Why and how to start using Nuxt? - Installing and starting Nuxt is incredibly easy.
Getting started with Gridsome - Easy install and start with Gridsome.
11ty docs - Learn how flexible 11ty truly is.
JAMstack group at Linkedin - Like-minded JAMstack professionals that help each other solve problems at Linkedin.
JAMstack_dev - Reddit community of web developers eager to share, talk, and help fellow JAMstackers.

Thinking about moving to JAMstack and utilize all of the benefits static site generators offer? We can help you with that.

CLICK HERE to schedule 1-on-1 talk and learn more about what we can do for you and your business.


About author

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