Static Site Generators

What are they and why are they transforming web development?

We're excited for a technology that's been getting more and more attention lately; that has been dramatically changing the way some websites are built - I'm talking about static site generators (henceforth referred to as SSG in this article). You may have also heard of them as "JAMStack" sites. While not exactly new, there are a number of specific technologies that have helped to ppopularize it recently: Jekyll, Gatsby, and Hugo to name a few.

What is it

First, a little refresher on what exactly a website is: When you go to an address such as https://www.startpage.com/ you're brought to a server that sends you the page itself. The page consists of HTML which contains the text content, CSS which makes the content look good, and JavaScript (JS) that adds functionality.

This is true regardless of what platform you're on - WordPress, .NET, static sites, Ruby on Rails. There are tons of different ways to dish it up, but the end result is always the same: a set of HTML, CSS, and JS.

So to answer what a static site generator is: It's simply a tool that will automatically put together that HTML, CSS, and JS. Traditional platforms like WordPress must usually build out that whole set using database calls each time the request is made.

Another way to explain would be that SSGs create the pages beforehand, while most servers build them as needed.

Advantages & Disadvantages compared other tech

PROS

SPEED:

Since the pages are all built before they are needed, it makes our website much faster. Actually sending the pages back and forth between the server and your computer is relatively fast.

In fact, we get to completely skip over two potential speed bottlenecks as compared to e.g. WordPress. No server-side language such as php will have to process anything, and no database calls will be made or waited for. We simply send the requested page, nothing more.

This will not, however, make a difference on other aspects of the load time such as downloading images or executing javascript.

SECURITY:

A potential attacker can't break into your database if no database exists. Malicious code can't be executed on your server if there are no languages to run it. With SSGs there will just be less running and therefore less places that could potentially be exploited. Consideration still needs to be given to your output, however.

EASE OF DEVELOPMENT:

SSGs are typically all stored in git, which most developers love. A very common pain point in WordPress is that it's difficult to sync the database between production, staging, and development servers.

Nearly all developers will already be familiar with HTML, CSS, and JS. So for most people, a quick set up over the command line and they'll be able to get right to work on things.

Since information about the page is store in the file with the page itself, it's very straightforward to make out what's going on. Compare for yourself: Need to know which template a page is using in a SSG? It will say so right on the label. Want to know what template a WordPress page is using? You need a flowchart https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png

MAINTENANCE:

These will require much less maintenance than a WordPress site. There are no plugins to keep up to date, no WP core, no PHP security updates. And with that, you don't have to worry that any feature was built with a specific plugin or version will break when those updates are made. I've been encountering this issue more with the recent push of WordPress to the new "Gutenberg".

No website is maintenance free however. You'll need to make sure your domain and SSL stay up to date. If you’re running the web server yourself you will need to update it from time to time. And it's never a bad idea to do an occasional audit for dead links or performance improvements.

CONS

NO SERVER SIDE TOOLS

As mentioned before this aspect does help speed things up overall - but it comes at a cost. Servers can generally do some very useful things, for example process your images automatically when they are uploaded. Many times there are APIs you can use to make up for this, but that adds to the amount of moving parts in your site overall.

LESS MATURE

While the underlying technologies of HTML, CSS, and JS have been around for a long time, the SSG process is still fairly new. There may not be an API for absolutely everything you need just yet.

But the biggest pain point so far is that there is no Content Management System as fleshed out and user friendly as most people find WordPress to be.

When to choose an SSG:

Any time you want a simple website this is the way to go. Blogs, basic informational sites, a gallery of something. If it's just text and images it's a no brainer.

But it doesn't need to be limited to just small or simple websites. The capabilities can be surprisingly advanced, especially when you take APIs into account. I've even heard of good experiences using them for e-commerce, though am yet to try that myself.

When NOT to choose an SSG:

While a surprising number of websites don't really need one at all, if you have complex functionality you may very well need a proper relational database.

In addition, if your site has a very high number of pages (100,000+) build times can be come an issue during local development. I've read that hugo is able to build much faster and may be able to handle it. I've given this a test in jekyll and would definitely reccomend against it as the netlify build would time out while trying to deploy.

Other Considerations

If moving from e.g. WordPress to an SSG or vice versa, the CSS can likely all be saved, as well as most of the HTML. The biggest task would be converting the templating languages from PHP to Liquid.

What are my hosting options?

Some CMS systems such as Cloudcannon have hosting built right in which is feasible to use on a production service. Netlify also offers a great system that I love to use myself. You can also run your own server for as little as 5$/mo on a platform like digital ocean.

Is it easy to hire for?

You may think not since it's a fairly new thing, but it's actually easy to find the skills needed. Anyone who has demonstrated proficiency in HTML, CSS, and JS will most likely be able to pick this up with minimal training.

CMS Options

A developer can easily manage an entire SSG site using just their text editor. But of course, we'll frequently want to give writers and non-technical people the ability to make simple changes to copy and images throughout the site.

By default SSGs do not come with something like this, but the good news is that there are many options that are fairly quick and easy to implement to an existing site.

While none of them are as finely tuned as the WordPress admin (yet) they will give you what you need for the basics of managing your sites content.