Each year we watch with interest as the Jamstack tooling landscape continues to evolve. Right at the heart of this is the library or framework responsible for turning templates, content, and data into a deployable site or application. Dubbed “static site generators”, some of these tools now go far further than their ancestors by delivering ever more rich developer workflows and integrations.
At their heart they still do the work of creating the web assets you’ll deploy to your chosen hosting platform to serve your site, but as the landscape matures, the available options of well-established tools are growing to.
This post looks at some of the most popular and noteworthy site generators we see deployed at volume on the Netlify infrastructure or earning attention in the Jamstack ecosystem.
Gatsby
Continuing to be very popular and commonly used, Gatsby pairs a React-based approach to development with a GraphQL data pipeline to offer a rapid development workflow.
As with all React-based SSGs, a strong component model brings great re-usability and modularity, and has underpinned a plugin ecosystem for Gatsby.
While the performance delivered to end-users is purported to be very good, Gatsby has historically struggled to offer fast build-times for sites with large numbers of pages, which has lead to lots of exciting efforts to support build caching and other build-time optimisations — an evolving space in the world of site generators.
Gatsby also released various image optimizations this year to increase the performance of image manipulation operations at build time, and add various automatic image format support in the front-end code it generates.
Deploy and explore
Click this button to clone an example Gatsby site to explore
Next.js
If 2019 was the year momentum was with Gatsby, 2021 has been the year of Next.js. With a great surge in popularity and adoption, this React-based site generator has struck a chord with many developers already familiar with React.
Perhaps reflecting the growing popularity of the Jamstack category and its evolution to deliver sites of larger and larger sizes, Next.js has focused much effort on a hybrid of static site generation (SSG) and server side rendering (SSR) models, along with support for incremental regeneration.
With tighter coupling between the framework and hosting platform than others on this list, Next.js has required some additional development by hosting providers to support some of its features compared to the more portable and platform agnostic tools. On the Netlify platform, this is provided by the Essential Next.js plugin which is automatically installed for Next.js projects.
Deploy and explore
Click this button to clone an example Next.js site to explore
Nuxt.js
Often described as the Vue version of Next.js, Nuxt.js does indeed adopt many of the conventions and features previously implemented by its React-based influencer.
Capable of running with in SSR or SSG modes and has great modularity and composability thanks to its underlying Vue component model and is readily extensible thanks to its plugins model.
Many consider Vue to be more approachable and have an easier on-ramp than React, which makes tools like Nuxt.js a popular choice (of course, this is subjective, and may depend on your experience and taste). I for one have found that, and have also enjoyed how it makes things like transitions and animations readily available to me via its transitions component, which I found fit my mental model more readily than some alternatives.
Deploy and explore
Click this button to clone an example Nuxt.js site to explore
Jekyll
The SSG that started it all! With support integrated in to GitHub Pages, Jekyll, the popular Ruby-based site generator, opened the door to automated builds and continuous deployment for many of us. Its support for the expressive, but simple Liquid templating language proved popular as developers began exploring this space and it still has great adoption particularly within the GitHub environment.
Jekyll also paved the way for many conventions which are still a staple in this space, such as support for markdown content and the collection of data from yaml frontmatter.
Maintained as an open source project, it is greatly portable and generates markup without also bundling in a JavaScript framework, meaning that it is still a popular choice for those wishing to have complete control over the JavaScript shipped to the end user, or without the need for client-side JavaScript at all.
The increasing rise of JavaScript and its slightly more approachable dependency management has swayed some developers, less familiar with the Ruby ecosystem, to seek similar alternatives which utilize JavaScript rather that Ruby as their build-time environment, but for many Jekyll remains a trusted tool.
Deploy and explore
Click this button to clone an example Jekyll site to explore
Hugo
Touted as the site generator capable of the fastest site build speeds (typically less than 1ms per page), Hugo has been commonly deployed as the tool to build sites with large numbers of pages.
Written in GO and readily installable as a binary, Hugo is tremendously portable and built on many of the principles established by Jekyll. Beyond that it evolved many conventions for helping to organize template types and site structures.
Its theming system has spawned a large library of ready-made site themes and also gained popularity with those often re-skinning common site patterns, and its very rapid build times provide speedy feedback cycles during development the workflow.
In a world dominated by JavaScript tools, Hugo remains very popular with a great many sites deployed on various hosting platforms and is adored by those using it regularly.
Deploy and explore
Click this button to clone an example Hugo site to explore
Gridsome
Gridsome is a Vue.js-powered framework for building static generated websites & apps. Leading with the phrase “fast by default”, Gridsome generates an HTML and also a JSON file for every page of your site and then uses progressive enhancement to add some client-side utilities to give you things like link pre-fetching based on the when links come into view, code splitting, image lazy loading and more.
It shares many principles with Gatsby and the site it generates includes a framework to deliver a Vue Single Page Application (SPA) which can be deployed to any hosting infrastructure. It’s unified GraphQL data layer and hot-reloading help to provide a gratifying and productive development workflow.
The single file page templates will be familiar to those who have explored Vue and provide a nice way of adding page transitions and other nice things from the Vue ecosystem.
The Gridsome site includes a variety of starter templates which demonstrate how to use Gridsome with a variety of content sources and integrations.
Deploy and explore
Click this button to clone an example Gridsome site to explore
Docusaurus
One of the benefits of a flourishing ecosystem of tools, is that we have the option to choose the right tool for each job rather than assuming one tool will be the perfect solution for every use case.
Docusaurus is focused on delivering documentation sites. It has the stated goal to “do one thing super well - be the best tool for writing and publishing content” and as such has become very popular in the active and discerning documentarian community.
Built using React, it supports writing content in MDX so that JSX and React components can be embedded into markdown, but also aims to remain easy to learn and use by providing sensible defaults and the ability to override if the developer has need. Recently releasing a major update with Docusaurus 2 beta, many of its principles were inspired by Gatsby but it is more focused and aims to be easier to use and be more approachable for content authors.
Eleventy
The popularity of Eleventy is difficult to measure on the web, since by design, it is transparent and unobtrusive, leaving no signature in the sites it generates. However, anecdotally (and observed within the Netlify build infrastructure) we are seeing Eleventy gain momentum particularly among parts of the web development community interested in performance and retaining complete control over their site output. (Google’s Chrome Dev Summit and web.dev sites are good examples).
Perhaps most conveniently described as Jekyll implemented with JavaScript rather than Ruby, Eleventy has now moved beyond that while retaining a clear and simple on-ramp, and only shipping to the browser what you tell it too. As with Jekyll and Hugo, no JavaScript frameworks are auto-baked in.
It supports most popular templating libraries, is portable, and deployable on any hosting provider, although recent experiments have included optional support for on-demand builders (Netlify’s implementation of Distributed Persistent Rendering).
Deploy and explore
Click this button to clone an example Eleventy site to explore
Scully
While seemingly less fashionable in some web development circles today, Angular is still hugely popular and influential in the enterprise space. And Scully delivers SSG capabilities to those building with Angular. It works by analyzing your Angular application to determine its routes and generating pre-rendered entry points for each one.
A plugin architecture also adds data pipelines and extensibility, and Scully’s foundation of Angular primitives means that it provides a low friction path to pre-rendered sites for Angular developers and those working with existing Angular codebases.
In October 2020, Scully officially released v1.0 and our own Tara Manicsic has been watching it closely and creating various resources for those keen to explore.
Deploy and explore
Click this button to clone an example Scully site to explore
SvelteKit
Although we’re not currently seeing large adoption of SvelteKit this is another interesting one to watch.
Inspired by, and extending many of the approaches found in Next.js, SvelteKit (which replace Sapper) is built with Svelte components rather than with React, and so claims to be leaner and faster than its React and Vue-based counterparts.
It adopts an approach of progressive enhancement, where each page is generated as a valid entry point, and then can be enhanced with client-side JavaScript to provide faster onward navigation.
SvelteKit can create sites to be served by serverless functions, or can pre-generate the entire site. And its hybrid approach and focus on serverless back-ends makes it an interesting project to watch as we see the boundaries of Jamstack sites developing.
Still relatively early in its development, SvelteKit has a number of adapters to help push its functionality beyond static generation and support various serverless frameworks, including this one for Netlify Functions
Bonus mention: Vite
What? 11 for the price of 10? Oh Philip, you spoil us!
Confession time — keeping this list to just 10 is really hard. While many of the SSGs on this list have appeared before, the landscape is shifting and new tools are emerging and bringing some new approaches and improvements. I suspect that the coming months will see some newer tools gaining lots of momentum.
So let’s sneak this last one in. Not strictly speaking purely an SSG, but tooling for a similar purpose, Vite is another open source project from the brain of Evan You (along with a healthy set of hundreds of contributors). Its goal is to provide a faster and leaner development experience for the web.
Behind the scenes it uses a very opinionated configuration of Rollup for bundling your site into static assets with lots of smart defaults. You don’t need to know Rollup to use it, but can tune it to your precise requirements via its JavaScript API and rapidly growing set of plugins.
It offers a lean local development server which lets you work with Hot Module Replacement, TypeScript and some very smart and speedy dependency bundling behaviors. You get built-in support for JSX and TSX along with support for various popular CSS pre and post processors.
It looks set to appeal to developers who favor many of the modern web frameworks and libraries and already has a growing set of project templates built on React, Vue and Svelte.
A very interesting one to watch!
Deploy and explore
Click this button to clone an example Vite site to explore
Explore more
Of course the list of static site generators and frameworks doesn’t end here. There is a huge variety of similar tools in existence, and new arrivals and approaches continue to push things forward and keep this space interesting.
For more generators, explore the list on contributed and collected on Jamstack.org/generators
