The Beginner’s Guide to Static Site Generators

Back to blog

14 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
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’s 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 less security issues simply because surface area for harmful attack is reduced. And by having a 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 is 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 to 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:

  • Jekyll
  • Hugo
  • Next.js
  • Gatsby
  • Nuxt
  • Gridsome
  • 11ty

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

Jekyll • Simple, blog-aware, static sites

Jekyll is a static site generator that is built on top of Ruby. 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 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 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. 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.

Hugo

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

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 pure 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

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. It’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 - 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 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

    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

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

Gridsome

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

11ty

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 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, has 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

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

Resources

In case I got you interested into 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.
JAMstack.org - 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 list of SSGs.
Jekyll Quickstart - Official documents.
Hugo Quickstart - Create a Hugo site from scratch using the beautiful Ananke theme.
NextJS - Learn to create 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 instal 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.

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