Static Generators

The world of static sites has grown beyond HTML, CSS, and occasional JS, and much of it is owed to static site generators.

Written by:
  • Nebojsa Radakovic

    Nebojsa Radakovic

Last update: July 5, 2021

Learn about Static Generators

The rapidly evolving Jamstack ecosystem and static site generators are certainly a big part of it, have sparked a huge interest in the approach and tools around it. We can’t say it is mainstream, at least not yet, but having VCs competing with investments in the companies in the space certainly paves the road to much wider adoption.

Setting that aside, the advantages of using static site generators are impressive, with speed, security, and scalability among the top ones. What more web developers are already adding dynamic elements with the use of 3rd party APIs, expanding the capabilities of static sites.

But we’re getting ahead of ourselves. Let’s deal with the basics first.

What is a static site generator?

A static site generator is a tool that helps you build static pages out of the input files. It takes your content (from a headless CMS, for example), applies a selected template, and generates static HTML pages out of it.

The biggest difference between the SSGs approach and what is now considered the traditional web dev approach embodied in the use of WordPress is that instead of building a page on demand each time a user visits the site, SSG does this at build time. Basically, an already built page, stored on a CDN, is served to the user when he visits the website.

How static site generators work?

This way, you’ll get a website that loads fast but may lack the dynamic functionalities expected in today’s websites. I’ll get to that in a minute.

Why use a static site generator?

As already mentioned, the benefits of websites built in such a way are many. Being that you are serving static HTML pages, load speed, and overall website performance is greatly improved when compared to the traditional dynamic websites (websites built with traditional CMSs like WordPress or Drupal). On top of that, it is incredibly easy to deploy and host static sites.

Build and request time of static site generators.

Since you are serving only static files, you are bound to have fewer security issues simply because the surface area for harmful attacks is reduced. And by having a simple server-side setup, maintenance and scalability are much easier as well.

Then there are the cost-benefits of using static site generators. Besides being globally and consistently fast and always online thanks to CDNs, serving static sites via CDN will lower your hosting bills substantially.

Disadvantages of static site generators

Surprisingly there are some disadvantages to static site generators. With the workflow being more developer-friendly and significantly different from that of the traditional monolith approach, you need more technical skills to work with SSGs.

And using SSGs alone would be hard for content managers and editors, for example. Thankfully, with a growing tools ecosystem around static site development, this can be handled easily using the numerous available headless CMS solutions.

While adding dynamic elements and interactivity with users within pages can be a nuisance, there are already solutions in the ecosystem of Jamstack. Still, it increases the complexity of what you build and how you build it requiring you to invest more in knowledge, dev time, and devs.

Finally, the sheer abundance of choice (I kid you not, right now there are around 600 listed SSGs) makes the decision-making (which one to go for) more difficult than anticipated.

How to choose your static site generator?

Choosing the right static site generator depends on your project, the experience of the team involved in the project, features needed for your project, and programming language.

What are you building?

It is not the same if you have a simple blog for a project or a feature-heavy eCommerce. And it doesn’t help to know that SSGs come in all ‘shapes and sizes.’ Some are made with a specific front-end or back-end in mind. Some are made for creating fast photo gallery websites. Others help you create documentation pages/websites more easily. Most of them (more or less) can help you manage a typical website with a blog.

Who is it for?

Once your project needs are considered, think about who’s gonna use/edit the website? Having a streamlined dev experience that usually comes with the use of SSGs is great, but are non-technical users going to work on this site once you are done? If so, think about easing things for them as well. Consider pairing your SSG with an easy-to-use headless CMS.

What language or framework?

The SSGs have vastly improved over the years. You can now find site generators that are based in a vast number of programming languages, use different templating languages and conventions, and run in all sorts of environments.

Do you code in JavaScript? There are Next.js and Gatsby among the most popular SSGs for you written with React. Vue is your thing? Check Nuxt.js or Gridsome. Are you tired of heavy JS frameworks? Take a look at Eleventy. Do you like to write in Go? Then Hugo is the best option. If Ruby is the language of your choice, you should go with Jekyll.

While using preferred language or a framework can ease up the job, keep in mind project needs come first.

The best static site generators?

Advising on the best whatever nowadays is a double-edged sword. With that being the case, instead of ranking them as the best, we’d like to go through some of the most popular options we’ve worked with, and that way, hopefully, help you make the best decision for your project.

For the sake of clarity and ease of comparison, each static site generator review has the same structure. First, we talk about the history and the current state of the project. Next, we cover the best features and strengths. Then, we focus on the ecosystem and showcase a couple of the most popular projects.

Finally, we’ll show you how to get started and how to deploy your project with SSG in question. And in the end, as a recap, we’ll go through the best features and use cases.

SSG Reviews

Static site generators yesterday, today, and tomorrow

Static site generators evolved from simple ones like Hugo and Jekyll to full-blown React-based frameworks like Gatsby or Next.js. But people started realizing that not every project needs so many client-side JS. We’re starting to see new approaches. Astro is a very interesting concept. It gives you the same component-oriented developer experience but ships less JavaScript.

Eleventy gains more and more popularity. Its newest feature called Eleventy Serverless is able to build pages on-demand (not during the CI/CD build!).

Since the CDNs have become more powerful than ever, we expect to see more tools that take advantage of on-demand rendering. With a proper caching strategy, this approach can reduce build time significantly or even remove it. It won’t replace builds, but it will reduce the number of pages you need to prebuild. Focus on the critical ones and the rest build later.

In a Nutshell

With static site generators, you get the benefits of using a traditional CMS, with the simplicity and performance of static HTML. They’re reliable, scalable, can potentially save you time and money, and can handle high volumes of traffic well.

From our own experience, if you’re seeking simplicity and a short learning curve - you should go with Eleventy. If you are building a big site, and you want to be able to change and add many new posts, choose Hugo. In any other case, we’d suggest you go with Gatsby or Next.js, Gridsome, or Nuxt if you are into Vue.

Stuck with a project? Not sure which one of these static site generators is best for you? Let’s get in touch!

We’ll be more than happy to chat through your requirements and advise you on the best path forward.

Further reading

Superheroes stack

Discover More

Jamstack SEO Guide

Whether you are running a Jamstack website or not, this is a comprehensive overview of everything you need to know to succeed at SEO.

Read article »

Jamstack Hosting and Cloud Deployment Platforms

Discover a couple of Jamstack hosting and cloud deployment platforms favored by the community.

Read article »

Headless CMS

Throughout 2020 the headless CMS trend showed no signs of slowing. In 2021 you can expect the trend to grow beyond buzzword popularity as more and more brands turn to headless options for their content management.

Read article »