• Popular Static Site Generators. Created by Arjun. Source: Devopedia.
    image
  • Static Site Generators. Source: https://www.keycdn.com/support/static-site-generator/
    image
  • A simple illustration of what a static site generator does. Source: https://www.safaribooksonline.com/library/view/working-with-static/9781491960936/ch01.html
    image
  • The JAM stack. Source: https://www.lifeintech.com/2017/12/20/JAMstack/
    image
  • Comparing Static vs Dynamic Websites. Source: https://about.gitlab.com/2016/06/03/ssg-overview-gitlab-pages-part-1-dynamic-x-static/
    image
  • Static CMS workflow of Netlify. Source: https://carrot.is/coding/static_cms.html
    image
  • The build time from Hugo significantly less than than from Jekyll. Source: https://forestry.io/blog/hugo-vs-jekyll-benchmark/
    image
  • Raising $250+ Million from the Obama campaign site. Source: fundraisinggenius.co
    image
  • Gatsby.js offers multiple options to read data and deploy the site. Source: https://kalinchernev.github.io/learn-gatsbyjs/
    image
  • Dynamic aspects that can be part of a generated static site. Source: https://youtu.be/qp9djnSgkps?t=12m16s
    image

Static Site Generators

Improve this article. Show messages.

Summary

image
Popular Static Site Generators. Created by Arjun. Source: Devopedia.

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).

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.

Discussion

  • What are static sites and how are they created?
    image
    Static Site Generators. Source: https://www.keycdn.com/support/static-site-generator/

    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?
    image
    A simple illustration of what a static site generator does. Source: https://www.safaribooksonline.com/library/view/working-with-static/9781491960936/ch01.html

    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?
    image
    The JAM stack. Source: https://www.lifeintech.com/2017/12/20/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?
    image
    Comparing Static vs Dynamic Websites. Source: https://about.gitlab.com/2016/06/03/ssg-overview-gitlab-pages-part-1-dynamic-x-static/

    Performance—Since there is no server side processing/compute involved and no database connections to be made, the number of performance bottlenecks is reduced.

    Resilience—A static site is more resilient to sudden traffic spikes. For high-availability websites, single points of failures are reduced.

    Security—When compared to dynamic content management systems (CMS), static pages are easier to secure. One does not have to deal with server-side language exploits and database vulnerabilities. There are fewer attack vectors for people trying to disrupt that site.

    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 do not affect the generated static pages.

    Portability—Since the site is not coupled to a complex hosting infrastucture, 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 do not demand sustained monitoring, catching up on missing dependencies and patching the infrastructure behind the scenes.

    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?
    image
    Static CMS workflow of Netlify. Source: https://carrot.is/coding/static_cms.html

    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—Realtime 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.

  • What are the options while considering a 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 are the parameters to keep in mind while choosing a static site generator?
    image
    The build time from Hugo significantly less than than from Jekyll. Source: https://forestry.io/blog/hugo-vs-jekyll-benchmark/

    Build Time—The amount of time that the static site generator takes to generate the final site for a given set of input files. This is important for larger sites as build times can take up to tens of minutes. Hugo and Gatsby are gaining in popularity quite fast due to this aspect.

    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? Standard technologies enable users to switch from one static site generator to another without much hassle.

    Plugins—Will the static site generator be able to work with the plugins that you require?

    Deployment—The choice of static site generator could affect the process by which continuous integration and continuous deployment are achieved.

  • 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 ecommerce 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.
  • List some popular static site generator deployments?
    image
    Raising $250+ Million from the Obama campaign site. Source: fundraisinggenius.co
    • 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.
  • What are the options for hosting static sites?
    image
    Gatsby.js offers multiple options to read data and deploy the site. Source: https://kalinchernev.github.io/learn-gatsbyjs/

    Cloud file storage—Amazon S3, Google Cloud Storage, Rackspace Cloud, Microsoft Azure.

    Static file hosting providers—Netlify, Forge, GitHub, Surge.sh.

  • How is content edited and managed?

    Most static site generation occurs via the command line. However, browser-based editors have been making their presence felt. 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. CloudCannon offers an web-based editor geared towards non-technical users.

  • Can dynamic aspects be added to static sites?
    image
    Dynamic aspects that can be part of a generated static site. Source: https://youtu.be/qp9djnSgkps?t=12m16s

    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 arbitary dynamic data into a static page.

Sample Code

  • title: Title of the document
    categories:
    - Category A
    - Category B
    ---
    # Actual content
     
    This is the document

References

  1. Biilmann, Matt. 2015. "Why Static Site Generators Are The Next Big Thing." Smashing Magazine. November 2. Accessed 2018-03-31.
  2. Buckler, Craig. 2016. "7 Reasons NOT to Use a Static Site Generator." SitePoint. March 16. Accessed 2018-05-09.
  3. Buytaert, Dries. 2016. "Drupal: 15 years old and still gaining momentum." January 15. Accessed 2018-03-31
  4. Camden, Raymond. 2013. "Moving to Static and Keeping Your Toys." Modernweb. December 16. Accessed 2018-03-29.
  5. Francia, Steve. 2013. "Hugo:A Fast and Flexible Static Site Generator Built In GoLang." July 4. Accessed 2018-03-31.
  6. Gienow, Michelle. 2017. "Netlify Grows from SSG to CMS — and Launches a Microservices Gateway." The New Stack. September 7. Accessed 2018-05-13.
  7. Hawksworth, Phil. 2016. "Static Sites go all Hollywood." Front-Trends 2016. July 11. Accessed 2018-03-29.
  8. Hawksworth, Phil. 2018. "Webserverless." Netlify. April 11. Accessed 2018-05-05.
  9. Hoffmann, Jay. 2013. "How Dreamweaver Got Its Name." The History of the Web. Accessed 2018-03-31.
  10. Johnson, Steven. 2014. "History of Joomla." InTownWebDesign. January 13. Accessed 2018-03-31.
  11. Levine, Peter. 2017. "Building the next generation web." Andreessen Horowitz. August 9. Accessed 2018-04-02.
  12. Long, Tony. 2012. "AUG. 7, 1991: LADIES AND GENTLEMEN, THE WORLD WIDE WEB." August 7. Accessed 2018-03-31
  13. Lupton, Benjamin. 2016. "2017’s Generation of Static Site Generators." Benjamin Lupton’s Blog. September 27. Accessed 2018-05-05.
  14. MDN. 2017. "Ajax - Web developer guides." MDN Web Docs. Accessed 2018-03-29.
  15. Metaireau, Alexis. 2015. "Some history about Pelican." Accessed 2018-02-05.
  16. Parr, Bud. 2017. "The JAMStack Landscape." The New Dynamic. October 2. Accessed 2018-04-01.
  17. Rinaldi, Brian. 2015. "Static Site Generators." O’Reilly Media, Inc. September 22. Accessed 2018-02-05.
  18. Rush, Kyle. 2012. "Meet the Obama campaign's $250 million fundraising platform." November 27. Accessed 2018-03-31.
  19. 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.
  20. Schultz, Greg. 2012. "Dinosaur Sighting: Microsoft FrontPage for Windows 95." Tech Republic. March 1. Accessed 2018-03-31.
  21. Showcase. 2018. "The Static Site Showcase." The New Dynamic. Accessed 2018-04-01.
  22. Sinnott, Ian. 2016. "Building Static Sites with React." March 12. Accessed 2018-03-31
  23. StaticSiteGenerators. 2018. "The definitive listing of Static Site Generators." Accessed 2018-05-13.
  24. Stokes, Jon. 2016. "Interview: Talking Middleman V4 and Front-end Dev with Thomas Reynolds." Collective Idea. June 7. Accessed 2018-03-31.
  25. Taillandier, Frank. 2017. "Interview with Bud Parr, JAMstack engineer, Content Strategist." The New Dynamic. November 27. Accessed 2018-04-02.
  26. Tobak, Steve. 2015. "Priceless Words From the Founder of WordPress." June 1. Accessed 2018-03-31.
  27. Williamson, Eli. 2017. "Top Ten Static Site Generators of 2017." Netlify. May 25. Accessed 2018-02-08.
  28. Wintersmith, jnordberg. 2012. "GitHub: Releases: jnordberg/wintersmith." March 14. Accessed 2018-03-31.

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.

Tags

See Also

  • Markdown
  • GitHub Pages
  • Ajax
  • Content Management Systems
  • Jekyll
  • Hugo

Further Reading

  1. Rinaldi, Brian. 2015. "Static Site Generators." O’Reilly Media, Inc. September 22. Accessed 2018-02-05.
  2. Lieberman, Henry. 2017. "Static and Dynamic Semantics of the Web." Accessed 2018-02-05
  3. Biilmann, Matt. 2015. "Why Static Site Generators Are The Next Big Thing." Smashing Magazine. November 2. Accessed 2018-02-05.
  4. A, Franco. 2017. "Let’s talk about Middleman (Ruby)." {hashdog}. January 9, 2017. Accessed 2018-02-08.
  5. Daniliants, Artem. 2017. "Going back to static HTML sites." SEMPRO 2017. June 16. Accessed 2018-02-08.
  6. Rinaldi, Brian. 2017. "Working with Static Sites." O’Reilly Safari. March. Accessed 2018-05-13.

Top Contributors

Last update: 2018-05-14 12:41:10 by arvindpdmn
Creation: 2018-05-09 15:33:55 by arjun

Article Stats

1959
Words
2
Chats
2
Authors
13
Edits
0
Likes
407
Hits

Cite As

Devopedia. 2018. "Static Site Generators ." Version 13, May 14. Accessed 2018-05-24. https://devopedia.org/static-site-generators
BETA V0.15