Static-site generators are a key element of the modern Jamstack architecture. We explore the standout features of seven leading static-site generators.

The Jamstack (JavaScript, APIs, and Markup) is increasingly becoming the development stack of choice on the Web. The title on the Jamstack website suggests that the Jamstack is “the modern way to build websites and apps” and that it “delivers better performance”.

Performance is certainly one of the benefits the Jamstack brings to the table, together with better security, scalability, and developer experience. Sites built on this type of architecture make use of pre-rendered static pages served over CDNs, can get data from multiple sources, and replace traditional servers and their databases with micro service APIs.

What makes possible the creation of static sites quickly and relatively painlessly are static site generators (SSGs).

There are tons of static site generators in a range of programming languages, such as JavaScript, Ruby, Go, and more. You’ll find an exhaustive, unfiltered list on staticsitegenerators.net, but if you’d like something more manageable, check out the Jamstack website”s list, where you can filter static site generators by name or by the number of GitHub stars.

In this article, I’m going to list seven popular static site generators and their main features, so that you can form a better idea of which one among them would be a good fit for your project.

What Are Static Site Generators?

A common CMS (content management system) — like WordPress, for instance — builds the web page dynamically as it’s being requested by the client: it assembles all the data from the database, and processes the content through a template engine. In contrast, while static site generators also process pages through a template engine, they handle the build process before the pages are requested by the client, meaning that they’re ready to serve when requested. All that’s hosted online is static assets, which makes sites much more lightweight and faster to serve.

To learn more about the differences between a traditional CMS and a static site generator, and about the benefits of using an SSG, check out Craig Buckler’s article on “7 Reasons to Use a Static Site Generator”.

But, what about all the good things that come with CMSs, like content creation and update by non developers, team collaboration around content, and so on? Enter the headless CMS.

A headless CMS is one that has only has a back end. There’s no front end to display the content. Its only job is to manage content, but it also provides an API that another front end can use to retrieve the data entered into it.

This way, the editorial team, for example, can continue working from their familiar, user-friendly admin interface and the content they produce or update is just one data source among others that static site generators can access via the exposed API. Popular headless CMS software include Strapi, Sanity, and Contentful. Also, WordPress has a REST API that allows devs to use it as a headless CMS.

So, the modern Jamstack tooling makes it possible to build a statically-served website and still get the benefits of a content management system.

Now, let’s go through some static site generator options.

• Gatsby
• Next.js
• Hugo
• Nuxt.js
• Jekyll
• Eleventy
• VuePress
• Nuxt.js or VuePress?

#javascript #api #gatsby #nuxt #next