DEV Community

loading...
Cover image for How to Build a
JAMStack Website
with Agility CMS and Gatsby

How to Build a JAMStack Website with Agility CMS and Gatsby

Anil Kaundal
Don't ask what the world needs, ask what makes you come alive. Because what the world needs most, is more people who come alive.
・2 min read

What is JAMStack?

JAMStack is a Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

JAMStack

Agility CMS

Agility CMS is a headless Content Management System that provides a best-in-class editor experience.

Currently, I am redesigning my personal site using gatsby as a client and agility as my headless CMS. It's easy to integrate, and they also provide a webhook. So, when you update the contents it would trigger a build for the front-end as well.

Agility Gatsby Starter

Repo URL: https://github.com/agility/agility-gatsby-starter

Using that repo you can start a gatsby project sourcing data from agility CMS. Make sure gatsby CLI is installed on your machine.

Pre-requisite: Sign up for a free Agility CMS account using the Blog Template.

Let's get started

1. Install the project locally

git clone https://github.com/agility/agility-gatsby-starter
Enter fullscreen mode Exit fullscreen mode

2. Install node dependencies

cd agility-gatsby-starter
npm install

3. Rename .env.development.example to.env.development

.env.development

Your Instance Id
AGILITY _GUID=
// Your Preview API Key (recommended) - you can get this from the Getting Started Page in Agility CMS. It starts with default preview.

AGILITY _API_KEY=
// If using your Preview API Key, set this to true
AGILITY _API_ISPREVIEW=true
Enter fullscreen mode Exit fullscreen mode

Notes: You will get the API Key and GUID after you have the agility CMS account

4. Start the Gatsby Dev Server

npm start
Enter fullscreen mode Exit fullscreen mode

BTW, the design comes from the starter project so I haven't
touched the layout yet. Now, I am gonna style the site first :D

Agility Gatsby Starter

What's next ?

Learn how to deploy the site to Gatsby Cloud
https://www.gatsbyjs.com/docs/agility-cms/getting-started/
Connecting to Agility

Thank you for reading!! 🐉 Let me know your thoughts in comments.

Discussion (0)