Static Site Generators: A Beginner’s Guide

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.

1. Gatsby

Gatsby is a full-blown framework for building static websites and apps. It’s built in React and leverages GraphQL for manipulating data. If you’re curious and want to delve deeper, check out “Getting Started with Gatsby: Build Your First Static Site” on SitePoint and the docs on the Gatsby website.

Here are some of Gatsby’s strong points:

• With Gatsby you get to work with the latest web technologies — with React, webpack, modern JS, CSS and so on all ready for you to just start coding your site.
• Gatsby’s rich plugin ecosystem allows you to use any kind of data you prefer from one or more sources.
• Easy deployment and scalability, which is mainly due to the fact that Gatsby builds static pages that don’t require complicated setups.
• Gatsby is a progressive web apps (PWA) generator:
  

  You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. — Gatsby website

• gatsby-image combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites.
• Plenty of starter sites are available for you to grab freely and customize.

2. Next.js

Next is a versatile framework for the creation of server-rendered or statically exported JavaScript apps. It’s built on top of React and is created by Vercel.

To create a Next app, run the following command in your terminal:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

cd into nextjs-blog, your newly created directory, and type the command to open your Next JS app’s development server on port 3000:

npm run dev

To check that everything works as expected, open http://localhost:3000 in your browser.

Next.js has great docs, where you can learn more about building and customizing your Next-based apps.

Here are a number of Next’s best features:

• Next renders on the server by default, which is great for performance. For a discussion of the pros and cons of server-side rendering, check out this article by Alex Grigoryan on Medium.
• No setup necessary: automatic code-splitting, routing and hot reload out of the box.
• Image optimization, internationalization, and analytics.
• Great docs, tutorials, quizzes and examples to get you up and running from beginner to advanced user.
• Built-in CSS support.
• Tons of example apps to get you started.

3. Hugo

Hugo is a very popular static site generator with over 49k stars on GitHub right now. It’s written in Go, and advertises itself as being the fastest framework for building websites. In fact, Hugo comes with a fast build process, which makes building static websites a breeze and works great for blogs with lots of posts.

The docs are great and on the platform’s website you’ll find a fantastic quickstart guide that gets you up and running with the software in no time.

Here are some of Hugo’s most loved features:

• Designed and optimized for speed: as a rule of thumb, each piece of content renders in about one millisecond.
• No need to install extra plugins for things like pagination, redirection, multiple content types, and more.
• Rich theming system.
• Shortcodes available as an alternative to using Markdown.
• Since December 2020, Hugo offers Dart Sass support, and a new filter to overlay an image on top of another — Hugo 0.80: Last Release of 2020!

4. Nuxt.js

Nuxt.js is a higher-level framework built with Vue.js that lets you create production-ready web apps. With Nuxt, you can have:

• Server-side rendering for your website, also called universal or isomorphic mode. Nuxt uses a Node server to deliver HTML based on Vue components.
• Static site generation. With Nuxt, you can build static websites based on your Vue application.
• Single-page apps (SPAs). Nuxt gives you the configuration and the framework to build your Vue-based SPA.

Creating Nuxt-based websites can be done super quickly. Here’s the Hello World example on the Nuxt website. You can download it on your machine or play with it on Codesandbox to get started.

Here are some of Nuxt.js’s features:

• Great performance: Nuxt-based apps are optimized out of the box.
• Modular: Nuxt is built using a powerful modular structure. There are more than 50 modules you can choose from to speed up your development experience.
• Relatively easy learning curve. Nuxt is based on Vue, which is a framework that makes it quick and painless to get started.
• Integrated state management with Vuex.
• Automatic Code Splitting.
• Cutting-edge JavaScript code transpilation.
• Bundling and minifying of JS and CSS.
• Managing <head> element (<title>, <meta>, etc.).
• Pre-processor: Sass, Less, Stylus, etc.

5. Jekyll

Jekyll‘s simplicity and shallow learning curve make it a popular choice with 42k+ stars on GitHub at the time of writing. It’s been around since 2008, so it’s a mature and well supported piece of software.

Jekyll is built with Ruby. You write your content in Markdown, and the templating engine is Liquid. It’s ideal for blogs and other text-heavy websites. Jekyll is also the engine that powers up GitHub Pages, which means that you can host your Jekyll site on GitHub Pages for free, “custom domain name and all”.

Great features Jekyll has to offer include:

• simplicity
• free hosting on GitHub Pages
• great community that takes care of maintenance and the creation of themes, plugins, tutorials and other resources

6. Eleventy

Eleventy, often considered as the JavaScript alternative to Jekyll, introduces itself as “a simpler static site generator”. Eleventy is built on native JavaScript, no frameworks (although you can use your favorite one, if you so choose), has a default zero configuration setup approach, and lets you use the templating engine that you prefer.

To quickly get up and running with Eleventy, check out Craig Buckler’s “Getting Started with Eleventy”, Raymond Camden’s “11ty Tutorial: Cranking Your Jamstack Blog Up to 11”, and Tatiana Mac’s “Beginner’s Guide to Eleventy”, or head over to the getting started docs pages on the Eleventy website.

Some nice features include:

• simplicity and performance
• community-driven
• flexible templating system
• fast build times

7. VuePress

VuePress is a Vue-powered static site generator. Its default theme is optimized for writing technical docs, so it works great for this type of site right out of the box. Its current, stable version at the time of writing is 1.8.0, but if you’re curious about the breaking changes that are in the works, check out version 2 alpha on GitHub.

A VuePress site works as an SPA that leverages the power of Vue, Vue Router and webpack.

To get started with VuePress, you need Node.js v.10+ and optionally Yarn Classic.

For a quick VuePress setup, use the create-vuepress-site generator by opening your terminal in your directory of choice and running either of the following commands, depending on whether you’re using Npm or Yarn:

Npm:

npx create-vuepress-site [optionalDirectoryName]

Yarn:

yarn create vuepress-site [optionalDirectoryName]

After you’ve answered a few configuration questions, you should see the new website file structure in your chosen folder.

Head over to the VuePress Guide for more details.

Here are some great features that VuePress has to offer:

• Setting up your VuePress-based site is quick and you can write your content using Markdown.
• VuePress is built on Vue, which means that you can enjoy the web experience of Vue, webpack, the possibility of using Vue components inside Markdown files and of developing custom themes with Vue.
• Fast loading experience: VuePress static sites are made of pre-rendered static HTML and run as an SPA once they’re loaded in the browser.
• Multilanguage support by default with i18n.

Nuxt.js or VuePress?

Both Nuxt.js and VuePress are built on top of Vue.js and let you create static websites. So, which one is to be preferred over the other?

Let’s say that Nuxt.js can do everything VuePress does. However, in essence, Nuxt is best suited for building applications. VuePress, on the other hand, is ideal for creating static documentation websites that display content written in Markdown.

In short, if all you need is a documentation site or a very simple blog in Vue.js, consider reaching out for VuePress, as Nuxt would be overkill.

How to Choose a Static Site Generator

With all the options available, it’s easy to feel paralyzed when it comes to choosing a static site generator that fits the bill. There are some considerations that could help you sieve through what’s on offer.

Your project’s requirements should throw some light on the features you should be looking for in your SSG.

If your project needs lots of dynamic capabilities out of the box, then Hugo and Gatsby could be a good choice. As for build and deploy time, all of the SSGs listed above perform very well, although Hugo seems to be the favorite, especially if your website has a lot of content.

Is your project a blog or a personal website? In this case Jekyll and Eleventy could be excellent choices, while for a simple documentation website VuePress would be a great fit. If you’re planning an ecommerce website, you might want to consider which SSG fits in well with a headless CMS for store management. In this case, Gatsby and Nuxt could work pretty well.

One more thing you might want to consider is your familiarity with each of the SSG languages. If you program in Go, then Hugo is most likely your preferred choice. On the other hand, if JavaScript is your favorite programming language, you’re spoilt for choice: Eleventy is built in pure JS, Next and Gatsby are built on top of React, while Nuxt and VuePress are built in Vue.

With regard to stuff like great documentation, strong community and support, all of the static site generators I listed figure among the most popular.

FAQs About Static Site Generators SSGs