Sweet. Sticky. Spreadable. All words that describe that jar of jam in your refrigerator. But they’re also fitting descriptors for the popular “JAMstack” craze that’s spreading across the web development world.

In this article, we’ll share some of the sweetest selections for static site generators on our radar in 2021 – and why we think they’ll be sticky well into the future.

But first… what exactly is this JAMstack stuff? And why is it gaining such popularity?

Understanding JAMstack

In the simplest terms, JAMstack is a modern software architecture that focuses on three core components: Javascript, APIs, and Markup (that’s the “JAM,” BTW).

Together, this “stack” of resources is used to generate high-performing static sites that are more secure and scalable – and don’t depend on a server to dynamically render everything. This means blazing-fast load times for web pages.

OK, back to the “JAM.” Not to spread it on too thick, but here’s some additional context for each component (feel free to read more here):

Javascript: The ubiquitous browser language that enables complex, dynamic, and interactive functionality on web pages. Javascript has truly revolutionized the JAMstack, allowing developers to build apps in a simplified manner using component APIs to deliver HTML files, CSS, and more – and accelerate it to browsers using a CDN (content delivery network). You might be familiar with some of the popular Javascript UI libraries like React, Vue, Angular, and others.

APIs: In the JAMstack, server-side operations are abstracted into reusable APIs and accessed over HTTPS with Javascript. It’s APIs that allow users to combine headless CMS for content, third-party services, and even custom functionality – and provide a unified web experience to customers.

Markup: This is where the magic happens. We all recognize HTML as the foundational language of the web, and whether that’s hand-coded or compiled, it’s the first thing a website visitor is served. In the JAMstack, markup is served statically, meaning it’s not being dynamically rendered at the server level. These can be generated from source files (such as markdown) using what’s called a “static site generator.”

With the markup and other UI assets served directly from a CDN, the front-end web experience is delivered securely – and at lightning-fast speeds. Any dynamic functionality is all handled by Javascript using APIs to “talk” to backend services, allowing experiences to be as enhanced and personalized as dynamic pages pieced together and served by PHP.

Benefits of using JAMstack

A JAMstack architecture can bring all sorts of benefits to websites and workflows. These include:

Higher speed and scalability
As mentioned, JAMstack sites cache everything in a CDN, which removes the need to generate page views from a server at the time of request. Instead, pages are made readily available on the CDN and pushed closer to the user – ready to serve at incredible speeds and scale with increased traffic loads.

More secure
No servers? No database vulnerabilities! Serving pages and assets as pre-generated files allows for read-only hosting, which reduces attack vectors even further.

Less expensive
Hosting of static files is cheap – and in some cases, even free. And since there are no servers, you’re (typically) not on the hook for any server-related fees.

Better developer experience and maintainability
JAMstack sites can be created with a wide variety of tools and given their static nature, they don't require an army of experts to maintain. As a result, developers can really focus on what they love to do: build.

Which JAMstack site generators are the best?

The JAMstack is getting jam-packed with static site generators. While the cream generally rises to the top, our team reviewed a slew of solutions that are building steam in 2021. We also paid close attention to how each platform integrates with CMS, both hybrid and headless.

Here are the top seven contenders:

1. Gatsby

There’s no doubt that Gatsby’s on a roll, becoming one of the most popular static site generators on the market. In just a few short years, the platform has amassed thousands of users worldwide – and closed on $28 million in Series B funding in 2020.

There are several reasons why Gatsby has become the belle of the ball. First and foremost, it powers secure, blazing-fast websites with React, which is one of the most prevalent Javascript frameworks around. In addition, they simplify the developer experience with Gatsby Cloud, a turnkey SaaS solution for building, previewing, deploying, and managing Gatsby-based websites. Gatsby also uses GraphQL for APIs, which helps with headless content delivery and streamlines the data fetching process.

Gatsby brings some great plugins, themes, and starters to their ecosystem, giving users more than one way to build a site. Their browsable library offers a rich landscape of CSS, UI, analytics, eCommerce, search, and media capabilities – all under one roof.

As far as CMSes are concerned, Gatsby is a winner with its array of hybrid headless and API-first content management system integrations. This includes leading CMS platforms like Contentful, WordPress, Strapi, Drupal, Shopify, Ghost, Agility, Contentstack, and more.

Gatsby.js v3.0 was unveiled in early 2021 at GatsbyConf (their global users' event), which offers some amazing new features such as incremental builds, intelligent caching in the Gatsby Cloud, higher Lighthouse scores, and the all-new Gatsby Hosting – which includes a secure global CDN from Fastly.

Perhaps one of the biggest advantages of Gatsby is their active community, which is a testament to their meteoric rise. Along with providing a wealth of user resources, Gatsby offers professional services and world-class support, which illustrates their commitment to the customer experience up and down the market.

You can try Gatsby for free by signing up here.

2. Hugo

Hugo is another popular static HTML and CSS website generator written in Go. It’s optimized for speed, ease of use, and overall configurability – and as their website claims, it makes building websites “fun again.”

Hugo has a solid reputation for extremely fast builds. In fact, this video on YouTube shows Hugo generating a site with 5,000 posts in less than 7 seconds. Pretty impressive.

One of the great things about Hugo is that it’s relatively easy to learn. All you need to know is HTML, CSS, basic Javascript, and the Hugo Template Syntax. This makes Hugo incredibly attractive to nascent developers who aren’t as experienced with Node.js, React, GraphQL, and other JAMstack components. That said, Hugo can easily handle big, complicated, enterprise-grade sites that give seasoned developers a run for their money. In that sense, it offers the best of both worlds.

Judging by its GitHub stars, Hugo has a fairly robust community of users. That means lots of interaction and resources – and a good sign that innovation is happening across repos. Hugo also offers 300+ themes to take the hassle out of building a site from scratch.

You can check out Hugo here.

3. Jekyll

Started by GitHub founder Tom Preston-Werner, Jekyll is a simple, blog-aware, static site generator that’s perfect for personal, project, or organizational sites. Jekyll has been around since 2008 – and is one of the most widely used static site generators with over 42 thousand stars on GitHub.

One of the things that makes Jekyll so attractive is that you can take practically any website and turn it into a Jekyll website by using its simple templating library. Jekyll also powers GitHub Pages, which you can use to host sites right from your GitHub repositories. Like Gatsby and Hugo, Jekyll offers some great theme options, as well as hosting and CMS solutions like CloudCannon, Forestry, and more.

At its core, Jekyll does what you tell it to do. It doesn't try to “outsmart” users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content. This is one of its biggest advantages.

Wading into the technical weeds: it’s worth noting that Jekyll is built with Ruby, so you’ll need a Ruby environment on your computer for the Liquid templating language to process templates. You’ll also need to get familiar with Gems and other terminology – but you can always tap the community for helpful videos, resources or to resolve a bug.

Learn more about Jekyll and how to get started here.

4. Next.js

Next.js is like a minimalist framework for React. But React is a Javascript framework itself, right? So, does that make Next.js a framework… for a framework?

Well, not really. React is more of a view library (although it’s sometimes referred to as a framework). As it turns out, there are several challenges with libraries like React.js, which are typically used to build web applications rendered in the client's browser with Javascript. This can cause potential access, security, and performance issues that hamper a website’s delivery. Next.js helps solve these problems by enabling server-side rendering and static site generation loads.

What does that mean? Well, unlike client-side rendering, server-side generates the contents of a webpage (HTML, CSS, or Javascript) on the server and the entire HTML page is downloaded for display. This puts the burden of any pre-processing complexities behind the scenes – ensuring that pages are blazing fast when they’re served.

One other big advantage of Next.js is that it’s primed for SEO. Again, with server-side rendering, it’s easier to customize meta descriptions that improve how Google and other search engines crawl and index your pages. Next.js also has built-in handling of SEO at the page level.

Like the other site generators in this review, there are plenty of theme options out there for Next.js, although primarily from third-party sources. There are some great collections of paid and free options, many with Bootstrap and responsive templates out of the box.

One of the reasons why developers still flock to this environment is that it offers a lot of freedom to build websites and web apps from scratch – something many platforms place limits on. Next.js also has an active dev community that continues to support and enhance the horizon of the technology and the underlying Node.js framework.

You can learn more about Next.js here.

5. Publii

Publii is a little different from the other players on this list. Not only is it a static site CMS, but the generator itself is downloaded and utilized as a desktop application. Available for both Windows and Mac, Publii is installed locally on your system rather than on the server-side – allowing you to create and update your website or web app even if you're offline.

Publii is also very “beginner-friendly.” Users from all skill levels can get rolling with Publii in no time at all – and scale more complex builds in multiple directions. This makes it attractive to a wider audience of developers who want to focus on building.

There are some great advantages to Publii. First, it’s fast! Most of the bloat was cut from what other website builders offer, so page load times are significantly shorter than the same post built on a different platform.

Publii also makes it easy to manage SEO, providing built-in tools that let you control the page title, slug, and meta information across your web pages. You can also tag posts to be indexed (or not).

Whether you start a website from scratch or download a theme, you may want to write your own custom HTML and CSS. Publii has a separate container for custom CSS, so you don't have to scroll through an entire document to make edits. This can also prevent the removal of any CSS that might break how your site displays.

Publii also released their latest update, Publii v0.38, in March of 2021, with a host of new features. This includes the ability to minimize the sync popup, new options to hide menu items, WebP image support, and even more flexible SEO options.

If you'd like to learn more about Publii, you can read our in-depth review here. You can also download Publii here.

6. Nuxt.js

It might be easy to confuse “Nuxt.js” with “Next.js,” but there’s a big difference between these two frameworks: while Next is built on React.js, Nuxt is built on Vue.js.

Next.js is certainly the more popular of the two (36K Github stars versus 19K), but we wanted to represent a Vue.js option that really does some slick and highly intuitive things.

Nuxt.js is a higher-level modular framework that helps you create production-ready Vue applications. It lets developers build from scratch by eliminating the need for excessive configurations on both the server and client side, allowing you to set up your project with intelligent defaults based on well-researched best practices.

Vue doesn't have a standard folder structure out-of-the-box. But Nuxt brings order to the chaos by setting up folders like a page directory for an application's routes and default conventions – which are all configurable. This gives you a great project structure.

Vue applications aren’t inherently SEO-friendly. You could pre-render your pages on the server as a solution, but it might be tricky to set up your own. Nuxt is preconfigured to generate your application on the server, along with powering your routes to make it easy to add SEO-related tags.

There are many other advantages to this handy platform, but it still comes down to UI rendering that abstracts away the server. You can statically render your Vue app and benefit from a powerful routing system and other features that make development faster and easier.

You can learn more about Nuxt here.

7. Eleventy (or 11ty)

We’re not entirely sure which is the preferred spelling, but we’ll stick with Eleventy for simplicity’s sake. Regardless, it’s a platform worth evaluating because of its simplicity – and its democratized philosophy around decoupling content.

Eleventy is a static site generator based on Javascript and built on Node. They position themselves as an alternative to Jekyll, but the key is that they’re not a Javascript framework. That means no client-side Javascript – and the code conventions and modules you use in your front-end are decoupled from the tool.

Unlike other static site generators, Eleventy doesn't force you to use a specific templating language. It works with HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and more.

Eleventy is also focused on performance, where static files shine. That’s why it allows you full control over how Javascript is included in your content. This is a stark contrast to other static site generators that have tightly coupled frameworks that include opinionated client-side Javascript and bulky, slow-loading libraries.

With Eleventy, you don’t need a blank slate to get started. You can work from a set of pre-rendered templates or migrate existing content piecemeal. You can also use an existing project directory structure to help streamline any conversions.

Learn more about Eleventy here.

JAMstack and DXP: the future of digital experiences?

While digital experience platforms (DXP) have been gaining ground, they’ve been hyper-focused on consolidating around a new stack of essentials. We’ve seen big acquisitions by major players over the last few years, racing to weave together content management (CMS), testing and analytics, marketing automation, CRM, and personalization.

Then, Covid-19 happened – and the pandemic ignited digital transformation across the globe. Now, leading brands face significant challenges that require more resources to meet their growing digital demands.

DXPs will have to wrestle with this challenge as speed and performance become more critical from a customer experience perspective. Will they be able to scale to meet unprecedented traffic? As they add new technologies, how will they cope with slower-moving architectures that stymie developer velocity?

This is where the JAMstack offers some huge opportunities for DXP. While the two have been separated by the classic gulf between marketing and IT, JAMstack players like Gatsby have made it their mission to bring these worlds together in a more meaningful way.

Even though most DXPs aren’t using JAMstack, they may want to take a hard look at the advantages: sub-second page loading, personalized content, modern front-end development tools, faster development cycles, unmatched scalability and security, and even greater control for DevOps teams to handle infrastructure issues.

Headless CMS has already carved a niche in the JAMstack ecosystem – and given the API capabilities of many DXPs, they might already be positioning themselves for a similar leap. In the meantime, the JAMstack offers some great opportunities with proven solutions – the kind that are sure to be sweet, sticky, and spreadable for some time to come.

News

Top JAMstack Static Site Generators for 2021