How static site generators work with Contentful

Editor’s note: This article was originally published on the Webstacks blog and is reused with their permission.

Static site generators (SSG) are outcompeting dynamic websites by a landslide. They work with headless CMS solutions to offer greater flexibility, performance, scalability, and security for both developers and users. By reading this article, you’ll learn how SSGs work with a headless CMS like Contentful.

The pressing need for fast, lightweight, scalable, and secure websites took us back to the past, but with a better redirection into the future. 

In the early days of the internet, the web was static. Then came first-generation content management systems that promised development flexibility and moved us into an ever-evolving, complex landscape of backend and frontend frameworks. 

Now, the future seems to return us to our roots, this time with a lot of improvements stemming from the popularity of ​​the Jamstack architecture. Today, static sites offer greater flexibility, performance, scalability, and security for both developers and non-technical users.

What is a static website?

A static website serves pre-built, pre-rendered HTML, CSS, and JavaScript files to a web browser. Since these files are prebuilt, they do not change with every user request. Static sites enable decoupling of the user interface from the content repository following this approach. Essentially, each static file is a separate file. 

A static site increases page speed because the content is delivered as a pre-rendered, lightweight page. Improved page speeds correlate to better search engine rankings. Developers can work with multitudes of frameworks to build a website.

Static sites also make it easy for teams to maintain and scale their website. Moreover, they have a security advantage because the content and database exist independent of the user interface. Users have fewer entry points to connect to the database each time they interact with the website.

All static websites need an essential component for users to have a fully static site: a static site generator.

What is a static site generator?

A static site generator (SSG) lets you build a fully static website using template files or components. SSG generates HTML pages during a build process from a given content source. In most cases, static site generators accept markdown-formatted text files, although some (such as Gatsby) extend support for other sources.

How SSG powers static websites

Static site generators generate HTML pages at build-time. It reads content from files, merges that data with components, and renders it to HTML pages. 

The pages are deployed to a server and served to a content delivery network (CDN), eliminating database latency. You don’t need to worry about managing database backups. Moreover, you don’t need load balancers during traffic spikes. You can simply host your website with a CDN to scale your site’s traffic.

Does Contentful support static websites?

Contentful makes it easy to manage your static website. It separates content from presentation and uses content APIs to deliver all your content. Using Contentful’s webhooks, you can rebuild your static site in a fully automated fashion whenever your content is modified. 

Contentful extends functionality to the next level. Since SSGs don’t offer a preview feature, Contentful offers users an API to preview an article or website page before publishing.

Which static site generators does Contentful support?

You can integrate Contentful with any static site generator. The plugins integrate with Contentful to offer secure, simple, and reliable pages. 

Fortunately, Contentful’s strong community of developers has already done some work for you! They’ve created integrations with some of the most popular static site generators:

• Gatsby

• Jekyll 

• Metalsmith 

Gatsby: Fastest static site generation framework

Gatsby is an open-source, React-based framework that lets you build blazing-fast websites and applications. It offers you all the benefits of static websites while combining full functionality, control, and scalability of dynamically rendered websites. 

You can create web apps ranging from blogs to dashboards to e-commerce stores. Gatsby allows users to build a workflow regardless of where the backend data comes from using React and GraphQL. Everything is built using components in Gatsby.

Gatsby works seamlessly with Contentful to load data from your Contentful data source. Moreover, you can use Gatsby’s source plugin package that enables Contentful to be a data source for your Gatsby project.

This source plugin pulls content types, entries, as well as assets into Gatsby from a Contentful space. To be able to query entry types and assets using GraphQL, it creates links between the two.

What is React?

React is an open-source JavaScript library that lets you build user interfaces for your web applications. It breaks UI components into small, reusable pieces. These components can pull data in the data layer from any source. Moreover, the data can be changed without ever reloading the page. 

Gatsby uses React under the hood to create user interfaces. The components are rehydrated so that whatever you do in React can be done using Gatsby. Essentially, a React component is a function that returns a React element.

You can think of a React element as an object that React uses to render DOM elements. This component-based architecture encourages modularity and abstraction.

Jekyll: For simple static websites

Jekyll is another open-source, Ruby-based static site generator that lets you convert articles written in markdown to generate HTML. The SSG takes text written in markup language and uses layouts to create a static website. Jekyll is a blog-aware SSG that lets you tweak your site’s URLs and the data displayed on the page.

Using Jekyll, you do not need to worry about managing complex databases, comment moderations, or updates to install. By forgoing backends, you can provide better security, lower operational overhead, and cheaper hosting to your website. 

What is Ruby?

Ruby is a flexible programming language used for building web applications. Unlike C and C++ languages that need to be compiled, Ruby is an interpreted language.

Contentful offers a central hub for managing your structured content and APIs that provide a content infrastructure for your static website. If you want to integrate Jekyll with your Contentful space, Contentful’s Jekyll-Contentful-Data-Import extension does the work for you. This extension uses the Jekyll static site generator together with Contentful.

Metalsmith: A simple, pluggable SSG

Metalsmith is a static site generator powered by NodeJs that is best known for its simplicity. It takes information from source files in your Contentful space and writes it into a destination directory. It essentially works by manipulating information. Moreover, all of the logic in Metalsmith is handled by plugins. 

What is Node.js?

Node.js is a cross-platform, back-end JavaScript runtime environment that executes JavaScript code on the server. Developers can use JavaScript to write command-line tools for running scripts on the server-side. 

Metalsmith, a NodeJs tool, creates static pages using several different templating engines. Hence, it lets you produce dynamic web page content before the page is sent to a web browser.

Generating a static site with Contentful

By now, you’re well-aware of the static site generators that allow you to integrate your static site with Contentful. But how exactly do you build a static site with Contentful? And is there even a need for a CMS for static sites?

By using a headless CMS like Contentful, you reap the benefits of content management features while embracing the static site generator mantra. Whether you’re a non-technical user who wants to create content for a static site, or you want to free yourself from updating your site’s repository, Contentful lets you do it with grace.

What is needed to build a static site with Contentful’s Headless CMS?

All it takes to build your static site with Contentful’s Headless CMS are a few simple steps. 

1. Create a free Contentful account to get started.

2. To create a UI, you’ll need a static site generator (SSG). You can explore your options, or if you’re just wondering where to get started, Gatsby might be a good choice. It lets you seamlessly integrate your UI with Contentful. At this point, you can connect with your Github account and create a repository. 

3. Once you’ve connected your site to your Contentful account, it appears in Contentful, as well as in your GitHub repository.

4. Next, you need to create a Contentful space (a data bucket). This is used to store your site’s content. A great feature about Contentful spaces is that it lets you define your data model to fit your needs.

5. To set up your repository locally, clone it to your computer via the GitHub Desktop App. This will automatically pull all of the project files onto your desktop. 

6. You’ll need to generate a Content Management API access token and a Content Delivery API access token. Once you’ve done that, enter your Contentful credentials into your terminal or command prompt.

7. From here, you can import data into the space if you wish to do so.

8. Before you launch your static app, you’ll need to create a contentful.json config file.

9. You can now run your static site locally and create and edit content directly inside your Contentful space.

10. Lastly, if you want to get your site live, you’ll need to deploy it on the cloud. Here again, you have plenty of options to choose from. Netlify might be a good choice as it is super easy to integrate with Contentful. 

Examples of Contentful static websites

We’ve identified how static site generators work with a headless CMS to solve the problems of monolithic content management systems. Monolithic CMS has a highly coupled architecture that manages not only your content but is also in charge of rendering it to the screen. 

It would be nice if we could have a CMS that only managed content. We could then use a static site generator to take all that content and render it into a full-blown static website.

Contentful comes to the rescue by giving you the best of both worlds. That is why many websites today deploy a headless solution to function as a content repository for their application.

ServiceTitan: The world’s leading software for the commercial industry 

ServiceTitan, a leading enterprise software platform for the commercial services industry, migrated to a headless CMS website only to realize an 18% increase in product demos site-wide! 

ServiceTitan needed a digital infrastructure that could scale with their rapidly evolving marketing initiatives. To compete in the SaaS industry, they knew that time-to-market was crucial.

They needed a modular system that was adaptable and responsive. As a result, ServiceTitan outscaled their competition by taking advantage of the best-in-class technology: static site generators like Gatsby.js and a headless CMS like Contentful.

They have now become the #1 operating system for the entire commercial and residential industry in the United States.

Segment: The leading customer data platform

Segment is a leading customer data platform (CDP) that helps businesses to collect, clean, and activate their customer data. 

It is another remarkable example of how improving time-to-market gives you a significant advantage over your competitors. Segment’s blazing fast website makes use of Contentful and SSGs to provide a smooth user experience to the customers.

Webstacks: A high-growth website operations agency

Here at Webstacks, we’ve helped clients across multiple industries to exceed their goals, launch world-class websites, and optimize their tech stack. By migrating to Contentful and choosing Gatsby for the presentation layer, we achieved faster page load speeds and a better user experience.

What do you think of our website?

Parting thoughts

Not every website needs to be a static site.

But we believe that there is always a way for a static site to work for your team. And when that is the case, a headless CMS like Contentful works with SSGs to offer you high performance, flexibility, scalability, and security.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.