Static Site Generator ? - Technological watch

Introduction

You have multiples way to create a (small) 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

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/