tl;dr check out our less technical article on the subject
As the web continually evolves, a paradigm shift occurs every few decades. We are in the midst of one such shift. New technologies have enabled the resurgence of static websites. Once considered old fashioned, they are becoming the new face of the web, as more and more companies transition to static web apps and APIs to deliver dynamic user experiences.
In the beginning, there were static websites. The first website, ever, was a static HTML document. And that’s essentially what a website is: an HTML file--though nowadays we add a little CSS and JS for aesthetics. Today, static sites are making a comeback with the rise of static site generators (SSG), like Hugo.
While static websites were perfect for the early web, they were often coded by hand. This made writing and maintaining large websites tedious. In order to make it easier to develop and maintain websites of ever-growing complexity, dynamic websites and content management systems (CMS), like Wordpress, Joomla, were developed.
Dynamic websites grew out of then--cutting edge--web technologies; together, called a software stack. The LAMP stack, which underpins most traditional dynamic websites, stands for Linux (Operating System), Apache (HTTP Server), MySQL (Database), and PHP (Scripting Language). A CMS is a program which runs on a server, stores content in a database (but not always, see flat-file CMS, and uses PHP (or another programming language) to create a webpage when an HTTP request is received by the server. This forms the basis of how a dynamic website works.
By generating a web page when a user requests it, a dynamic website is able to tailor the content of the page to the user. This is great for ecommerce sites, forums, and other types of websites where content needs to be updated frequently, or tailored to the person viewing it.
While dynamic websites offer many benefits, there are drawbacks. Because of the way content is dynamically created when a user requests a web page, a backend server is required to process requests and generate web pages.
As the amount of traffic to a website increases, the computational requirements needed to generate and serve web pages increases. This leads to problems scaling performance, especially when traffic spikes unexpectedly. Not properly sizing your server can slow your website to a halt. And when your server goes down for maintenance, or otherwise, your website goes down.
Serving static content on the other hand, is much easier. Because each web page is generated once, when the site is built, only copies of static files are sent when a user requests a web page. This requires no backend server, as static files are uploaded directly to a Content Delivery Network (CDN, more on that later). This solves the performance scalability problem and eliminates the need to secure and maintain a server.
Dynamic websites have vulnerabilities everywhere in the stack. Servers have to be patched and secured, along with databases, PHP and the CMS. On top of that, site plugins and themes bring their own set of vulnerabilities. This means constant maintenance, one missed patch or misconfiguration could compromise your website.
Vulnerabilities, hacks and exploits are commonplace with dynamic websites. Major attacks that target multiple vulnerabilities, like the Kashmir Black Botnet, really stress how important it is to keep the entire software stack up-to-date. Even with a fully patched server, zero day vulnerabilities can still be exploited. Vulnerabilities in common plugins can affect hundreds of thousands of sites.
Because a static website has no backend server, the attack surface is drastically reduced, nearly eliminating the chances of being hacked. If security matters to you and it should, this makes moving to a static website a no-brainer.
Static websites are easy to build with tools developers use every day. All you need is a basic text editor and a Git repository for version control to start building a static website. Dynamic websites on the other hand, require a difficult to set up dev environment, which includes the entire software stack needed to run the website. Because most dynamic websites use a database to store files used to build the website, you must also know how to work with a database; also, version control software like Git goes out the window.
Some of the most popular CMS, like Wordpress, have been around for decades. This means that over time, as the developers have added more and more features, the underlying code has accrued technical debt; meaning that new code, instead of being written in on a clean room basis, has to account for backwards compatibility with the rest of the system. This makes most traditional CMS platforms difficult to develop for.
Some have described Wordpress, and other popular CMS, as software monoliths, because of the way it ties the concerns of the front-end and back-end of the website into a single program. This is in contrast with modern web development, which is centered around microservices and a [design principal called separation of concerns SoC.
To try to bring dynamic websites up to speed with modern practices, there has been a recent trend toward headless, or decoupled CMS. In this configuration, the traditional CMS becomes the backend to a static website, combining the best of both worlds--albeit with much added complexity.
Despite being a monolithic piece of software, with decades of development, there are still many things most traditional CMS won’t do out of the box. Plugins are installed to extend the functionality of the CMS. It’s easy to take something as simple as an XML sitemap for granted (important for SEO), but you’ll need a sitemap plugin for Wordpress and the list goes on and on. While this isn’t necessarily a bad thing, it means added complexity. Bad plugins are a real problem, stability issues, security issues and updates are all things that will need to be managed.
JAMstack, a term coined by Netlify founder Matt Biilmann, stands for Javascript, APIs, and Markup. JAMstack represents a paradigm shift in the way websites and web apps are made. Instead of relying on monolithic programs and dedicated backend servers, static HTML files are published to a CDN. Dynamic content is handled by javascript and APIs to various microservices. These microservices can handle things from contact forms to ecommerce.
Static site generators (SSG) form the heart of the JAMstack. SSGs build static websites from HTML templates and markdown files. Automating much of the tedium normally associated with building a static website. This allows [developers to follow the principles of Don’t Repeat Yourself (DRY). Meaning small, reusable components can be written once, and reused throughout a project. Hugo, the fastest SSG, can build a static site with 10,000 pages in milliseconds. This makes developing a website fast and efficient. It’s no wonder SSGs are surging in popularity.
Once built, a static website is often deployed directly to a CDN. CDNs were built to speed up the delivery of static assets, like images and videos; but when used for static HTML, it's a game changer. A traditional dynamic website serves content from a single origin server. This server could be thousands of miles away from the end user, hurting load times. Instead of a single server, a CDN consists of hundreds of points of presence (POPs) around the world. This means your static site can be served right where your audience is, speeding up load times. Also, because of the distributed nature of CDNs, if one POP goes down, the next closest POP is ready to serve your website. Say goodbye to losing traffic due to server maintenance, or DDOS attacks.
All of these improvements in site speed, security, and developer experience have led many organizations to adopt static websites. Some of the most prominent examples include Smashing Magazine, who moved their massive website from Wordpress to Hugo and Netlify. Some other great examples of websites built with Hugo include, digital.gov, and keycdn.com.
While we love using Hugo, it's not the only game in town. SSGs like Gatsby and Jekyll are also very popular. Some examples of static sites built with these SSGs are shopflamingo.com (ecommerce, Gatsby(see how it was built)) and developer.shopify.com (Jekyll).
The examples above show that static websites can pretty much do it all and are more than capable of handling the needs of organizations large and small. That’s why at Vibe, we’ve decided to focus our expertise on building static websites, specifically static websites built with Hugo. Check out our portfolio to see more examples of sites we’ve built. And get in touch if you’re in need of some website assistance!
