Minimal loading speed, offline support, and a blazing-fast experience are contributing factors to the rise of static sites. Developers are presented with easier CMS integration, improved usability and resource efficiency deeming static sites as a great alternative.
Discover the most important parts of a static site and the benefits of integrating your static site with some well-known content management systems. Learn about the most popular tools while discovering insight into the right choice for you or your company.
What is a static site?
There are 2 kinds of websites that we are familiar with, static and dynamic. Static sites generally have fixed content with simple elements and are created through HTML language. Blogs, landing pages, documentations, and portfolios are all static sites.
Dynamic websites embody a lot of interactive content based on user input; writing a new post, uploading a new video or editing a profile picture. There are more options in terms of multitude elements and pages are created by the usage of PHP, Javascript, and Actionscript languages. Layout and content are connected by a database, requiring backend support which is then sent back to frontend to re-render. Facebook, Youtube, and Amazon are all excellent examples of dynamic websites.
Static sites, however, offer opportunities for developers to add emerging frameworks and content management systems resulting in powerful tools to manage digital content. Benefiting both users and developers, static sites are cost-effective, easy to build, have great community support and use fewer resources. In fact, highly visible companies such as Nike’s “Just do it” project, and AirBnB’s Cereal typeface have deployed the static sites and CMS combination. Static sites are a viable solution to enhance and manage digital content while retaining the original features of static sites.
What is a static site generator?
Static site generator, often referred to as an SSG is most commonly a framework or a set of tools used to generate your static site with predefined content often held in markdown files which you can think of as text documents. They need to be specifically structured to match the expected design that a static site generator will apply it to.
Let's look at the following example of a simple blog post and how it works. Instead of having your HTML store hard-coded content, you replace the title, subtitle, image, and action of a blog post with tags (specific to what SSG you are using) which will be recognized and then filled with appropriate content.
<article>
<div>
<h1>{title}</h1>
<p>{subtitle}</p>
<img src={hero_image} />
</div>
<p>
{call_to_action}
</p>
</article>
And your markdown file will look something like this.
hero: "My article title"
subtitle: "My article subtitle"
hero_image: "image.png"
call_to_action: "My article call to action"
A static site generator will recognize these tags and properly apply them into your HTML template, which yields the following result.
<article>
<div>
<h1>My article title</h1>
<p>My article subtitle</p>
<img src="image.png" />
</div>
<p>
My article call to action
</p>
</article>
This is the most basic explanation of how a static site generator works, but the following list of most popular SSGs offers a much wider toolkit including service workers, GraphQL integration, CMS integration, data storage and more. Some of the most popular static site generators today are: Gatsby.js, Hugo.io, Next.js, and Jekyll
How do static sites work with a CMS?
Integrating the static site with a headless CMS is the most common method to utilize power and increase functionality.
A headless content management system is exactly what the name says - a CMS without the head, or in tech terms, without the frontend component which is generally something CMSes have.
This means that it holds great power in its API, or the backend if you will, which is exactly what you need when using an SSG and handling the frontend part, or the “head” yourself. As a result, you can manipulate the static site into an even more powerful app without losing all the static sites features.
A great example of a headless CMS is ButterCMS which is built specifically for developers and holds a great set of features including content delivery network (CDN), built-in SEO optimization, dead-simple content modeling and much more.
Let’s take a look at the example blog post from before, but this time integrated with ButterCMS.
Starting with a simple call to the API.
GET [https://api.buttercms.com/pages/homepage](https://api.buttercms.com/pages/homepage)
We will get the following result.
{
"hero": "Your new marketing site powered by Butter",
"subtitle": "Some awesome subtitle.",
"hero_image": "https://cdn.buttercms.com/image.png",
"call_to_action": "Know More"
}
Which when integrated with an SSG will be templated like this.
<article>
<div>
<h1>Your new marketing site powered by Butter</h1>
<p>Some awesome subtitle.</p>
<img src="https://cdn.buttercms.com/image.png" />
</div>
<p>
Know more
</p>
</article>
ButterCMS is an excellent solution for deployment of a powerful API-based CMS coupled with dead-simple data modeling and many other viable features.
How to choose a CMS?
Choosing between traditional CMS and headless CMS is a matter of requirements, rather than a matter of opinion - are you enclosed to use a specific technology stack? How much control do you want to have over your website? How much responsibility do you want to have? These are some of the questions you should be asking yourself when choosing between the two. Here is some information which can help you based on your requirements.
If you are looking for built-in features such as hosting, security, database, theming, and a user-friendly dashboard to manage all of those things, or a full repository for your website, a traditional CMS like Wordpress might be the right choice for you. However, you are highly limiting your flexibility and losing profitability by serving your users slower, specifically themed websites with no full control over your opinions.
On the other hand, if you have a bit more programming skills and are looking for a faster, more cost-effective solution, with the ability to provide your own functionality and have more control over your website, Headless CMS like ButterCMS is definitely worth a shot.
Take a look at this curated comparison of a Headless ButterCMS versus a more traditional WordPress CMS.
ButterCMS
WordPress
Speed
Fast and performant data delivery through an API
Must be used to serve the whole website content
Flexibility
Serves as the backend of your app; can be integrated in any tech stack as well as mobile apps
Limited to using provided themes and plugins
Setup
Built for developers for easy consumption and integration with current programming knowledge
Limited to specific programming knowledge on which the CMS runs
Maintenance
No need for manual maintenance or any kind of security updates, all is handled by ButterCMS
You are depended on existing plugins by third parties for maintenance, and updates can lead to data losses
Scalability
Global CDNs leading to maximum performance and availability
No built-in CDN, you need to chose one of existing services with separate pricing
Conclusion
The switch to a static site with a good headless CMS remains strong and continues its upward momentum among developers and end users. ButterCMS improves business efficiency, reduces costs and increases website performance. Turn your website into a powerful app with ButterCMS’ free 30 day trial today.
Top comments (0)