At StaticGen321, our open-source directory of static website generators, we’ve kept track of more than a hundred generators for more than a year now, and we’ve seen both the volume and popularity of these projects take off incredibly on GitHub during that time, going from just 50 to more than 100 generators and a total of more than 100,000 stars for static website generator repositories.
Influential design-focused companies such as Nest and MailChimp now use static website generators for their primary websites. Vox Media2 has built a whole publishing system3 around Middleman. Carrot4, 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, Roots5. And several of Google’s properties, such as “A Year In Search6” and Web Fundamentals7, are static.
Static websites are hardly new, going all the way back to the beginning of the web. So, why the sudden explosion in interest? What’s up? Why now?
Further Reading on SmashingMag: Link
- Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo10
- Using A Static Site Generator At Scale: Lessons Learned11
- Build A Blog With Jekyll And GitHub Pages12
- Content Modeling With Jekyll13
When Static Was It Link
The first ever website, Tim Berners-Lee’s original home page for the World Wide Web14, was static. A website back then was a folder of HTML documents that consisted of just 18 tags15. Browsers were simple document navigators that would fetch HTML from a server and allow the end user to navigate them by following hyperlinks. The web was fundamentally static.
As browsers evolved, so did HTML, and gradually the limitations of purely static websites started to show.
Initially, websites were just plain unstyled documents, but soon they grew into carefully designed objects, with graphical headers and complex navigation. By that point, managing each page of a website as its own document stopped making sense, and templating languages entered the picture.
It also quickly became evident that reserving HTML for structure and CSS for style was not enough of an abstraction to keep the content of a website (the stories, products, gallery items, etc.) separate from the design.
Around the same time, SQL-based relational databases started going mainstream, and for many online companies, the database became the almost-holy resting place of all of their content, guarded by vigilant, long-bearded database administrators.
Desktop applications such as Dreamweaver and FrontPage offered solutions for building content-driven websites through WYSIWYG editors, where pages could be separated into reusable parts, such as navigation, headers and footers, and where content to some degree could be put in a database. In some ways, fatally flawed as they were, these were the original static website generators: building websites from templates, partials, media libraries and sometimes even SQL databases, and publishing them via FTP as static files. As late as 2004, I had the unique experience of working on a major content-driven website, with tens of thousands of pages spread across different editorial groups, all managed via Dreamweaver!
Even if Dreamweaver could, to some degree, integrate with a database, it had no content model, offering no sense of content being separate from design, each half being editable independently with the appropriate tools.
The most mainstream answer to these problems was the LAMP stack and CMS’ such as WordPress, Drupal and Joomla. All of these played an incredibly important role in moving the web forward, enabling the Web 2.0 phenomenon, in which user-generated content became a driving factor for a lot of websites. Users went from following hyperlinks to ordering products, participating in communities and creating content.
Dynamic Problems Link
When I built my first dynamic website more than 15 years ago, I was following the original LAMP-stack tutorials from the MySQL documentation. When I realized that all of this stuff was going on every time someone visited a website that was built like this, it blew my mind!
A web server would load my code into a PHP interpreter, on the fly, and then open connections to a database, sending queries back and forth, using the data in templates and stitching together strings of text into an HTML document, tailor-made for the visitor at that moment. Amazing!
It was, admittedly, a bit less amazing when I visited the website a few years later and found the whole web page replaced with a message from a hacker who pointed out the security flaws in the configuration and was at least generous enough just to deface the website, rather than use it as a vehicle to spread malware.
This dynamic website architecture moved the web forward, but it also opened a can of worms. By a conservative estimate, more than 70% of today’s WordPress installations are vulnerable to known exploits (and WordPress powers more than 23% of the web). Just a few months ago,
1.2 million Drupal installations got infected with malware in the span of a few days 12 million Drupal sites needed emergency patching16, and any not patched within 7 hours of the exploits’ announcement should be considered infected with malware.. Not a week goes by when I don’t follow a link from social media to a website that shows a “Database connection error.” Scaling a dynamic website can be very expensive, and agencies that launch a campaign website or the like often have to overprovision drastically in order to guard against the website blowing up if it manages to go viral — or else they have to desperately scale it while trying to get it back online (something that never seems to happen during office hours).
We pay a huge price for the underlying complexity of dynamic code running on a server for every request — a price we could avoid paying entirely when this kind of complexity is not needed.
Dynamic Websites And Caching Link
To some degree, we tend to work around this by caching. No high-profile WordPress website would be capable of running without a plugin such as WP Super Cache. Large websites no doubt rely on proxy caches such as Varnish, Nginx and Apache Traffic Server in front of their websites.
Caching is notoriously difficult to get right, however, and even the most optimized dynamic website will normally be many times slower than a static solution.
This website, Smashing Magazine, is obviously run by one of the most performance-focused teams out there and is, in general, very heavily optimized for performance. So, I ran a small experiment for this article. Using HTTrack17, I grabbed a copy of this website one level deep and then deployed the static version to Netlify18, a static-hosting platform based on a content delivery network (CDN). I didn’t do anything to improve performance of the static version apart from simply deploying to a host with deep CDN integration.
Even with a highly optimized dynamic website, the static version is more than six times as fast on average! Granted, not every static host will make this kind of difference, but leveraging this level of CDN-based caching simply wouldn’t be possible without any manual configuration of a dynamic website, at least not without introducing really weird caching artifacts.
Caching and, more specifically, cache invalidation is extremely hard to get right with a dynamic website, especially the kind of distributed caching required to take full advantage of a CDN. With a WordPress website, there’s no guarantee that the same URL won’t return different HTML depending on whether the user is logged in, query parameters, ongoing A/B tests and so on. Keeping track of when a page needs to be invalidated in the cache is a complex task: Any change to a comment, global website setting, tag, category or other content in the database could lead to changes in the lists of related posts, index pages, archive, comment counters, etc.
Static websites are fundamentally different in this regard. They stick to a really simple caching contract: Any URL will return the same HTML to any visitor until the specific file that corresponds with that URL is explicitly updated.
Working with this caching contract does impose constraints during development, but if a website can be built under these constraint, then the difference in performance, uptime and cost can be enormous.
The Modern Static Website Generator Link
In recent years, this alternative to the traditional dynamic infrastructure has gained ground. The idea of a static website generator is nothing new. Even WordPress’ largest competitor back in the day, Movable Type, had the option of working as a static website generator.
Since then, a lot of the constraints that made static websites lose out have fallen away, and today’s generators are modern, competitive publishing engines with a strong appeal to front-end developers.
More static website generators are released every week, and keeping up with developments can be hard. In general, though, the most popular static generators share the following traits.
Allowing a website to be split into layouts and includes to get rid of repetition is one of the basics of static website generators. There are myriad of template engines to chose from, each with its own tradeoffs — some being logic-less, some inviting a mixture of template and code, all allowing you to get rid of duplicate headers, footers and navigations.
Markdown Support Link
The rise of Markdown is likely one of the primary reasons why static website generators have become so popular. Few people would dream of writing all of their content in BBCode26 or pure HTML, whereas Markdown is very pleasant to work with, and Markdown editors for serious writing, note-taking and blogging seem to be exploding in popularity.
All of the major static generators support Markdown. Some swear by reStructuredText27 or an alternative markup format. In general, they all allow content developers to work by writing plain-text documents in a structured format.
This approach keep content and design separate, while keeping all files as plain text. As developers, we’ve grown accustomed to an amazing suite of tools for working with plain text, so this is a huge step up from having all content dumped into a database as binary blobs.
Meta Data Link
Content rarely stands completely on its own. Readers will often want to know the author of a blog post, the date of the post, the categories it belongs to and so on.
- 1 https://www.staticgen.com
- 2 http://www.voxmedia.com/
- 3 http://product.voxmedia.com/2015/7/8/8907841/introducing-autotune
- 4 http://carrot.is
- 5 http://roots.cx/
- 6 https://www.google.com/trends/2014/
- 7 https://developers.google.com/web/fundamentals/
- 8 https://www.smashingmagazine.com/wp-content/uploads/2015/10/01-staticgen-stats-opt-preview.png
- 9 https://www.smashingmagazine.com/wp-content/uploads/2015/10/01-staticgen-stats-opt.png
- 10 https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/
- 11 https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/
- 12 https://www.smashingmagazine.com/2014/08/build-blog-jekyll-github-pages/
- 13 https://www.smashingmagazine.com/2016/02/content-modeling-with-jekyll/
- 14 http://info.cern.ch/hypertext/WWW/TheProject.html
- 15 http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
- 16 https://nakedsecurity.sophos.com/2014/10/30/millions-of-drupal-websites-at-risk-from-failure-to-patch/
- 17 https://www.httrack.com/
- 18 https://www.netlify.com/
- 19 https://performance.sucuri.net/domain/www.smashingmagazine.com
- 20 https://www.smashingmagazine.com/wp-content/uploads/2015/10/02-smashing-dynamic-load-times-opt.png
- 21 https://performance.sucuri.net/
- 22 https://performance.sucuri.net/domain/smashing-static.netlify.com
- 23 https://www.smashingmagazine.com/wp-content/uploads/2015/10/03-smashing-static-load-times-opt.png
- 24 https://www.smashingmagazine.com/wp-content/uploads/2015/10/04-static-site-generator-trends-opt-preview.png
- 25 https://www.smashingmagazine.com/wp-content/uploads/2015/10/04-static-site-generator-trends-opt.png
- 26 http://en.wikipedia.org/wiki/BBCode
- 27 http://docutils.sourceforge.net/rst.html
- 28 http://jekyllrb.com/
- 29 http://jekyllrb.com/
- 30 http://jekyllrb.com/
- 31 http://product.voxmedia.com/2014/7/29/5863004/take-a-peek-at-the-code-that-powered-the-verge-50
- 32 https://www.staticgen.com
- 33 http://carrot.is/coding/static_cms
- 34 https://www.contentful.com/
- 35 https://prismic.io/
- 36 https://gathercontent.com/
- 37 http://prose.io/
- 38 http://prose.io/
- 39 http://prose.io/
- 40 https://github.com/netlify/netlify-cms