An Introduction to Static Site Generators

Websites can be of 2 types: static and dynamic. For static types, when user requests a file, server sends the file and user can see it. Every page is hand coded in html. In a dynamic type, When user requests, content is generated and server builds the page then sends it to the user. Generally managed by CMS like Wordpress or Joomla.

Static site generator (SSG) bridges the gap between static HTML sites and CMS based sites (like Wordpress). It provides better performance of static sites and we do not have to write HTML for content of our site.

Think of a static site generator as a script which takes in data, content and templates, processes them, and outputs a folder full of all the resultant pages and assets.

-Phil Hawksworth

In short, SSGs bring good of both worlds together.

Why use SSG ?

1. Security

Static websites do not have a database and all our server does is returns the file asked by user.

Our server becomes dumb (doesn't use logic to construct page) so no security issue to exploit.

2. Performance

Static websites perform better and load faster because the page isn’t constructed at run time.

3. Version Control

Our website can live in a version controlled environment, meaning if you make a mistake you can go back to a previous version in one command.

4. Scaling

When the number of users on a dynamic website increase it would mean to efficiently scale the website to ensure every user's page is served as quickly as possible while for static sites thats not a issue because our work is pre-done. Our website pages are already made and we just have to provide them.

5. Price

Static websites are obviously cheaper because we dont have to buy expensive server space as in the case of dynamic websites. We can even host our website on services like github or netlify.

6. Caching

Caching is easier with static sites as any URL will return same HTML content until and unless that file is updated by site owner. But with dynamic sites, content changes all the time so caching becomes difficult.

4 Features in SSGs

1. Templating : Avoiding repetition of code. Ex — Header and Footer templates can be created and included in every page.
2. Markdown Support : We can write our content in Markdown which is pretty basic and then we can focus just on the content.
3. Metadata — Content on the website can be broken into logical pieces like Tags,Categories etc.
4. Building the Site — Most SSGs allow to build complete site in 1 command. Ex: Jekyll uses jekyll build which creates _site folder containing the whole website, while Hugo uses hugo command to build whole project in public folder.

5 Popular SSGs to choose from

According to Staticgen:

1. Gatsby — Free and open source framework based on React that helps developers build blazing fast websites and webapps
2. Jekyll — Written in Ruby it is most popular framework, and helps to create websites
3. Hugo — Based on Go language. It boasts on being fastest framework for building sites.
4. Next.js — Based on React it helps us make highly customized sites and supports server side rendering
5. Nuxt.js — Based on VueJS it also supports server side rendering.

JAMStack

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”

-Mathias Biilmann (CEO & Co-founder of Netlify)

The above mentioned frameworks are based on JAMstack. Now what is JAMstack?

JAM stands for Javascript, API and Markup. Now this is not just static sites, they have server side capabilities too with the help of APIs and Javascript.

Why are SSGs becoming popular?

The concept of SSG isn't new, so why is it taking off now? Only possible reason is with advancement of browsers and their ability to deal with APIs and Javascript made it possible to go serverless. Things that required us to go dynamic in early 2000s can now be done using APIs.

For example:

• Adding comments to site can be done using Disqus.
• Search can be done using Swifttype.

The focus on performance has increased and we cannot simply wait for 5 seconds for a website to load. With the requirement of faster sites developers had to move to SSGs.

Referrences →

1. Phil Hawksworth article
2. Netguru — What are static site generators .
3. SmashingMagazine — Modern static generator is next big thing

Previously published at https://www.arjitsharma.com/posts/staticsitegenerators/