How to Choose the Best Static Site Generator for Your 2019 Project

So.

Many.

Static site generators.

Even for us who've done 15+ (and counting) demos & tutorials with them, it can get quite overwhelming.

I can't believe what it must be like for a developer just learning about the JAMstack and static web ecosystem.

To try and help them, 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 2019.
3. Considerations before choosing the one.

1. What are static site generators?

If you're here 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 way before dynamic CMSs (WordPress, Drupal, etc.) took over.

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

Simply put, a static site generator takes your site content, applies it to templates, and generates a structure of purely static HTML files ready to be delivered to visitors.

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 already compiled files to the browser, cutting load times by a large margin (your SEO team is going to love this).

→ Secure and reliable

One of the biggest threats of developing your site with a dynamic CMS is the lack of security. Their need for bigger server-side infrastructures opens the way for potential breaches.

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

→ Freedom and flexibility

Opinionated and cumbersome traditional CMSs are constraining. The only way to scale is with existing plugins and customization is limited to available theming platforms. That's cool if you're a non-technical user, but developers quickly find their hands tied.

True, SSGs may require more technical skills but they pay off for developers with freedom. While most of them also have a plugin mechanism, extendability using their core programming language is limitless.

→ Their weaknesses are... disappearing.

With an ever-growing ecosystem surrounding static site development, many of its main issues are finding answers through new tools.

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 content generation. I bet you'll find one fitting your needs.

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

But what about dynamic features necessary for a great user experience? There's a bunch of awesome services available:

• Serverless or Webtask for backend functions,
• Netlify for deployment, identity, forms, and serverless functions
• Algolia for search,
• Snipcart for e-commerce,
• Disqus or Staticman for user-generated content.

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

2. Which static site generator should you choose?

Knowing what static site generators are and why you should use them is one thing; knowing which one to adopt is an entirely different story.

There are over 400 of them to this day. If you're only starting with static web development, what follows will help your decision-making process!

I'll cover some of the best ones, but remember that it's still a small portion of all existing SSGs. For a complete list, I suggest visiting staticgen.com.

2.1 Best static site generators in 2019

In this section, I present the SSGs that I think you absolutely SHOULD know and that will 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 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, 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. 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.

Back in September 2018, Gatsby released the long-awaited v2.0.0. Their release announcement makes the following claims about the updated version:

This release focuses on performance and developer experience. Highlights include: reduced build times by up to 75%, shrunk JavaScript client runtime by 31%, and upgraded Gatsby’s core dependencies to their latest versions: webpack 4, Babel 7, React 16.5.

For more information on Gatsby 2.0.0, you can check out their 60-minute webinar detailing the updates.

Gatsby has a wide range of applications and is a solid choice for sites that need to utilize data from many sources. It's definitely on its way to the top, and it wouldn't surprise me if it's considered the number one static site generator in 2019.

Oh, and as an added bonus, it might just also fix one of the biggest dev pains with SSGs: (long) atomic builds. Creator Kyle Matthews recently created a company on top of his open source project. Gatsby Inc. will build a cloud infrastructure for Gatsby sites that might enable content previews and incremental builds—a game changer for SSGs.

→ Gatsby tutorials:

• ReactJS E-Commerce With No Backend Using Snipcart & Gatsby
• Grav as Headless CMS Tied to Gatsby with GraphQL Schema
• Static Forms, Auth & Serverless Functions (Gatsby + Netlify Demo)

Jekyll

Still one of the most popular SSGs with a large user base and a big directory of plugins. It’s great for blogs and also 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 a lot of plugins for customization.

Plus, Jekyll just put out a first alpha for Jekyll 4. This is a major change and boasts faster build times and previous bugs being resolved. Other changes include dropping support for Ruby 2.3, the link tag now includes relative_url filter, and a few others that are worth noting if you've ever played with Jekyll in the past. You can find a detailed list of all the changes in Jekyll's changelog.

→ Jekyll tutorials:

• Giraffe Academy's Video Walkthroughs
• Static Site E-Commerce: Integrating Snipcart with Jekyll
• CloudCannon CMS for Jekyll: Building a Multilingual Site
• Staticman for User-Generated Content on a Jekyll Static Website

Hugo

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 (in fact, 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.

Plus, last year they announced an advanced theming feature that offers a powerful way of building Hugo sites with reusable components.

As for this year, they've been pretty busy making updates, particularly in April. They released Hugo 0.55.0 ("the Early Easter Egg Edition") on April 8th with updates like virtualized output formats, revised shortcodes, and .Page on taxonomy nodes, among others. Since then, they've been in full-on "bug fixing mode" producing five updated version with enhancements and bug fixes. You can check out the newest Hugo 0.55.5 (released May 02, 2019) here.

→ Hugo tutorials:

• Hugo Quickstart
• How to Build & Host a (Very Fast) Static E-Commerce Site
• Static E-Commerce on Hugo with Product Management in Forestry.io
• A Great, Fast Static E-Commerce Experience with 6 Easy Tools

Next.js

While not necessarily an 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.

Plus, 2019 has been a pretty busy year for Next.js. They've made plenty of updates over the last 5 months that are worth checking out. Most notably, Next.js 8 came out in February 2019 with reduction in build-time memory usage, prefetch performance improvements, faster Static Export, and many others. Their latest 8.1 makes Next.js totally capable of authoring AMP pages which brings on some killer SEO improvements. All of these changes can be found directly on the Next.js blog.

JavaScript is everywhere nowadays, React being the trendiest JS frontend framework at the moment. So Next.js is definitely worth a look.

→ Next.js Tutorial:

• Getting Started with Next.js
• Next.js Tutorial: SEO-Friendly React E-Commerce SPA
• Introducing Build a Server-rendered ReactJS application with Next.js

Nuxt.js

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.

Nuxt's biggest update is their v.2.6 which came out April 25, 2019. This release included a few pesky bug fixes and dependency upgrades. The changes have come a long way from v.2.4.0 which was released at the start of the year. To track all these updates, you can refer to Nuxt's release notes.

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

If you're a Vue.js fan, you could also check out VuePress.

→ Nuxt tutorials:

• Free Nuxt Tutorial - Vue Mastery Course
• A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack
• Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js

As a final disclaimer, I think it's worth reminding you that, again, these are what we consider to be the best static site generators in 2019, but the list is certainly not exhaustive. Some other great SSGs like Gridsome or Eleventy are gaining tons of traction this year and would be worth checking out.

3. Main considerations when choosing a SSG

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. You won't need tons of plugins or build everything by yourself. In that case, Hugo presents a huge set of built-in functionalities with which you can get straight to work. Gatsby also fits the bill here.

2. Pick an SSG that comes with fewer features, but offers a wide plugin ecosystem that allows you to expand and customize your setup as needed. This probably represents one of Jekyll's greatest strengths. The fact that it has been so popular for so long has translated into a large community and a wide array of plugins. To push this notion even further, Metalsmith leaves all manipulations to plugins, making them highly customizable and able to build anything. The trade-off here is that this asks for a higher level of technical proficiency to handle use cases. But this might be a silver lining if you're trying to learn the language your SSG is running on!

2. How important is your build & deploy time?

As I've already mentioned, static sites, in general, are a great improvement for speed, but some SSGs push the bar further.

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.

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.

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:

Jekyll is the obvious one to mention here. It presents itself as 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, Eleventy.

→ Documentation:

GitBook makes it easy to write and maintain high-quality documentation and is easily the most popular tool of this kind. VuePress is growing real fast though. This one was built to support the doc needs of Vue's community sub projects.

Also check out: Docusaurus, MkDocs.

→ 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 or Hugo if you need to keep everything simple.

→ Marketing website:

One I still haven't mentioned is Middleman. What differentiates this one from the bunch is that it aims to provide the flexibility to craft any type of site, instead of being heavily geared towards a blogging engine. It's great for advanced marketing websites and companies like MailChimp and Vox Media have used it for their own.

Also check out: Gatsby, Hugo, Jekyll.

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 (for React), Nuxt & VuePress (for Vue), Hexo, Eleventy, GitBook, Metalsmith, Harp, Spike.
• Python: Pelican, MkDocs, Cactus.
• Ruby: Jekyll, Middleman, Nanoc, Octopress.
• Go: Hugo, InkPaper.
• .NET: Wyam, pretzel.

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