Websites can be of 2 types :
Static- When user requests a file, server sends the file and user can see it. Every page is hand coded in html.
Dynamic- When user requests, content is generated and server builds the page then sends it to the user. Generally managed by CMS like wordpress,joomla etc
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 to 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(doesnt use logic to construct page) so no security issue to exploit.
Static websites perform better and load faster because page is’nt constructed at run time.
Our website can live in a Version controlled enviroment, meaning if you make a mistake you can go back to previous version in one command.
When number of users on a dynamic website increase it would mean to efficiently scale the website to ensure every users 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 chaching becomes difficult.
Features in SSGs
- Templating : Avoiding repeatation 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 buildwhich creates _site folder containing the whole website, while Hugo uses
hugocommand to build whole project in public folder.
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 mentionsed frameworks are based on JAMstack. Now what is JAMstack?
Why SSGs are taking off now ??
Concept of SSG is’nt new so why is it taking off now.
Adding comments to site can be done using Disqus.
Search can be done using Swifttype.
Focus on performance has increased and we cannot simply wait for 5sec for a website to load. With the requirement of faster sites developers had to move to SSGs.