This is sample Gatsby starter site that uses Agility CMS and aims to be a foundation for building fully static sites using Gatsby and Agility CMS.
New to Agility CMS? Sign up for a FREE account
- Uses Gatsby V3 - The latest version of Gatsby’s core framework which introduces massive improvement to the developer and user experience.
- Uses AgilityImage - A custom image component utilizing the new Gatsby Image Plugin that take's images stored within Agility CMS and handles all of the hard parts of displaying responsive images that follow best practices for performance on your website or application.
- Uses
gatsby-source-agilitycms- Our official Gatsby plugin that 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. - Supports full Page Management.
- Supports Preview Mode.
- Provides a functional structure that loads a Page Templates dynamically, and also dynamically loads and renders appropriate Agility CMS Page Modules (as React components).
This starter uses Tailwind CSS, a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
It also comes equipped with Autoprefixer, a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you.
To start using the Agility CMS & Gatsby Starter, sign up for a FREE account and create a new Instance using the Blog Template.
- Clone this repository
- Run
npm installoryarn install - Rename the
.env.development.examplefile to.env.development - Retrieve your
GUID&API Keys (Preview/Fetch)from Agility CMS by going to Settings > API Keys.
How to Retrieve your GUID and API Keys from Agility
When running your site in development mode, you will see the latest content in from the CMS.
yarn installyarn startorgatsby develop
npm installnpm run startorgatsby develop
To clear your content cache locally, run gatsby clean
When running your site in production mode, you will see the published from the CMS.
yarn buildorgatsby buildyarn serveorgatsby serve
npm run buildorgatsby buildnpm run startorgatsby serve
The easiest way to deploy a Gatsby website to production is to use Gatsby Cloud from the Gatsby team. Gatsby Cloud is a platform that gives your Gatsby website superpowers! With intelligent caching and incremental builds, Gatsby Cloud takes the speed and performance of your Gatsby website to another level.
Deploy your site to Gatsby Cloud
- To create a new Page Module, create a new React component within the
src/components/agility-pageModulesdirectory. - All of the Page Modules that are being used within the site need to be imported into the
indexfile within thesrc/components/agility-pageModulesdirectory and added to theallModulesarray:
import RichTextArea from "./RichTextArea";
import FeaturedPost from "./FeaturedPost";
import PostsListing from "./PostsListing";
import PostDetails from "./PostDetails";
import Heading from "./Heading";
import TextBlockWithImage from "./TextBlockWithImage";
const allModules = [
{ name: "TextBlockWithImage", module: TextBlockWithImage },
{ name: "Heading", module: Heading },
{ name: "FeaturedPost", module: FeaturedPost },
{ name: "PostsListing", module: PostsListing },
{ name: "PostDetails", module: PostDetails },
{ name: "RichTextArea", module: RichTextArea },
];
- To create a new Page Template, create a new React component within the
src/components/agility-pageTemplatesdirectory. - All of the Page Template that are being used within the site need to be imported into the
indexfile within thesrc/components/agility-pageTemplatesdirectory and added to theallTemplatesarray:
import MainTemplate from "./MainTemplate";
const allTemplates = [
{ name: "MainTemplate", template: MainTemplate }
];
To link to internal pages, use the Link component from gatsby.
import { Link } from 'gatsby';
// where post.path is the url path
<Link to={post.path}>
{post.title}
</Link>
In the agilitycms-gatsby-starter, we resolve Linked Content by using Gatsby Resolvers.
Resolvers are added to your gatsby-node.js in your site, and they allow you to add a new field to your content node which will handle resolving your Linked Content reference.
This means you are telling GraphQL, when you query a specific property on a node, it will actually run a function to go and get your Linked Content and return it.
An example of this can be found here in this starter site:
// gatsy-node.js
const agility = require('./src/agility/utils')
const resolvers = {
// on the 'agilityPost' node type
agilityPost: {
// get the sitemap node that represents this item ( i.e. /blog/my-blog-post )
sitemapNode: agility.getDynamicPageItemSitemapNode(),
// get the category
linkedContent_agilityCategory: agility.getLinkedContentItem({
type: "agilityCategory",
linkedContentFieldName: "category",
}),
},
}
createResolvers(resolvers)
}
Previewing content prior to publishing is crucial for Editors. You can set up and configure Previews to work with Gatsby Cloud so editors can preview content as their making edits within Agility CMS.
Set up Preview with Gatsby Cloud
If you have feedback or questions about this starter, please use the Github Issues on this repo, join our Community Slack Channel or create a post on the Agility Developer Community.