Static Site Generators
- Summary
-
Discussion
- What are static sites and how are they created?
- How does a static site generator work?
- What is the JAMstack?
- What are the advantages of using static site generators?
- What are the challenges/limitations in using Static Site Generators?
- Could you mention some popular Static Site Generator?
- What parameters should I consider while choosing a static site generator?
- What kind of sites are most suited for Static Site Generators?
- What kinds of sites are not suited for Static Site Generators?
- Could you list some popular static site generator deployments?
- How is content edited and managed on static sites?
- What are the options for hosting static sites?
- Can dynamic aspects be added to static sites?
- Milestones
- Sample Code
- References
- Further Reading
- Article Stats
- Cite As
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
1995
1997
2003
2010
2011
Sample Code
References
- Angert, Edward. 2019. "How to Choose a Static Site Generator." Docs, Linode, December 3. Accessed 2020-08-01
- Biilmann, Matt. 2015. "Why Static Site Generators Are The Next Big Thing." Smashing Magazine. November 2. Accessed 2018-03-31.
- Buckler, Craig. 2016. "7 Reasons NOT to Use a Static Site Generator." SitePoint. March 16. Accessed 2018-05-09.
- Buckler, Craig. 2016b. "7 Reasons to Use a Static Site Generator." SitePoint, March 15. Accessed 2020-08-01
- Bull, Matthew. 2017. "JAMstack." Blog, LifeinTECH, December 20. Accessed 2020-08-01.
- Buytaert, Dries. 2016. "Drupal: 15 years old and still gaining momentum." January 15. Accessed 2018-03-31
- Camden, Raymond. 2013. "Moving to Static and Keeping Your Toys." Modernweb. December 16. Accessed 2018-03-29.
- Camden, Raymond and Brian Rinaldi. 2017. "Working with Static Sites: Bringing the Power of Simplicity to Modern Sites." O'Reilly. Accessed 2020-08-01.
- Chernev, Kalin. 2017. "Learn Gatsby.js." October 4. Accessed 2020-08-01.
- CloudCannon. 2020. "Editing: A new kind of CMS that puts you in control." Features, CloudCannon. Accessed 2020-08-01
- Diaz, Chris and Robert Browder. 2016. "Static Site Generators: Powerful Publishing with Less Infrastructure." Library Publishing Coalition, June. Accessed 2020-08-01
- Dionne, Mathieu. 2020. "Pick the Best Static Site Generator for your 2020 Projects." Blog, Snipcart, January 30. Accessed 2020-08-01
- Francia, Steve. 2013. "Hugo:A Fast and Flexible Static Site Generator Built In GoLang." July 4. Accessed 2018-03-31.
- Gienow, Michelle. 2017. "Netlify Grows from SSG to CMS — and Launches a Microservices Gateway." The New Stack. September 7. Accessed 2018-05-13.
- Hawksworth, Phil. 2016. "Static Sites go all Hollywood." Front-Trends 2016. July 11. Accessed 2018-03-29.
- Hawksworth, Phil. 2018. "Webserverless." Netlify. April 11. Accessed 2018-05-05.
- Hoffmann, Jay. 2013. "How Dreamweaver Got Its Name." The History of the Web. Accessed 2018-03-31.
- Johnson, Steven. 2014. "History of Joomla." InTownWebDesign. January 13. Accessed 2018-03-31.
- Josh. 2014."Building a Static CMS." Code Journal, Carrot, December 4. Accessed 2020-08-01.
- KeyCDN. 2018. "Static Site Generator." Support, KeyCDN, October 4. Accessed 2020-08-01.
- Levine, Peter. 2017. "Building the next generation web." Andreessen Horowitz. August 9. Accessed 2018-04-02.
- Long, Tony. 2012. "AUG. 7, 1991: LADIES AND GENTLEMEN, THE WORLD WIDE WEB." August 7. Accessed 2018-03-31
- Lupton, Benjamin. 2016. "2017’s Generation of Static Site Generators." Benjamin Lupton’s Blog. September 27. Accessed 2018-05-05.
- MDN. 2017. "Ajax - Web developer guides." MDN Web Docs. Accessed 2018-03-29.
- Macrae, Chris. 2018. "Hugo vs Jekyll: Benchmarked." Blog, Forestry.io, January 26. Accessed 2020-08-01.
- Metaireau, Alexis. 2015. "Some history about Pelican." Accessed 2018-02-05.
- Parr, Bud. 2017. "The JAMStack Landscape." The New Dynamic. October 2. Accessed 2018-04-01.
- Ramos, Marcia. 2016. "SSGs Part 1: Static vs Dynamic Websites." Blog, GitLab, June 3. Accessed 2020-08-01.
- Rinaldi, Brian. 2015. "Static Site Generators." O’Reilly Media, Inc. September 22. Accessed 2018-02-05.
- Rush, Kyle. 2012. "Meet the Obama campaign's $250 million fundraising platform." November 27. Accessed 2018-03-31.
- Schapira, Boris. 2018. "Back to static with JAMStack: a paradigm shift for better UX and web performance." Boris Schapira’s blog. February 22. Accessed 2018-05-05.
- Schultz, Greg. 2012. "Dinosaur Sighting: Microsoft FrontPage for Windows 95." Tech Republic. March 1. Accessed 2018-03-31.
- Showcase. 2018. "The Static Site Showcase." The New Dynamic. Accessed 2018-04-01.
- Sinnott, Ian. 2016. "Building Static Sites with React." March 12. Accessed 2018-03-31
- StaticSiteGenerators. 2018. "The definitive listing of Static Site Generators." Accessed 2018-05-13.
- Stokes, Jon. 2016. "Interview: Talking Middleman V4 and Front-end Dev with Thomas Reynolds." Collective Idea. June 7. Accessed 2018-03-31.
- Taillandier, Frank. 2017. "Interview with Bud Parr, JAMstack engineer, Content Strategist." The New Dynamic. November 27. Accessed 2018-04-02.
- Tobak, Steve. 2015. "Priceless Words From the Founder of WordPress." June 1. Accessed 2018-03-31.
- Vozna, Helen. 2017. "Static Website vs Dynamic Website: Which Is Better for SEO?" Blog, WebCEO, June 26. Updated 2019-04-08. Accessed 2020-08-01
- Williamson, Eli. 2017. "Top Ten Static Site Generators of 2017." Netlify. May 25. Accessed 2018-02-08.
- Wintersmith, jnordberg. 2012. "GitHub: Releases: jnordberg/wintersmith." March 14. Accessed 2018-03-31.
- b-long. 2019. "Awesome Static Hosting and CMS." GitHub, July 24. Accessed 2020-08-01
- del Alba, Lucero. 2016. "A Side-by-Side Comparison of AWS, Google Cloud and Azure." SitePoint, September 13. Accessed 2020-08-01
Further Reading
- Rinaldi, Brian. 2015. "Static Site Generators." O’Reilly Media, Inc. September 22. Accessed 2018-02-05.
- Lieberman, Henry. 2017. "Static and Dynamic Semantics of the Web." Accessed 2018-02-05
- Biilmann, Matt. 2015. "Why Static Site Generators Are The Next Big Thing." Smashing Magazine. November 2. Accessed 2018-02-05.
- Alvarez, Franco. 2017. "Let’s talk about Middleman (Ruby)." {hashdog}. January 9, 2017. Accessed 2018-02-08.
- Daniliants, Artem. 2017. "Going back to static HTML sites." SEMPRO 2017. June 16. Accessed 2018-02-08.
- Rinaldi, Brian. 2017. "Working with Static Sites." O’Reilly Safari. March. Accessed 2018-05-13.
Article Stats
Cite As
See Also
- Markdown
- GitHub Pages
- Asynchronous JavaScript and XML
- Content Management System
- Jekyll
- Hugo