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.
In short, SSGs bring good of both worlds together.
Why use SSG ?
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.
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.
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.
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.
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
- Templating : Avoiding repetition of code. Ex — Header and Footer templates can be created and included in every page.
- Markdown Support : We can write our content in Markdown which is pretty basic and then we can focus just on the content.
- Metadata — Content on the website can be broken into logical pieces like Tags,Categories etc.
- 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:
- Gatsby — Free and open source framework based on React that helps developers build blazing fast websites and webapps
- Jekyll — Written in Ruby it is most popular framework, and helps to create websites
- Hugo — Based on Go language. It boasts on being fastest framework for building sites.
- Next.js — Based on React it helps us make highly customized sites and supports server side rendering
- Nuxt.js — Based on VueJS it also supports server side rendering.
-Mathias Biilmann (CEO & Co-founder of Netlify)
The above mentioned frameworks are based on JAMstack. Now what is JAMstack?
Why are SSGs becoming popular?
- 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.
- Phil Hawksworth article
- Netguru — What are static site generators .
- SmashingMagazine — Modern static generator is next big thing
Previously published at https://www.arjitsharma.com/posts/staticsitegenerators/