Static Site Generators
Static sites offer several advantages in speed, security and scalability over dynamic sites (Content Management Systems).
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.
- 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.
- 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.
What is the JAMstack?
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?
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.
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?
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.
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?
- 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?
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.
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?
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