Static Site Generators (SSG)

Mar 21, 2020 • ☕️ 5 min read

Should you use Static Site Generators (SSG)? Short answer is YES. Long answer is it depends on your content and expectation in terms of performance, SEO, cost, and developer experience.

The Motivation

Originally most websites are static with only HTML and CSS, then JavaScript was added to make them more interactive. Then web development getting more and more complicated with many server-side and client-side rendering frameworks which allows you to create dynamic websites connecting with databases.

But above rendering strategies have steep learning curve and sometimes overkill for a small blog, landing page, or documentation website. That’s the situation static website is a perfect fit, fast to get started, and very cheap to maintain.

Static Site Generator (SSG) is what we need to create static websites these days, it is often a framework that adopts static rendering strategy and help you generate static websites which are blazing fast and SEO friendly.

You can deploy your site to static site hosting services such as ZEIT Now, GitHub Pages, Netlify, and Render. Static sites are statically rendered so they work without JavaScript too!

The Options

There are tons of static site generators out there with different set of supported features, following are most popular ones:

SSG Github Languages Templates Best
Gatsby 42k JavaScript React Static Sites
Hugo 42k Go Go Static Sites
Jekyll 39k Ruby Liquid Static Sites
Hexo 29k JavaScript Many Static Sites
Nuxt 26k JavaScript Vue Static Sites
VuePress 15k JavaScript Vue Documentation
Docusaurus 15k JavaScript Markdown Documentation

Gatsby is actually a great point of entry. It has fantastic documentation and examples of React and GraphQL, and its structure lends itself to thinking in React and thinking in GraphQL. I think Gatsby has a great future ahead of it!

The Features

Let’s look at common features that make a great static site generator:

Generating pre-rendered static HTML for each page. This is the core feature of any pure static site generator and happens at build time. With mobile-first indexing and page speed as one of the top ranking factors, it is easy to understand why lack of speed and huge load times is a disadvantage you cannot afford.

Has simple setup and fast to get started. An important selling point to those not really good at web development or non technical bloggers.

Markdown centered structure that helps you focus on writing. Static websites are perfect solutions to blog, landing page and documentation which are heavily influenced writing in markdown format.

Has support to multiple template engines. Besides popular support for React, Vue, and Markdown; SSGs might support EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko.

Has support to multiple content sources. Beyond local files handling, you can also load data from CMSs (Contentful, Drupal, Wordpress, etc.) or external APIs.

Hot reload in development and fast build time. Static site generators are made for developers and these are features that developers really care about. Hundreds of files should take only seconds to generate.

Has support document versioning and translation. This is key to documentation focused site generators like Docusaurus or VuePress.

Has flexible content management. A static site generator needs to extend beyond front matter and a couple of templates to be both scalable and manageable.

Has extensive ecosystem of plugins and themes. Plugins are the building blocks of features, each plugin handles its own individual feature. Themes are mostly focused on client-side, where plugins are more focused on server-side functionalities. Themes are also designed to be replace-able with other themes.

Build-in optimization for production. Enjoy the power of the latest web technologies – React.js , Webpack , modern JavaScript and CSS and more — all set up and waiting for you to start building.

Supporting Progressive Web App (PWA). Sites generated by SSG often meet three baseline criteria to qualify as a PWA as long as you run your page via HTTPS and install a plugin for the manifest and service worker.

Final Thoughts

Ultimately consider using static site generator when you are in following situations:

  • Your site is a small blog, landing page or documentation
  • You need high performance in a wide spectrum of supported devices
  • You desperately need consistent SEO and social sharing previews
  • Your budget is tight and can’t tolerate unnecessary cost of server and bandwidth
  • You need a simple solution to develop prototypes or validate market
  • You need a secured and reliable website with zero to little monitoring
  • Your content is predictable, slow changes, and public available to all users

So what’s keeping you from moving to the world of static web development? It’s cheap to get started, you can always switch to client-side or server-side rendering any time you want with very little effort.

Don’t forget that some CSR or SSR frameworks also supporting generating static HTML as a feature. Next.js is a great example of server-side rendering framework that has support for static exporting which can be run standalone without the need of a Node.js server.

Related Posts

JavaScript Host Environments

Host environments implement JavaScript language specification and provides additional platform specific functionality

Node.js HTTP request libraries

Notable libraries to make HTTP requests in Node.js applications

Relational databases

Relational database management systems (RDBMS) use the SQL data definition and query language

Node command-line libraries

Notable utility libraries to build next beautiful, interactive, easy-to-use command-line apps