Getting Started with Gatsby and Agility CMS


This guide is meant for developers. Want to learn why Agility CMS and Gatsby work so well together?

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

How to Build a Gatsby Website with Agility CMS

This tutorial will guide you through how to get started with Gatsby and Agility CMS using our agilitycms-gatsby-starter. Gatsby provides a remarkable Developer Experience (DX) and enables blazing-fast User Experiences (UX). While. Agility's robust authoring tools such as Page Management deliver a best-in-class Editor Experience (EX)

Here is what we'll cover:

  1. Develop Components, not Websites
  2. Create a Free Agility CMS Account
  3. Get the Code and Set Up your Environment
  4. How the Starter Works
  5. Set Up a Preview Environment
  6. Deploy to Static Web Host

Develop Components, not Websites

When building a website with Gatsby and Agility CMS, we think it is important to take advantage of our native Page Management. This is why we always recommend developers start by taking a look at our starter site, rather than starting from a blank site. It shows you how you should structure your gatsby site, and serves as an example based on our recommended best practices.

Save time and money by allowing editors to manage all aspects of pages. They should be able to control what pages are on their website, and what is on each page.

Offloading this responsibility to your editors means you can spend less time responding to content needs and more time on improving your UX. You'll maintain a toolbox of UI components (i.e. Page Modules and Page Templates) that your editors will use to compose their pages.

The gatsby-source-agilitycms plugin not only sources your content but also generates your pages for you.

What's in a Page?

Page in Agility CMS has the following structure:

  • SEO Fields - title, url slug, description, keywords
  • Page Template - the layout of the page, which defines Content Zones
    • Content Zones {} - the areas where editors can add/manage Modules
      • Page Modules []- self-contained functional UI components representing what is on a page

All of your pages will be dynamically composed at build time, and incrementally updated as content changes.

Your entire website's look and feel will be dictated by the Page Templates and Page Modules you have available to your editors.

Page Templates and Modules

These will correspond to React components in your source code and will automatically be rendered for you.

Sign up for the Blog Template Instance

In order to source content from Agility CMS, you'll need an account and access to an instance. When getting started with Agility CMS and Gatsby, we recommend using our Blog Template to get you comfortable and to view an example based on best practices.

How to sign up for the Blog Template

Get the Code and Set Up Your Environment

Once you have your Blog Template instance up and running, you'll want to get the Gatsby site code for it and configure it to connect to your Agility CMS instance.

Setting up your Development Environment

How it Works

Your Gatsby site is configured and structured in a specific way to help you take full advantage of both Agility CMS and Gatsby development. 

How Sourcing Content Works

How Pages Work

How Page Modules Work

How Page Templates Work

Resolving Linked Content in GraphQL

How Images Work

Set Up a Preview Environment

Now that you have your site working locally, you'll want to get a preview environment set up so that editors in the CMS can preview their content in real-time without having to run the site locally or manually re-triggering a full site rebuild. Gatsby Cloud makes this quick and easy!

How to add a Preview Environment using Gatsby Cloud and Agility CMS

Deploy to a Static Web Host

Once you have your preview environment set up, next you'll want to decide where your production will be hosted. Since the site is static HTML, there are a ton of options.

We recommend:

Using Gatsby Cloud to Deploy to Netlify

Using Vercel to host Gatsby sites

7 out of 7 found this helpful



Please sign in to leave a comment.