What Are Static Site Generators?

Convenient and simple to use, CMSs enable non-technical users to manage their own content on the web and take control of a site’s design and display.

However, over time, CMSs have gained as much notoriety for their limitations as they have praise for their advantages – they can be slow and cumbersome to work with, and struggle with scalability and security. And this has set the stage for the return of static site generators as an answer to all of these problems and more besides.

Static site generators have grown greatly in popularity in recent years, due to their simplicity, security benefits, and ability to quickly serve content. But what are they, how do they influence the web development process, and when should you consider using one?

First – What Is a Static Site?

Websites can be generally divided into two categories – static and dynamic. A static website is much like it sounds – static, fixed, constant. That is to say that it is designed, stored on a server, and delivered to the user’s web browser as-is. It doesn’t change between the point when the developer hits the “save” button, and when the end user clicks on it. Developers create the content using HTML, format it with CSS, and upload the static page to a server where it remains unchanged and ready to be accessed by a browser request.

Dynamic websites, on the other hand, are in an almost constant state of change, and typically powered by a CMS. The CMS quite literally builds each page on-demand each time a user clicks on it. Developers create content that’s stored in a back-end database. When a user requests a URL, the CMS-driven website fetches the appropriate content from the database, loads an HTML template, renders the content within the template, and returns a formatted HTML page to the visitor’s browser – a process known as server-side processing.

Problems with CMS-Powered Websites

Unfortunately, content management systems raise a set of issues that web developers must constantly contend with. For starters, as they’ve grown in popularity, they’ve become targets for cyberattacks. CMS software and plugins are vulnerable to a huge range of known security exploits. WP WhiteSecurity detects, for instance, 2,407 WordPress core, plugin and theme vulnerabilities that users must constantly contend with – and the number is growing all the time. ITPRO reports that 90% of hacked CMS sites in 2018 were powered by WordPress, though sites powered by other CMS systems – including Drupal and Joomla – are also fraught with vulnerabilities.

And it’s not just security that’s an issue. Performance can also suffer with CMS sites due the fact that the server is doing more work. Each page needs to be assembled from templates and content each and every time a request is sent. This is a very slow way of doing things. For each user who visits the site, the PHP code running on the server needs to start up, communicate with a database, construct a HTTP response based on the data recovered, pass it back to the web server, which then returns a HTML file to the user’s browser to interpret the content for display.

All these steps increase the time it takes for a web page to load – and for many sites, they are completely unnecessary, adding nothing but complexity, performance problems, and security issues.

Thankfully, there’s another way.

Static Site Generators

A static site generator is essentially a set of tools for building static websites based on a set of input files. They are publishing tools, not unlike things like Adobe Acrobat, which takes an editable format such as a Microsoft Word file and converts it into a format that’s easy to consume, such as .PDF. With SSGs, developers create a static site that consists mainly of a series of HTML pages which are deployed to a HTTP server. In this sense, there are only files and folders, meaning no database, and no server-side rendering. When setting up a server, developers take the static site created by the static site generator and deploy it to the server. When a user requests a page, the server simply finds the matching file and sends it back to the user.

This differs hugely from a typical WordPress site, which has to conduct numerous database queries to render a page for every single user. This is made worse if WordPress plugins are in use, as each plugin will also need to access data from the database – and even more time to process it all. With static site generators, on the other hand, speed and performance is greatly improved because all the web server needs to do is return a file – not construct a page to be displayed for every HTTP request sent by each client. In short, the same content doesn’t need to be constructed again and again.

Heightened Security

Besides speed and performance, static site generators also solve the security problems that plague CMS-powered sites. Since static websites are comprised of solely static files, they have no database – and since there’s no database, there’s no way for attackers perform standard hacking attacks like scripting, SQL database injections, or take advantage of server-side database security holes.

In addition, platforms like WordPress, which are used by millions of people all over the globe, have naturally become common targets for malicious attackers. There are literally hundreds of tools that a cybercriminal can easily download and run which attempt to compromise existing WordPress, Drupal and Joomla sites automatically – simply by working through all known vulnerabilities against each CMS system (and its plugins), looking for security holes. As such, site administrators need to keep patching their systems with security updates, constantly playing cat and mouse to ensure they won’t be abused by hackers.

Static sites, by contrast, are practically impossible to hack. There is no code running – when a user requests a page, the server just sends a file for that page – so there are no vulnerabilities to exploit.

Improved Costs and Reliability

Another benefit of using a static site generator is improved reliability. Because there’s no database, the dreaded “Failed to establish a database connection” error message won’t ever appear. Using a CMS, problems frequently arise from traffic surges, which cause the database to crash or restrict active connections. With SSGs, however, the server just has to host and return flat HTML files, meaning there is less chance for anything to break along the way.

Then there’s the cost benefit of SSGs. Running a static site is inexpensive. Again, there’s no database, and much less in the way of ongoing support and maintenance costs, as less time needs to be spent updating the system and its plugins, applying patches, and performing backups.

Version Control

All the source code for a static site can live in a version control system such as Git. With Git, it’s possible to go back to any single version of the site in its entire history. This means that old files are retained, and any changes or errors made can be undone or rectified quickly. CMS databases, on the other hand, are extremely volatile. Any user with the right permissions can go in and add, change, or permanently delete content on a whim. True, you can (and should) backup databases, but even if this is done regularly, it’s likely that some data will be lost should anyone make an error, or an attacker finds his/her way in.

A version control system serves as a highly-reliable offsite backup. It’s always possible to go back to a previous version of the site with a few keystrokes, as all the files needed are in the version control system’s repository.

When Should You Use A Static Site Generator?

The benefits of using static site generators are clear, and many companies around the globe are opting for static sites as they are fast, scalable and secure by design. Speed and security are indeed hugely important in today’s online world, where customer experience counts more than ever.

Ecommerce customers in particular respond to site speed – if the product page they’re trying to view doesn’t load quickly on one site, there are plenty of competitors out there from which to purchase their desired items. Research has shown that 40% of consumers will abandon a website if it takes more than three seconds to load – and this means that all companies that want to sell online (or even just hold a potential customer’s attention) need to make their websites fast. And of course, wherever money and sensitive customer data is changing hands over the web, security is of crucial importance.

As we’ve seen, static sites offer high speed and high security – but are they suitable for something like an ecommerce site? After all, online stores do need a certain level of dynamism to account for changes in product availability and prices. But that’s usually all. Product titles and descriptions won’t change that often, and images likely never change at all. All of this data can remain static – and dynamic features can be added to static sites through JavaScript and APIs. And this, indeed, highlights a further benefit of static sites – flexibility.

What we’re talking about here is something called JAMstack, which is a modern web development architecture based on client-side JavaScript, APIs and Markup (JAM).

Using a JAMstack, fast, reliable, and secure ecommerce sites can be built that incorporate both static and dynamic content. Product images, videos and descriptions, for example, can be imported as static data during the site build, whereas things like inventory levels, prices, and shopping cart can be fetched in real-time on the client-side.

This first requires the selection of the most appropriate static site generator based on the project’s needs (how many product pages, for example) and developer requirements. There are plenty of static site generators to choose from, and indeed there’s an SSG for most programming languages – for JavaScript there’s Next and Gatsby, for Go there’s Hugo and InkPaper, and for Ruby there’s Jekyll and Middleman, to give you just a scant handful of examples.

Next, you’ll need to select a “ headless CMS” – also known as a “JAMstack CMS”. These use a CMS interface to handle content administration, but also allow other systems to access the data via a REST API, and can thereby deliver dynamic content where it’s needed.

Finally, you’ll need to add a Commerce Layer to the mix, which allows you to seamlessly integrate prices, inventory, checkout and customer accounts through the API.

Now you have an ecommerce JAMStack ready to be built and deployed.

Static Sites Are on the Rise

Indeed, they are – and not just for ecommerce. Smashing Magazine, for example, moved its website from WordPress (which was already highly optimized) to a static site generator and got 10X faster.

(Video source: youtube.com)

Interest in static site generators is growing fast. Netlify – a San Francisco-based cloud computing company that offers hosting and serverless backend services for static websites – reports each year on the current state of the SSG landscape with a post about the most popular ten solutions. As you can see from the graph below – based on data collected from GitHub activity (how many GitHub stars each SSG accrues) – the category has been gaining momentum in recent years as static sites gain popularity.

A big part of the recent surge in the popularity of SSGs is that these technologies are much more friendly for developers to work with – and CMSs are quickly falling out of favour. According to Stack Overflow’s 2019 Developer Survey results, WordPress is the most dreaded development platform (59.5%) to work with, and Drupal the most dreaded web framework (69.9%).

The fact of the matter is that it’s far easier to create a brand new site from scratch with an SSG than it is with a CMS like WordPress. SSGs have more flexibility, product development has better workflow, and developers can use the tools they like. Combined with the improved speed, security and performance of static sites, this all contributes to the rising popularity of SSGs.

When Using Static Site Generators Is Not the Best Option

As a solution that allows companies to get a highly-secure, speedy, scalable and flexible website up and running fast, it’s no wonder that static site generators are enjoying such a surge in popularity right now.

But though they do indeed offer the benefits of both the CMS and static site worlds, they are not necessarily suitable for every project, and there are a number of things you should consider in this respect.

For starters, static site generators may seem complicated for non-programmers, and it’s true that you won’t get very far using an SSG without some development expertise on board. And here’s another sticking point – the static site generator community is still relatively new and therefore small when compared to, say, the truck loads of WordPress support that’s out there.

What’s more, with popular CMS systems like WordPress, even non-technical users can manage and edit their site with relative ease – there are tons of ready-made WordPress themes available for building sites right out of the box, and even more plugins that enable simple customisation. By contrast, when running with a static site generator, non-tech people will likely require some help with the setup, and ongoing support from there.

Large sites with hundreds or thousands of pages may also be difficult to manage with a static site generator. Though possible, if, for example, you have multiple authors in multiple locations all contributing multiple articles or blog posts regularly, content editing and publishing becomes a lot trickier and more time-consuming with a static site generator. Real-time updates can be delayed, and build times can increase rapidly.

And if you need a fully-dynamic website where the content of certain pages (such as user admin panels) cannot be known and generated upfront, static site generators are probably not the best option.

Final Thoughts

For sites that do not require the functionality of a dynamic website, static site generators provide a whole host of benefits. Most websites rarely exceed a few dozen pages, and even the ones that do require infrequent updates. As such, a CMS is often overkill, impacting site performance, exposing the site to security risks, and increasing costs.

With static site generators, there are fewer moving parts, which greatly enhances speed and performance. They are also highly secure, highly reliable, are getting more and more feature-rich and powerful all the time, require minimal maintenance effort, and cost less money to operate. For these reasons, going forward, we should expect to see further growth in SSG usage, as well as improvements from providers that make them easy to use for non-technical users.