Note: looking for a short and quick version of why static sites are great? Check out the TLDR version here. Otherwise, read on!
That’s right, an ancient technology as old as the internet itself may be the best tech solution for your website. Let me explain how that could be. I think you’ll find this new iteration of tried and tested tech to be really compelling. It actually simplifies development and improves performance.
What are static sites?
Static sites are websites that don’t utilize a server to generate dynamic content on demand. They’re fairly straightforward — just HTML, CSS, and JS, delivered to the client through a CDN on page load. In fact, static web pages were among the first sites to exist on the web, technically speaking. Today, however, they’ve been augmented for improved functionality.
These days static sites are usually generated by Static Site Generators (SSGs) like Jekyll or Gatsby, which empower developers with a myriad of features to organize and deploy code. These tools run before deployment, generating html files from the code the developer provides. SSGs are a bit like conductors for a pre-recorded orchestra, synthesizing parts and spitting out compiled markup that can be deployed statically, anywhere. This is the key concept here: with SSGs and their ecosystems, the heavy-lifting happens before (and occasionally during) deployment, but not after.
In contrast, server-based tools like Wordpress inject dynamic content as users interact with the page. This latter method creates additional complexity, security vulnerabilities, (potentially) higher hosting costs, additional maintenance costs, and slower load times.
Now that we have an idea of what these tools are, lets dive a little deeper into the pros of Static Sites and SSGs.
Static sites are simple to build and maintain
Have you ever tried customizing a wordpress site? As a developer let me tell you, it’s a pain. Sure, with a preconfigured template, a wordpress site is simple to setup for the end user, but dig around in the code and the learning curve becomes steep.
While wordpress is particularly problematic here, other server-based solutions suffer from similar problems (see Joomla, or Drupal). Their implementations are necessarily complex, leading to a myriad of inefficiencies, costing more developer time (and consequently, customer dollars).
Static sites are much simpler to build and maintain. They don’t have complex render loops, massive nested file structures, or database setups to worry about. They run locally with a few simple commands, enabling the developer to hit the ground running. This is good for a paying customer, as it means lower costs. It also means fewer moving parts to break.
Static sites are more secure
Moreover, because they aren’t based on server technologies, static sites are more reliable and secure. SQL injection doesn’t work when there is no SQL database to inject into. This means no more maintenance fees as your developer works to update wordpress so it isn’t hackable.
Static sites are fast
Because they are served as static content, and don’t need to ping a server to receive content after page load, static sites are generally much faster than server-based sites. Being static, they are also easy to clone and serve up on a cloud network, so they load quickly from anywhere in the world. Loading times are very important for the user experience, evidenced by the fact that page load speed is directly correlated with visitor conversion rates (read more here).
Content Management Systems support Static sites
One concern many website owners have with going static is that they’ll lose the ability to edit their content through a CMS. After all, most content management systems utilize servers and databases to serve up dynamic content, so surely going static means losing this functionality. It’s an understandable concern, but is no longer valid.
There are now many content management solutions for static websites and applications, including services like Contentful and (my favorite) Forestry.io. These services utilize headless methods (not tied to the server where you host your website) to deploy new content to your site on command, through a UI. They do this by re-deploying your site when a change is made, running the build command to re-render the site.
We’re getting complicated again, but worry not, the details aren’t important. What does matter is that you can update and add content, as well as see previews with Static-compatible CMSes. Granted, the CMS experience with static content is different than the offerings from server-based systems, and tends to be less feature rich, but comes with its own pros. In particular, the ability to deploy content from one central source CMS to multiple locations is a major pro that’s attracting industry leaders to this technology.
Static sites can still serve dynamic content
Static sites and applications are device agnostic
Because they don’t require a server to run, static sites can be rendered anywhere, including on mobile devices like tablets and smartphones. So, build your site or the frontend of your application in one location, and you’re able to render it anywhere, including as a mobile app by wrapping the frontend in a tool like Cordova/Phone gap. This is one of the major reasons that static applications have become more popular, they decouple the backend from the frontend, allowing much more flexibility in deployment. This means you can easily turn your website into a web application, if you so desire.
All in all, static websites offer a slew of benefits that make them a great option, particularly for marketing websites. That’s why they are the core technology in our stack here at Coastlight Digital.