Static Site Generator ? - Technological watch

Learn what is a static site generator in less than 5 minutes !
Friday, August 19, 2022

Introduction

You have multiples way to create a website :

  • Use an online tool like Wix
  • Use a tool or CMS like Wordpress, Drupal or Ghost
  • Develop your own website with a lot of technologies like PHP, NodeJS, Python, PostgreSQL, MySQL, Apache ā€¦

All these solutions have a drawback : these solutions are heavy to set up and often slow šŸ„ŗ

And whatever, after you need to maintain it, make sure there are no vulnerabilities, make often upgrades ā€¦


If you want to create a simple website, I have a solution is for you : it is called : Static site generator šŸ˜Š

Static site generator

Loading graph...

A static site generator is a program that uses a set of templates and raw data to create a complete static HTML website. A static site generator essentially automates the process of writing individual HTML pages and prepares those pages in advance for serving to users. These HTML pages can load in clientsā€™ browsers pretty fast because they are pre-built.

Pros

Performance, cost and security

The first advantage of using an SSG is performance and simplicity. And in end, you will have a fast and lightweight website !

Why ?

  • No database to deploy and setup ! All content like markdown files are transpiled to HTML files directly

  • No backend to manage

  • So, no entry points for hackers ! The site website is secured !

  • All the calculations of template are made only once. Then, your server doesnā€™t have to regenerate the templates again and again

  • In a lot of frontend frameworks (like React, Vue or Svelte), you have a transpilation time. So, Static Site Generators fit the modern front-end workflow

Easy to manage

  • As you donā€™t have database, there is no additional costs about hosting a new service
  • Everything can be contained in a Git (Everything is plain text)
  • SSG mostly supports popular syntax like Markdown. The good news is that if one day you want to move your website, the migration will be easy to do too !
  • An SSG is very easy to customize if you know the basics of HTML and CSS

Deployment

  • An SSG is easy to deploy (you just have to drop HTML files in a folder)

  • No specific installation to do - no need to install a backend language on the server

  • It is easy to scale as we only have HTML files to host

Cons

Unfortunately, there are some cons about using an SSG:

  • First, there is no backend (and no administration interface). If you want to manage the website, you need to manipulate markdown files (there are ways to create backend, but SSG arenā€™t meant for that use case)

  • There is no possibility for your users to modify the website : if there is a modification to do, you need to pass by a merge request. (Only you can modify the website). SSG arenā€™t meant to manage forms. So, if there are many writers, SSG arenā€™t ideal. And if users wants to comment your website, we have to pass by another service (like Disqus for example).

  • To apply a modification (however small), you must completely rebuild the website.

For what kind of project ?

To know if an SSG tool if for you, you can ask some questions like :

  • What are the project requirements, size, complexity, update frequency ?
  • Who are the users, their expectations ?
  • What are the hosting and/or deployment factors ?

Most of the time, SSG are perfect for hostings websites like:

  • Documentations
  • Blogs
  • Portfolios
  • Tiny websites
  • Homepages
  • Presentations

Tools to try out Static Site Generator

Here is a list of the best SSG tools:

  • Hugo (made in Go) : a very FAST SSG. It is a tool which focus on content ! It powered my blog for years !

  • AstroJS (made in JS) : an AMAZING SSG. It powers my blog now, and I am very happy with it ! It is very easy to work with javascript frameworks like React, Vue or Svelte !

  • Gatsby (made in JS) : an SSG tool built on top of ReactJS.

  • Jekyll (made in Ruby) : an old SSG. It powers Github pages.

  • Eleventy (made in JS) : a tiny SSG

If you want to get a full list of SSG, you can find one there : https://jamstack.org/generators/


Recommended articles