Using Gatsby with Agility CMS

Gatsby is an amazing framework for Static Site Generation. Built on top of React.js, it's been around for about several years, and it's solid.

Recently, my colleague James Vidler wrote a Gatsby Source Plugin for Agility CMS. It allows you to build sites using Gatsby with content pulled directly from Agility's Headless Content APIs - including dynamic page routing.

Let's take a look!

Create A Free Agility Account

It only takes a minute to create an Agility CMS account, and it's free forever. Sign up here.

Once your account is created, we'll need to grab your GUID and API Keys.

Get the Code

Make sure you have Gatsby CLI tools installed (we are using npm here...)

npm install -g gatsby-cli

Go ahead and clone the starter repo on from GitHub that has all the code you need to get started.

git clone https://github.com/agility/agility-gatsby-starter.git

Resolve any dependencies

npm install

Run it in development mode!

gatsby develop

The site is just a starter, but it has a bunch of interesting features that you can use to build from. Let's hook this code up to your new Agility CMS instance that you just created.

Hook it up to your Agility CMS instance

Edit the gatsby-config.js file and repace the guid and apiKey with yours.

You can find your API Keys by navigating to Settings, then clicking on API Keys.

If you use the "preview" key, you won't have to publish to see the changes you've made show up. If you use the "fetch" key, make sure you've published any content you wish to see changed.

How Does It Work

The Gatsby Source Plugin downloads all the Pages on the Agility CMS Sitemap, as well as any Shared Content that's referenced on the sharedContent property on of the gatsby-config.js file.

All of those pages and content are then made available in GraphQL to the React Components you will write to render those pages.

Check out the Jumbotron component, which is used to render the Jumbotron module. Here it is in the Agility Content Manager:

And here is the code used to render it. Notice that the title and subTitle fields are available as properties the item.fields object.

import React, { Component } from 'react';
import { graphql, StaticQuery } from "gatsby"

import './Jumbotron.css'

export default class Jumbotron extends Component {
    render() {    
        return (
            <section className="jumbotron">
                <h1>{this.props.item.fields.title}</h1>
                <h2>{this.props.item.fields.subTitle}</h2>
            </section>
        );
    }
}

When we add new modules and content definitions to Agility, the components we use to render those modules will automatically get the strongly typed data delivered to those modules as props.

Sweet!

...

This is just the tip of the iceberg for working with Gatsby and Agility CMS.

Let me know in the comments below what you think!