A (Brief) Introduction to Static Site Generators
The new technologies that are powering a broader, industry-wide return to HTML-based websites.
It’s funny how so many things often come around full-circle — especially in such a rapidly-evolving field like web development.
As a case in point: Back in the day, virtually all websites on the internet were static. This means that they were written entirely in HTML and CSS, served “as is” to site visitors.
By contrast, dynamic websites — a more recent development — use server-side technologies like PHP to build web pages on the fly as new users visit the site.
The rise of PHP-based content management systems (CMS) like WordPress and Drupal led to a massive uptick in the number of dynamic websites. It also made web development much more accessible to those with limited experience.
Fast-forward to the present day, and CMS-driven websites now dominate the web. The most popular CMS, WordPress, is used by 32% of all websites on the internet and nearly 60% of all websites using CMS.
But over the past few years, an interesting new development has been taking place.
Developers have increasingly begun eschewing these CMS in favor of (once again) static websites — which can now be developed much more quickly using powerful new technologies called static site generators.
What’s more: The relatively-new and popular JAMStack framework — which extends the functionality of static websites with third-party APIs and client-side JavaScript — has paved the way for modern, powerful static websites that far outperform their early Web 1.0 predecessors.
Now, I’ve already touched briefly on static site generators in a previous blog post, “What (the Hell) Is JAMstack?” And I suggest you read it if you’re looking for an overview of static websites and the benefits of using them.
But in this post, I’d like to give a more in-depth look at some of the various static site generators out there — including Jekyll, Gatsby, and others — to understand their use cases, differences, and how they might be able to better serve you in your next web development project.
What Is a Static Site Generator?
Simply put: A static site generator is a tool that takes in source files and spits out an entirely static website.
These static site generators work by taking your content, — typically stored in flat files like Markdown — applying it against layouts and/or templates, and then generating HTML files that can be delivered to users.
Often this is accomplished through the use of a content delivery, or distribution, network (or CDN) like Cloudflare, which can drastically reduce the loading times of your already quick-loading static pages.
There are multiple options to choose from when selecting a static site generator for your next project. Below I’ve provided a brief overview of the five most popular generators on StaticGen.com:
Jekyll
By far the most popular static site generator on the market, Jekyll is built in Ruby and features tight integration with GitHub Pages — which allows for free hosting!
This makes Jekyll an extremely popular solution for personal projects, blogs, and documentation. However, it’s also worth noting that Jekyll is perfectly suitable for large-scale websites and applications, as well, having powered both Barack Obama’s former campaign website and HealthCare.gov.
It also features an extremely large user base and a directory of plug-ins.
Jekyll comes pre-loaded with Sass, a popular CSS preprocessor. It also features Liquid, a Ruby-based templating language created by Shopify in 2006. (However, Textile is also supported through an official plug-in.)
Get started with Jekyll at www.jekyllrb.com.
Next.js
Created and maintained by Zeit, the software company also responsible for the popular Now serverless deployment platform, Next.js is an open-source framework for developing static and server-rendered React applications.
In this, Next.js can serve as a useful starting point for those looking for a way to get their feet wet with the React framework.
Here are some notable features of Next.js, according to its website:
- Server-rendered by default
- Automatic code splitting for faster page loads
- Simple client-side routing (page based)
- Webpack-based dev environment which supports Hot Module Replacement (HMR)
- Able to implement with Express or any other Node.js HTTP server
- Customizable with your own Babel and Webpack configurations
And the recent release of Next.js 7 in Sept. 2018 features several additional benefits, including static CDN support and an upgraded compilation pipeline featuring Webpack 4 and Babel 7.
Get started with Next at nextjs.org.
Hugo
Hugo is a very popular static site generator written in Go (or Golang), Google’s own C-based programming language.
Though it originally began as a side project by Steve Francia at Google, Hugo has quickly grown into one of the most well-known and loved static site generators on the market, featuring more than 165 contributors and thousands of users.
For many, like Peter Chuang at Novelist.xyz, Hugo represents a notable improvement over similar options like Jekyll both in terms of speed and core features.
According to its website, Hugo is able to build an average website in less than a second (and a page in less than one millisecond). Moreover, additional plug-ins are not required for basic functionalities like pagination and redirection, both of which come prepackaged with Hugo.
Get started with Hugo at gohugo.io.
Gatsby
In the neighborhood of static site generators, Gatsby is the popular “new kid on the block,” a status that is largely due (I assume) to the recent and growing popularity of its underlying technology: React.
Gatsby is a React and GraphQL based static site generator which bundles together webpack, react-router, and various other front-end tools into a powerful framework for creating lightning-fast static websites.
What makes Gatsby special, however, aside from React, is its use of GraphQL to build its data layer.
In simplest terms, this means that Gatsby will collect your data from wherever it may exist — Markdown, CMS, databases, JSON, third-party APIs, etc. — and incorporate all of it into an internal GraphQL server at build time.
This data then exist in the browser to be used by the site’s React components as needed.
As Gatsby suggests, this solutions works great for the complex and nested data dependencies of modern web applications.
Similar to Next.js, Gatsby can serve as a great point of entry for those who’d like to learn React (or GraphQL for that matter) in a relatively simple environment. Gatsby features fantastic documentation and examples that’ll definitely help easing the learning curve.
Get started with Gatsby at gatsbyjs.org.
Hexo
Though not quite as popular as the other generators listed on this list, Hexo still enjoys strong community support with more than 24 thousand stars on GitHub.
(It’s worth mentioning, however, that a large portion of Hexo’s user base is Chinese. So unless you happen to be bilingual, many helpful resources, documentation, and discussions might not be of much use to you.)
It is based on the popular Node.js platform and can be quickly installed on your machine with a simple npm install. And while it doesn’t come pre-packaged with an asset pipeline like ES6, it can easily be integrated with either Gulp or Grunt as part of a full-on build workflow.
Unlike the other static site generators mentioned, however, Hexo was intended primarily as a blogging platform. And while it’s simple enough to quickly create a live blog using Hexo, you might want to look to one of the other tools on this list if you’re interested in doing anything more complex.
Get started with Hexo at hexo.io.
Static site generators (and the rise of modern static websites, more generally) represent an exciting new trend in web development, allowing for the rapid production of powerful, blazing-fast websites the likes of which we haven’t seen in quite some time.
In this post, I’ve given you an overview of five of the most popular static site generators in the market. And hopefully you’ve found one (or several) that has piqued your interest.
If so, I’d love to hear from you. Have you ever used a static site generator? Which one, and what was your experience? Are there any that you’re looking to try in the near future?
Let me know in the comments section below!
