In this post, we’re going to talk about what static sites are, how they differ from other modern websites, and what their role is in improving search engine optimization (SEO). We’ll cover some of the best static site generators, as well as some other useful tools including headless cms.
The web is a huge place, with loads of websites, but all of them work on the same principle: moving files from a server to your browser. Let’s talk a bit about how this works since it’s an important prerequisite to understanding the concept of static sites.
The difference between static sites and non-static single-page applications (known as SPAs) lies in how these HTML files describe what is shown to the user.
Almost all websites consist of multiple web pages. In single-page applications, the HTML files contain information about multiple pages. For example, if a user goes to https://buttercms.com/, the returned HTML files fill contain information about https://buttercms.com/, but will additionally contain information about https://buttercms.com/solutions/, https://buttercms.com/pricing/, and other pages.
The main benefit that SPAs provide is that the user doesn’t need to download any new HTML files when moving from one page to another. Since the information about all the pages is downloaded at the same time, it’s loaded once and works seamlessly after that.
This is a complex process, and many single-page applications are made with the help of external libraries like React, Vue.js, or AngularJS.
What Is a Static Site?
As opposed to SPAs, a static site only returns the bare minimum amount of information that the browser needs to render a single web page. So, if you go to https://buttercms.com/pricing/, you will only receive the HTML files for the pricing page.
Unlike SPAs, static sites provide a “what-you-see-is-what-you-get” experience. That is, the HTML received from the browser is rendered exactly as-is, with minimal processing.
This also means that, in general, the user needs to download the files for each new webpage they visit.
Benefits of Static Sites Over Single-Page Applications
From the above information, SPAs may seem like an attractive choice for creating your own website, but static sites actually have numerous benefits when hosting blogs and content-based sites, especially for SEO:
Consequently, this leads to big performance gains with regards to the speed at which the page is loaded.
As it turns out, page speed plays a big role in how search engines rank your site.
When a search engine indexes your website, it has to “crawl” your webpages. “Crawling” refers to the process of a search engine bot (called crawlers) browsing your site and recognizing and categorizing its content.
For static sites, the HTML content is rendered as-is and is what search engine crawlers are most optimized for. And so even though there are some crawlers that can index SPAs to some extent, static sites are orders of magnitude easier to crawl and require way less computing power to do so.
For an in-depth look at crawlability issues, check out our post on Angular SEO.
Static sites have been around for as long as the internet, but the tools to develop and maintain them have evolved constantly. Earlier, static sites were made by writing code for each web page separately. However, this is a time-consuming process. Today, most websites make use of modern toolchains and libraries to generate static sites.
Let’s go through some of the tools that are used for generating static sites:
- Templating engines like Jekyll and Hugo allow you to define standard templates and themes that will be used throughout the website. Individual pages can then be written in Markdown, or plain text, and transformed into a full-featured webpage.
- Hybrid frameworks like Next.js and Gatsby actually give you the crawlability benefits of a static website, while still providing the cross-page loading benefits of SPAs. This is done differently in different frameworks but works on the principle of prefetching resources of other pages after the initial page has loaded.
- Headless CMSs like ButterCMS allow you to integrate with both templating engines and hybrid frameworks to generate your static site. The difference here is that integration and deployment is a one time step, after which content can be updated from an external portal available through the CMS (unlike the previous options, where you must do a fresh manual deployment in order to update content).
The only downside of the first two tools is that they require someone well-versed with web technology to update and deploy the website each time new content is added.
Why Use a Headless CMS?
Using a headless CMS, we can develop an interface with any modern tool (like the ones listed above), after which content updates can be managed and deployed by anyone (and not just web engineers).
Headless content management systems and static site generating tools are the perfect match since you can get the best of both worlds: the site generating tools make it easier for designers and engineers to write code once and apply the same theme to multiple web pages, while headless CMSs help non-developers manage and update content on the website directly.
We can even use APIs provided by headless CMSs to integrate with different marketing tools. For example, we can add a webhook on our website’s application server so that every time new content is added, we can additionally send a marketing email using any popular email provider to our subscribers. This ability to listen to and act upon changes and updates in website content serves as a huge value-add when dealing with content marketing workflows.
In the case of ButterCMS, we can integrate with websites deployed using a site generator and use the ButterCMS dashboard to add more content or manage existing content. Here’s a more technical guide on how to integrate headless CMS with Next.js (which is a popular hybrid static site generator). For more guides on how to integrate ButterCMS with your application, please view our documentation page.
Make sure you receive the freshest Butter product updates.