Pick the Best Static Site Generator for your 2020 Projects

January 30, 2020
static-site-generator-2019-header

So.

Many.

Static site generators.

Even for us who've done 20+ demos & tutorials with them, it gets overwhelming.

I can't imagine what it must be like for a developer just learning about the JAMstack.

Like landing in freakin’ wonderland

Like landing in freakin’ wonderland

To try and help, we synthesized our knowledge into one comprehensive piece.

By the end of this post, you should be able to find the best static site generator (SSG) for any project.

Here's what you'll learn about SSGs:

  1. What they are (and why you should use them)
  2. What are the best static site generators in 2020
  3. Considerations before choosing the one

1. What are static site generators?

If you're looking for the right SSG, I assume you have a decent understanding of what they are. Still, a bit of context can't hurt.

Static sites aren't new. They were what we used to build the web before dynamic CMSs (WordPress, Drupal, etc.) took over.

What's new, then? Modern tools—like static site generators—came out over the last years and expanded the capabilities of static sites.

Simply put, a static site generator is an application that takes your site content, applies it to templates, and generates a structure of purely static HTML files ready to be delivered to visitors. The application itself can be written in any language: Ruby (Jekyll), Go (Hugo), JavaScript (Gatsby, 11ty).

[how-static-site-generators-work]

Image source

This process brings many benefits when compared to traditional CMSs.

Why use static site generators?

→ Fast load times

Dynamically pulling information from a database on every page hit of a content-heavy site can result in delays, frustration, and bounces.

SSGs serve pre-compiled files to browsers, cutting load times by a large margin (your SEO team is going to love this).

→ Security and reliability

One of the biggest risks when developing your site with a dynamic CMS is the lack of security. Their bigger server-side infrastructures often open up potential breaches.

With static setups, there's little to no server-side functionality.

→ Freedom and flexibility

Traditional CMSs are opinionated and cumbersome. Scaling sites requires existing plugins and customization is limited to available theming platforms. That's great if you're a non-technical user, but developers quickly find their hands tied.

SSGs require more technical skills, but offer developers with more freedom. While most of them also have plugins mechanism, extendability using their core programming language is limitless.

→ Disappearing weaknesses

With a growing ecosystem around static site development, many of its main issues are being fixed quick.

Content management can be challenging for end-users who don’t have a technical background. The good news is there's an impressive number of headless CMSs out there ready to complete your SSG. The difference between headless and traditional CMSs being that you'll use the former only for "content management" tasks, not templating and frontend styling.

Some static site CMSs support SSGs straight up. Check out Forestry for Jekyll & Hugo or DatoCMS for many of them.

Non-technical users can now also build their own static website setup thanks to tools like Stackbit. With practically zero-configuration, you can bundle a static site generator with a headless CMS and deploy a website to Netlify!

But what about dynamic features necessary for great user experiences? Here’s a bunch of awesome services available:

These are just a few examples of what's out there.

Sell the JAMstack and static site generators to your clients by translating these development advances into business benefits. Read this guide to learn more.

2. Which static site generator should you choose in 2020?

best-static-site-generator-2020

There are over 400 SSGs. What follows will help your decision-making process!

In the last 2 years, a select number of them reached maturity and dominated the field. They’re the ones you should look at first and the ones highlighted here.

Still, I suggest visiting staticgen.com for a broader list of available SSGs.

2.1 Best static site generators in 2020

Here are the SSGs I think you absolutely SHOULD know. They answer the needs of most projects. These choices are based on both general popularity and our team's experience building dozens of JAMstack demos.

Gatsby

gatsby-static-site-generator

Gatsby brings static pages to frontend stacks, leveraging client-side JavaScript, reusable APIs, and prebuilt Markup. It’s an easy-to-use solution that creates a SPA (Single Page Application) with React.js, Webpack, modern JavaScript, GraphQL, CSS, and more.

Gatsby.js is a static PWA (Progressive Web App) generator. It pulls only the critical HTML, CSS, data, and JavaScript so that your site can load as fast as possible, even offline. Basically, Gatsby's rich data plugin ecosystem lets a website pull data from a variety of sources, including headless CMSs, SaaS services, APIs, databases, file systems, and more.

Gatsby has a wide range of applications and is a solid choice for sites that need to utilize data from many sources. The ambition behind this project is limitless, and with several amazing new features, don’t be surprised if adoption continues to skyrocket in 2020. They also have a vibrant, growing community, with a beautiful tagline: “You belong here.”

They came up with Gatsby Cloud, a better way to manage websites with real-time previews, image processing, multi-branch builds and more. It just got even better with the Gatsby Builds announcement. In the words of creator Kyle Mathews:

[Gatsby Builds] brings sophisticated caching and distributed computing features to the Gatsby build process. The result is build times up to 60x faster than other popular Continuous Deployment solutions.

Oh, and as if it wasn’t enough, the long-awaited Gatsby Incremental Builds is available in private beta. This should solve one of the worst pains for devs working with SSGs: overlong build times. A true game-changer! Curious? Subscribe to the beta here.

→ Gatsby tutorials:

Next.js

nextjs-static-site-generator

While not necessarily a SSG per se, Next.js is a lightweight framework for static and server-rendered React applications.

It builds Universal JavaScript apps, meaning that JS runs both on client and server. This process has boosted these apps' performances in first-page load and SEO. Next.js' set of features includes automatic code-splitting, simple client-side routing, webpack-based dev environment and any Node.js server implementation.

In 2019, Next became the static site generation tool the most starred on GitHub (close to 45K!). Not really surprising considering the ever-growing adoption of React as a frontend framework. Netflix, Hulu, AT&T and Twitch all use Next in parts of their web and mobile platforms. And they’re not alone.

Version 9 was released last year, including features such as zero-config TypeScript support, file system-based dynamic routing, automatic static optimization & more. A bunch of other exciting stuff happened within Next.js in 2019, and this blog post offers a great overview.

Next is definitely worth a look, so why not start by visiting its newly revisited documentation?

→ Next.js tutorials:

Nuxt.js

nuxtjs-static-site-generator

Similar in name and purpose to Next.js, Nuxt is a framework for creating Universal Vue.js Applications. It enables UI rendering while abstracting away the client/server distribution. It also has a deployment option called nuxt generate to build static generated Vue.js applications.

This minimalistic framework for going serverless is straightforward and simple but is arguably geared more toward programmatic implementation instead of a traditional DOM scaffolding.

Let me be biased for a second and stress out how much we love Nuxt here at Snipcart. After trying out most of these SSGs out, we choose this one to build the documentation for our latest release (v3.0). You can find the justification for this decision in this blog post.

Since Nuxt is a Vue framework, familiarity with Vue is strongly recommended, so developers who have worked with Vue before will feel at home. With the continuous rise of Vue.js in the JavaScript ecosystem—and considering our collective love for it—, no wonder it ends up on this list.

→ Nuxt tutorials:

Hugo

hugo-static-site-generator

An easy-to-set-up, user-friendly SSG that doesn’t need much config before you get the site up and running.

Hugo is well-known for its build speed (it claims to be the "world's fastest"), and its data-driven content features make it easy to generate HTML based on JSON/CSV feeds. You can also write your own shortcodes and use the pre-built templates to quickly set up SEO, comments, analytics, and other functions.

In addition, Hugo provides full i18n support for multi-language sites, making it easy to reach an international audience. This is particularly useful for e-commerce merchants who want to localize their websites. Oh, and you like having options when it comes to themes? Hugo has hundreds of them.

With Hugo Modules, it now supports its own dependency manager. It enables fetching of dependencies from any remote sources (GitHub, BitBucket, etc.) and even handpicking which files/directory from any given module should be merged in your project filesystem.

Its latest feature to date is called Render Hooks, which allows you to overwrite default rendering of Markdown images and links.

→ Hugo tutorials:

Eleventy (11ty)

eleventy-static-site-generator

Making its first appearance on the official list in 2020 is Eleventy! “A simpler static site generator”.

Basically, 11ty is the equivalent of the well-known Jekyll, for JavaScript. Why do I put it before its predecessor on this list? Because I can feel a genuine excitement at the moment for what’s in store for 11ty in the JAMstack community.

Just look at these quotes from CSS-Tricks’ Chris Coyier and JavaScript-expert Raymond Camden:

“Been seeing a lot of Eleventy action lately. It's a smaller player in the world of static site generators, but I think it's got huge potential because of how simple it is, yet does about anything you'd need it to do. It's Just JavaScript.”

“I recently discovered Eleventy, and I'm incredibly excited about it. I like Jekyll but never liked working with Ruby. The fact that Eleventy is Node-based is a huge win for me. Also, Eleventy is incredibly flexible.”

No doubt, it has become a genuine contender. Prepare to hear the name “Eleventy” thrown around a lot in 2020.

→ Eleventy tutorials:

Jekyll

jekyll-static-site-generator

In previous versions of this post, we stuck to five picks, but it felt off sitting out Jekyll. It’s still one of the most popular SSGs with a large user base and directory of plugins.

Even though it’s not entirely keeping up with what the SSGs above are accomplishing lately, Jekyll still casts a long-lasting shadow over the JAMstack community. It’s still great for what it’s great at—smaller websites, blogs and is widely used by e-commerce sites.

One of Jekyll’s key selling points for newcomers is its wide range of importers. It enables an existing site to be migrated to Jekyll with relative ease. If you have a WordPress site, for example, you can switch to Jekyll using one of them.

Jekyll then allows you to focus on the content without worrying about databases, updates, and comment moderation while preserving permalinks, categories, pages, posts, and custom layouts.

It’s built with Ruby and integrated into GitHub Pages, so there’s a much lower risk of getting hacked. Theming is simple, SEO is baked in, and the Jekyll community offers many plugins for customization.

Plus, Jekyll 4 was officially released in 2019, featuring faster builds, faster Sass processing, cache optimizations, super-powered content transformations & more.

→ Jekyll tutorials:

Keep an eye on these in 2020 👀

There are three more that, even though not as well established as the ones just mentioned, deserve your attention in the months to come:

  • Gridsome: Gridsome is to Vue.js what Gatsby is to React. So if you’re already down with Vue, you should absolutely check this one out. Even though it’s a very young product, it still boasts an impressive number of features (PWA development, GraphQL queries, SEO-friendly SPAs, etc.). The co-creator Tommy Vedvik told us they were working on a plugin that will let you build Gridsome sites visually. It’ll feel like Webflow and use Vue components as building blocks. Interesting!
  • Scully: Angular was the only major framework without its own SSG before Scully stepped into the game. It’s still a small project, and there’s much work ahead feature-wise, but it’s exciting for Angular developers looking to make the transition to JAMstack-powered projects.
  • Sapper: Thanks to its “Sapper static export” function, it’s possible to create static websites powered by Svelte. Hard to predict to which extent the Svelte adoption will grow in 2020, but you should at least have a look at this lightweight JS framework.

3. Main considerations when choosing a SSG

many-possibilities

This section will take another approach in helping you discover your soul mate SSG. You'll find a few new ones here I haven't mentioned in the last section.

Before getting caught up in all the documentation, you should be clear on the projects’ requirements and priorities. Best is to narrow down your choices and identify the ideal solution for the assignment.

Here are some questions you should ask yourself before choosing the right tool:

1. Do you need lots of dynamic features & extensions out of the box?

There are two schools of thought here.

  1. Pick a static site generator offering a great number of features out-of-the-box. In other words, you won't need tons of plugins or build everything by yourself. For that matter, Gatsby, Next and Nuxt all are big application frameworks, with a huge velocity in feature development. You can’t go wrong with any of them.

  2. Pick an SSG that comes with fewer features, but offers a vast plugin ecosystem that allows you to expand and customize your setup as needed. This is what still represents one of Jekyll's greatest strengths to this day. The fact that it has been so popular for so long has translated into a large community and a wide array of plugins. Same with Eleventy.

2. How important is your build & deploy time?

As I've already mentioned, static sites, in general, are a huge improvement for speed in the browser. Build times, however, can be a downside. Although some SSGs are doing fantastic work on this front.

A year ago, I would have said that the clear winner here is Hugo. It's well-known for its blazing-fast build times. It can put together a simple site from markup and templates in milliseconds and go through thousands of pages in seconds. It’s still accurate, but with the latest Gatsby announcements (Gatsby Build & Gatsby Incremental Builds in beta), we could have a new front-runner in the year to come.

Reactive frameworks, such as Nuxt, are also great for performances (which, as a side note, has some positive SEO implications).

This is one area where Jekyll actually looks bad—many developers complain about its build speed (even though v4 is supposed to make it faster).

3. What is the type of project you want to handle with an SSG?

Consider your project's end goal. Not all generators are created for the same results, and you'll save a lot of pain by choosing one that is specialized for what you're trying to achieve.

→ Blog or small personal websites:

Eleventy might be the new obvious one to mention here, even more for JavaScript developers. Just like Jekyll, it’s a blog-aware SSG abstracting everything that could get in the way of what really matters on a blog: the content. Hexo is another one you should consider for building a simple blogging platform. Ultimately though, most SSGs will do the job in this area.

Also check out: Hugo, Pelican, Gatsby.

→ Documentation:

Many SSGs are built explicitly for the necessary task of crafting documentation. As Vue lovers, we would suggest the very clean VuePress, without hesitation. Even though it can be used for other things than documentation, it was built to support the doc needs of Vue's community sub-projects and does a pretty good job at that.

GitBook also makes it easy to write and maintain high-quality documentation and is easily the most popular tool of this kind.

Also check out: Docusaurus, MkDocs, Docsify.

→ E-Commerce:

You can also easily integrate a shop on most static site generators (as seen in previous tutorials). E-Commerce can be tricky, though, as many aspects come into consideration. Think about user-experience related aspects, such as speed and UI customization. SEO is also something you don't want to disregard when developing a business online.

For larger stores where you might need a CMS for product management, ask yourself which SSG will be the better fit for the headless CMS of your choice.

With these in mind, drawing from our own experiences, we suggest looking at reactive frameworks like Gatsby & Nuxt. But it doesn't mean you should put aside friendlier options like Jekyll, Hugo or 11ty if you need to keep everything simple.

→ Marketing website:

Some advanced projects go further than a few content pages and need multiple dynamic functions such as forms, authentication or user-generated content. For these look no further than the big machines that are Nuxt, Next and Gatsby.

They’re the ones ready to handle more complex infrastructure, multiple platforms, and scaling. We might start working on refactoring our own marketing website in 2020, and these options are the ones we’re considering (with a small preference towards Nuxt).

Also check out: Gridsome.

4. If you're willing to modify the site and/or generator yourself, do you need it to be in a particular language you're well-versed in?

If so, here's where you should look at for the following languages:

  • JavaScript: Next.js, Gatsby & React Static (for React), Nuxt, Gridsome & VuePress (for Vue), Scully (Angular), Eleventy, Hexo, Sapper, GitBook.
  • Python: Pelican, MkDocs, Sphinx.
  • Ruby: Jekyll, Slate, Middleman, Nanoc.
  • Go: Hugo, InkPaper.
  • .NET: Statiq, pretzel.
  • PHP: WP2Static, Jigsaw.

5. Are non-technical users going to work on this site?

After the development part is done and the website is built, who is going to run it and edit its content? In most cases, this falls in the hands of non-technical users who'll have a hard time navigating through code repos.

Here's where you should strongly consider pairing your SSG with a headless CMS. Not only is the choice of a CMS important, but also finding the right SSG to attach on the frontend is crucial.

Some content management systems also allow for integrated static site generation, such has Publii. Learn more about it here.

Gatsby has pushed this thinking forward with one of their neat features, a GraphQL implementation. I won't go into explaining what GraphQL is, but in short, it enables faster, less-bloated data queries.

6. Is community and help from peers important to you?

If so, consider one of the top static site generators listed earlier. These are the most popular right now and are backed by the most active communities spawning plugins, case studies, and resources of all kinds.

Remember that modern static sites and the JAMstack are still part of a relatively new ecosystem, and if you start with lesser-known tools, you may discover that community support is still lacking.

Closing thoughts

I won't end this post by telling you which static site generator is the best and which one you should choose. Primarily because I simply don't have the answer, but also because you should now have enough information to make that call yourself.

All you need to do now is go out and explore every possibility that seems attractive to you. One thing's for sure; it's that you should have fun doing it as SSGs finally give freedom and flexibility back to developers.

What static site generator would you recommend? What's next for the JAMstack ecosystem? I really want to hear from you, so join the discussion in the comments below!

If you've enjoyed this post, please take a second to share it on Twitter.

Mathieu Dionne

Mathieu Dionne

Marketing Lead

Mathieu graduated from University Laval in Québec City with a degree in Public Communication. He’s been an integral part of expanding Snipcart’s marketing strategies—Mathieu has been researching and writing about web development for 3+ years now. He is also an erudite movie buff!

Follow him on Twitter.

Suggested posts: