Static Sites 101

What is a static site?

We can begin to understand static sites by looking towards the origins of the web. The very first websites were static sites - sites which are stored on a server in their entirety, ready to be presented directly to the user.

In contrast to static sites, ‘dynamic’ websites are built ‘on the fly’ by the server each time a user visits a page. Dynamic websites are typically slower, less reliable, and less secure than static sites. This is in part because a typical dynamic website has multiple dependencies (such as databases and plugins). Dynamic websites initially gained popularity as they enabled customized user experiences, something which static websites at the time could not do.

Unlike their predecessors, modern day static websites are not limited to static content. The rise of REST APIs as well as Javascript’s Fetch API (& AJAX) made customized content and client-side interaction possible. In this system, dynamic content is neither generated alongside the static HTML (during the ‘build’ phase of a static website) nor generated by the server (as in the ‘dynamic’ system), but rather lives behind an API (or micro service) which is called once the page is displayed. This strategy moves the request for dynamic content to the browser, thereby increasing security and reliability. In effect, there is now very little that a dynamic website can do that a static website cannot.

Why use a static site?

Static sites offer several benefits for users, clients, and developers. Users will enjoy the speed and reliability of static sites. Clients appreciate the low cost of hosting and ease of updating when paired with an easy to use CMS. Static sites can offer a great development experience when paired with static site generators.

Static site generators allow developers to define templates which determine what each page will look like. When the developer ‘builds’ the website, the generator will pull content from a datasource - such as markdown, a CMS, or even a database - and populate the templates with said content. This build process provides us with complete files which are ready to be stored on the server.

Here are a few reasons to consider building a static site:

1. 🔒 Security - Static sites are super secure! Static sites are already ‘built’ when they are loaded on the server, so the server has no need to reach for external dependencies (thus avoiding exposing the app to risks such as database exploits or scripting attacks). Because the browser interprets the html, css & js (rather than the server as in dynamic websites) the site is much more secure. Even if someone does gain access to the files on the server, there won’t be any sensitive information at risk.
2. 🚀 Speed - Static sites are very lightweight, as they are composed simply of HTML, CSS, and a little JS. Because the site is built before it is published, there is very little overhead, and we even have the opportunity to optimize our files (minify, remove unused CSS etc) before we send them out into the world.
3. 📏 Scalability - A server can handle a TON of traffic if it is only serving static sites. There is no need to worry about what happens if your website sees a sudden spike in traffic.
4. 📕 Version Control - all source code and data can live in a version control system like git.
5. 💯 Simplicity - Having no backend (databases, APIs etc.) to worry about removes a chunkly layer of complexity. On the frontend, HTML, CSS and JS is about as simple as it gets.
6. 💰 Cost Because static sites have such a small footprint, it is often possible to find hosting for FREE

Resources

• 9 Reasons Your Site Should Be Static
• Beginner’s Guide to Eleventy - PART I: WHAT IS A STATIC SITE GENERATOR?
• A Static Future