Introduction to Gatsby and Agility CMS

 Agility CMS now integrates with Gatsby Cloud!

Get started with fast previews, incremental builds, and deployment integrations.

Building a Gatsby site with Agility CMS provides a best-in-class experience for editors and developers to create blazing-fast websites.

Gatsby is optimized for speed and is easy to integrate with a variety of data sources. With our agilitycms-gatsby-starter site, getting a site up and running with Agility CMS is easy. 

Our integration with Gatsby is the only one that will not only source your content but also generate your pages for you. This leaves developers to build UI components and empowers editors to compose and manage their pages.

Gatsby's fantastic developer experience is well documented, but we believe the editor experience should come first. If you want a fast website, happy developers, and productive editors, then this is for you.


What is in this Article

Build Better User Experiences

Gatsby was designed from the ground up to improve the User Experience across the web. That means performance, SEO, and accessibility are top of mind. They have implemented many out-of-the-box techniques to give you a leg up on providing the best experience for your users.


  • It's simple - it's a bare-bones template but has enough examples in it for you to follow
  • Fast rendering - your website is exported to static HTML, so there's no more waiting for your webserver to piece together and render your HTML
  • Pre-fetching content - as a user scrolls through your page, content for the next page they are likely to click on is pre-loaded in the background, making that next page load that much more snappy
  • Lazy-loading images - using the gatsby-plugin-image component, it will only load images on the page that are is within the user's view
  • Optimized images - using the gatsby-plugin-image component, it will only load the appropriately sized images for the device the user is using so smaller devices will load smaller images
  • Accessible output - your website is static HTML files which are easier for screen readers to read
  • Accessibility tools - includes tools to automatically check code for best practices for accessibility

Cheap, Reliable, and Flexible Hosting

Since your website is static HTML, you don't need numerous, expensive web servers to host your website, no matter how much traffic you get! Your site is infinitely scalable and easily portable. This means you can host your website for a fraction of the cost on a number of different providers and because your site is static, it is much more reliable.

Hosting a Gatsby Site on Netlify

Hosting a Gatsby Site on AWS Amplify

Hosting a Gatsby Site on Azure

Happy, Productive Editors

With Agility CMS powering the content for your Gatsby site, you can rest easy that your editors can create and manage their pages with ease. They'll have a toolkit of UI components (modules) and page templates that developers have built for them and they'll use these to compose their pages. After changing content, they'll then be able to preview their changes in real-time in a Preview environment prior to publishing them.

Happy, Productive Developers

Gatsby developers love their job. They can use the skills they have while developing new ones and take advantage of many of the modern tools available to improve the developer experience. 

Gatsby is a framework built on top of React, currently, the most popular JavaScript framework and for good reason. It makes it easier for developers to create reliable and re-usable interactive UIs, and there is an enormous eco-system of learning tutorials, forums and code plugins targeted to helping React developers. Gatsby takes this even further and provides a structured foundation for building websites using React. The end result is that developers building websites using Gatsby are developing an important skill that brings them into the React ecosystem and can even transfer some learnings into other React-based development such as mobile apps.

Get Started Quickly

The agilitycms-gatsby-starter is a starter template designed for developers using Agility CMS with Gatsby. Save time and effort by using this template that is already integrated with Agility CMS using best practices.

  • It's simple - it's a bare-bones template but has enough examples in it for you to follow
  • Fast preview and builds - Our official Gatsby plugin will only refresh content that has changed since your last build, so you can rest easy your builds will be fast, regardless of how many pages you have.

  Try it!

For a tutorial on how to get started, see Gatsby Tutorial

7 out of 7 found this helpful



Please sign in to leave a comment.