How to Choose the Best Static Site Generator for Your 2019 Project
May 09, 2019
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:
- What they are (and why you should use them).
- What are the best static site generators in 2019.
- 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 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)
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
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
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
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
- How We Generate Our Documentation with Nuxt & Sanity
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.