Static Site Generators

Updated Sep 21, 2021#webdev#rendering#lists

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.

  • Gatsby - React based, GraphQL powered, static site generator. It 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.
  • Hugo - One of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
  • Jekyll - Simple, blog-aware, static site generator for personal, project, or organization sites. Written in Ruby by Tom Preston-Werner, GitHub’s co-founder, it is distributed under the open source MIT license.
  • Hexo - Fast, simple and powerful blog framework. You write posts in Markdown (or other markup languages) and Hexo generates static files with a beautiful theme in seconds.
  • Nuxt - Progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). It can be used to create from static landing pages to complex enterprise ready web applications.
  • VuePress - Composed of two parts: a minimalistic static site generator with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue’s own sub projects.
  • Docusaurus - Written primarily in JavaScript and React, replacing Jekyll which we used in the old template. It is a tool designed to make it easy for teams to publish documentation websites without having to worry about the infrastructure and design details.
  • Next - An incredible React framework, being the premier server-side rendering solution for React which is absolutely critical for performance and SEO of non-static React apps.
  • 11ty - A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML. Works with HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and JavaScript Template Literals.

What is SSG

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!

What SSG can do

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.

When to use SSG

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.