# Static Site Generators

## Summary


A static site generator is an application that uses plain text files rather than a database as the content repository and builds HTML files by applying themes, layouts and templates to them. 

The generated static site files are delivered to the end user exactly as they are on the server. Hence, there is no server-side language or database. The generated files are HTML, CSS and JavaScript, served with graphic files (jpeg, gif, svg, webgl) and data formats (JSON or XML).

Static sites offer several advantages in speed, security and scalability over dynamic sites (Content Management Systems).

## Discussion

### What are static sites and how are they created?

Static sites are basic websites that can be built by simply creating a few HTML pages and publishing them to a Web server.

Over a period of time, the way in which static sites were generated has progressed in the following manner: 

    + 1990s: Static sites were created by directly creating HTML files.
    + 2000s: WYSIWYG (What You See is What You Get) Desktop applications were used to create and edit the website.
    + 2010s: File system compilers are used to generate static sites.

### How does a static site generator work?

A static site generator parses templates, partials, liquid code, markdown and synthesizes (combining into a coherent whole) a static site. The static site generator script itself is written in a programming language like Ruby, Go, Python, React, etc.

Most of them generate a website from a set of files: 

    + The content is produced in lightweight syntax like Markdown or Asciidoc.
    + A templating engine (Liquid, Go Template, Nunjucks) is responsible for the logic while generating the HTML.
    + A converter (kramdown, commonmark, blackfriday, Asciidoctor) transforms the lightweight syntax into HTML.Most static site generators support one or more file-based data formats like JSON, YAML, and TOML to define the metadata. 


### What is the JAMstack?

**JAMstack** is the abbreviation for JavaScript, APIs, and Markup stack. This describes the main attributes of a statically generated site.

Matt Billman, Co-founder & CEO, Netlify came up with the term JAMstack in 2012. The new term was intended to change the archaic connotation of "static sites". This is because the term "static site" is often misunderstood to describe the experiential characteristics of a site rather than the attributes of the site architecture which delivers it. 

The JAM stack architecture enables the seamless integration of microservices. Microservices provide an easy access to functionality like form handling, authentication, real-time databases without the need for a dedicated back-end. Peter Levine of Andreesen Horowitz venture capital firm commented that, 

> It’s ridiculous that the web is still clinging on to monolithic backends—with their high costs, slower speeds, and huge surface area for attacks—in an age of microservices.


### What are the advantages of using static site generators?

We note the following advantage of SSG:  

**Performance**—Faster since there's no server side processing/compute involved and no database connections to be made.

**Resilience**—More resilient to sudden traffic spikes. For high-availability websites, single points of failures are reduced.

**Security**—When compared to dynamic CMS sites, static pages are easier to secure. No server-side language exploits, no database vulnerabilities and fewer attack vectors.

**Hosting**—Server setup and maintenance is simpler and cheaper as memory and CPU requirements are not much compared to dynamic sites. Upgrades and new versions of the server-side language or the database don't affect the generated static pages.

**Portability**—Since the site is not coupled to a complex hosting infrastructure, it can be moved from one place to another and redeployed in a simpler manner.

**Compliance**—The simple architecture contributes to easier compliance, especially when building something for a large company and hosting in their environment.

**Attrition Avoidance**—Static sites don't demand sustained monitoring, patching missing dependencies or infrastructure.

**Version Control**—Since the entire site is file based, a version control system like *git* can keep track of all changes to content and configuration.


### What are the challenges/limitations in using Static Site Generators?

**Complex Workflow**—Most of the mature static site generators were intended for the hobbyist programmer, which has resulted in a complex workflow for clients. Editing and previewing production changes is complicated.

**Competitive Ecosystem**—With over 450 static site generators in the open, a lot of effort is duplicated to solve the same problem of basically rendering markdown.

**Realtime changes**—Real-time changes are not possible in the current system as opposed to CMSs. Large static sites sometimes take minutes to generate accurately. They load, render, and forget on each run. For example, when a change is made to a menu, every page that uses it has to be regenerated and uploaded. 

**Developer Experience**—Developers have to familiarize themselves with the file system conventions and directory structure surrounding static site generation. For example, "you have to put your markdown files here and then it turns into this URL structure". Additionally, templating languages that seem to dumb down what you can do, frustrate experienced developers. 


### Could you mention some popular Static Site Generator?

Some popular static site generators include Jekyll (Ruby), Hugo (Go), Hexo (Node.js), GitBook (JS), Octopress (Ruby), Gatsby (ReactJS), Pelican (Python), Brunch (JS), Metalsmith (JS) and Middleman (Ruby). Netlify reports the ten most popular and best-supported static-site generators, based on GitHub’s top starred repositories. 

A comprehensive list of all possible static site generators is maintained by Static Site Generators. Details include when it was created, the last time it was updated and the language it is built with. A similar list is maintained at StaticGen. This list offers additional details like the templating language supported by the project and a description pulled from the project repository.


### What parameters should I consider while choosing a static site generator?

**Build Time**—Time to generate the final site for a given set of input files. On large sites, this can be tens of minutes. Hugo, Gatsby and Nuxt are faster than Jekyll. 

**Templates and Themes**—The availability of templates and themes with a suitable licence and the ease with which new templates or themes can be created. 

**Project Activity and Adoption**—GitHub stars are a reasonable indication of good project activity. A more active project that has greater adoption is more likely to be supported over a longer period of time. 

**Portability**—Are the file structure, content syntax and templating language fairly standard? With standard technologies such as Markdown, content can be more easily ported to another SSG. 

**Plugins**—The plugins you require should work with the SSG. More generally, some SSG provide most features out-of-the-box (Gatsby, Next, Nuxt). Others provide minimal features that are then expanded by a vast array of plugins, often developed by community. Jekyll is in the latter camp with lots of plugins. 

**Deployment**—Support for continuous integration and continuous deployment.


### What kind of sites are most suited for Static Site Generators?

Static site generators are broadly useful for building sites that focus heavily on delivering content, have a low degree of user interactivity and update infrequently. It is suited for mission-critical sites where traffic spikes and security are causes of concern.

Public administrations in the US 18F, in UK Alphagov or in France Etalab seem to embrace this workflow as the version-control-workflow makes sense for distributed teams in addition to avoiding latency, downtime and errors. 


### What kinds of sites are not suited for Static Site Generators?

Static site generators may not be suited for the following: 

    + Sites that are largely customised for each individual user that visits the page, such as e-commerce sites.
    + Sites that need to reflect real-time changes to content or templates.
    + Sites that require an administration interface.
    + Sites which have several content (untrusted) creators. Since static sites are flexible, anything contained within source Markdown files can be rendered as page content. Users may be able to include scripts, widgets or numerous undesired items.
    + Very large sites that could result in increased build times.

### Could you list some popular static site generator deployments?

 

    + Healthcare.gov went from 32 servers to 1 (and one for fall over).
    + In 2012, Obama's $250M fundraising platform was built using a static site generator. The team that built the Hillary Clinton site built the Obama site.
    + Nest and MailChimp now use static site generators for their primary websites.
    + Vox Media has built a whole publishing system around Middleman.
    + Carrot, a large New York agency and part of the Vice empire, builds websites for some of the world’s largest brands with its own open-source generator, Roots.
    + Several of Google’s sites, such as "A Year In Search" and Web Fundamentals, are static.
    + The Smashing Magazine static site was benchmarked at 10 times faster than their earlier WordPress deployment.
    + The New Dynamic Website lists some popular deployments using static site generators.

### How is content edited and managed on static sites?

Most static site generation occurs via the command line. Moving the generated files to the hosting server can also be automated with command line scripts or tools. 

However, browser-based editors have been making their presence felt. While traditional CMS such as Wordpress, Joomla, Magento or Drupal generate pages dynamically, some SSG provide rich UI for editing pages and also host the site. Thus, these are hosted CMS with static content. Static content is updated when edited and saved, and not when a request comes to the server. 

Among the **static CMS** are Prose, Surreal CMS and Forestry.io. Prose.io is a free service designed specifically for editing Jekyll projects stored in GitHub. There are also services like Surreal CMS and Forestry.io. Many more static CMS are listed on GitHub. 

CloudCannon offers a web-based editor geared towards non-technical users. It uses Jekyll and Git workflows. It builds the site, minifies assets and publishes on its hosting. 


### What are the options for hosting static sites?

Broadly, we have two options:

    + **Cloud file storage**: Content is pushed to the cloud for storage. When web requests come in, static files are directly served. Examples include Amazon S3, Google Cloud Storage, Rackspace Cloud, and Microsoft Azure.
    + **Static file hosting providers**: Content can be edited online, which then triggers static generation and update to the hosting. Examples include Netlify, Forge, GitHub, and Surge.sh.

### Can dynamic aspects be added to static sites?

Usually dynamic aspects are added using the <script> tag whose source is a JS file on a different server. The remote data is loaded using Ajax (Asynchronous JavaScript + XML).  

**Comments** : Disqus, Staticman, Livewire and Facebook

**Forms** : Wufoo, Typeform, Google forms, Formspree, FormKeep.

**Events** : Webhooks, moment.js

**Search** : Google, Swiftype, AddSearch, Lunr, Algolia, Aerobatic

**Forums** : Discourse

**Shopping Carts** : Ecwid, Snipcart, GO Commerce

**Assets (CDNs)** : imgix, Cloudinary

**Backend as a Service (BaaS)** : Parse and Kinvey offer APIs for developers to pull arbitrary dynamic data into a static page. 

## Milestones

Aug  
1991

First static website by Tim Berners-Lee becomes publicly accessible. 

Oct  
1995

Vermeer Technologies launches FrontPage 1.0, a static website creation software. Microsoft acquires Vermeer in January 1996. It is branded as part of the Microsoft Office suite from 1997 to 2003. 

Dec  
1997

Macromedia creates Dreamweaver, a static website creation software, which is acquired by Adobe in 2005. 

May  
2000

Dries Buytaert launches Drupal CMS for dynamic websites. 

May  
2003

A joint effort between Matt Mullenweg and Mike Little to create a fork of b2/cafelog results in Wordpress CMS. 

2004

John Gruber creates **Markdown**. Markdown allows content creators to focus on content rather than markup such as HTML. This may be seen as an essential piece towards the birth of static site generators, to convert Markdown to HTML that can rendered on browsers.

Aug  
2005

Joomla CMS is born as a result of a fork of Mambo. 

2008

Tom Preston-Werner, founder and former CEO of GitHub, creates **Jekyll**, a static site generator written in Ruby. 

Aug  
2010

Alexis Métaireau releases first working version of **Pelican**, a static site generator written in Python. 

Apr  
2011

Thomas Reynolds releases first version of **Middleman**, a static site generator written in Ruby. 

2013

Johan Nordberg creates **Wintersmith**, a static site generator written in Node.js. 

2013

Steve Francia creates **Hugo**, a static site generator built on the Go programming language.