search

agility / agility-gatsby-starter

A sample GatsbyJS website using the Agility CMS Gatsby source plugin
https://agility-gatsby-starter-gatsbycloud.netlify.com/
MIT License
26 stars 12 forks source link

readme

Gatsby Gatsby

Gatsby + Agility CMS

This repo is released under the MIT license. code style: prettier

Netlify Status Azure Static Web Apps CI/CD

Want to learn about why Agility CMS + Gatsby? is a match made in heaven?

This project is meant to be used with our Blog Template, and is a great starting point to get a Gatsby project up and running quickly with Agility CMS as the Content Management System.

Features

  1. Gatsby V3 - The latest version of Gatsby’s core framework which introduces massive improvement to the developer and user experience.
  2. 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.
  3. Agility CMS Gatsby Source Plugin - 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.

Preview Site (Gatsby Cloud): https://agility-gatsby-starter-5854363761.gtsb.io/

Production Site (Netlify): https://agility-gatsby-starter-gatsbycloud.netlify.com/

Documentation

Learn how to get started with Gatsby and Agility CMS

Table of contents

Getting up and running

Pre-requisite: Install the Gatsby CLI

npm install -g gatsby-cli

Additional information for getting started with Gatsby

Pre-requisite: Sign up for a Free Agility CMS Account

Sign up for a free account using the Blog Template.

Retreive your Agility CMS API Credentials

After signing up for a free account and logging into Agility CMS, click on the Get API Keys button on your dashboard.

API Key Details

Take note of your GUID and your Live API Key and Preview API Key. Copy these somewhere temporarily, or refer back to this screen when you begin to Configure your local environment.

API Key Details

Clone this repo to your local machine

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

Install Node dependencies

With NPM

cd agility-gatsby-starter
npm install

Configure your local environment

Rename ./.env.development.example to ./.env.development

cp .env.development.example .env.development

Add your development AGILITY_GUID and AGILITY_API_KEY variable values in .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 defaultpreview.
AGILITY_API_KEY=

# If using your Preview API Key, set this to true
AGILITY_API_ISPREVIEW=true

Rename ./.env.production.example to ./.env.production

cp .env.production.example .env.production

Add your production AGILITY_GUID and AGILITY_API_KEY variable values in .env.production

# Your Instance Id
AGILITY_GUID=

# Your Live API Key (recommended) - you can get this from the Getting Started Page in Agility CMS. It starts with defaultlive.
AGILITY_API_KEY=

# Since you won't want to preview here, set this to false
AGILITY_API_ISPREVIEW=false

Start the Gatsby development server

Once the above steps are done, you can launch your local development server:

With NPM

npm start

How to build a production version of your project and test it

It's good practice to build a production version and test it locally before publishing it or doing a pull request into master. Here's how to do it:

With NPM

npm run build
npm run serve

Deploy

Deploy with Vercel

☝️ Deploy this starter repo in just minutes with Vercel. It will prompt you to enter your AGILITY_GUID, AGILITY_API_KEY, and AGILITY_API_ISPREVIEW.

Deploy to Netlify

☝️ Deploy this starter repo in just minutes with Netlify. You'll need to add your Agility CMS AGILITY_GUID, AGILITY_API_KEY, and AGILITY_API_ISPREVIEW variables in Netlify's Site settings > Build & deploy > Environment section.

gatsby-config.js

You'll want to take a peek under the hood at some point and take the starter's configuration for Gatsby further. To get a better understanding of the options, please visit GatsbyJS Source Plugin for Agility CMS on GitHub for documentation.

What is Agility CMS? What makes it different?

Agility CMS is a headless Content Management System (CMS) that lets you define your custom content types, relationships and pages. This is called Content Architecture, and you can reuse this content for your websites and apps.

Agility believes that a successful website balances the User Experience (UX), Editor Experience (EX), and Developer Experience (DX).

While Gatsby tends to handle UX and DX quite well, too often editors are an after-thought in Gatsby (and other JAMstack) websites. They feel constrained by not being able to manage their sitemap and what content is on which pages.

Agility aims to empower and improve the Editor Experience by providing built-in Page Management. This means developers can build UI Components and leave editors to compose their pages.

Learn more about Agility CMS and Gatsby

Resources

Agility CMS

GatsbyJS

Prettier

Community

Roadmap

See the open issues for a list of proposed features (and known issues).

Code of conduct

See CODE OF CONDUCT for more information.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Thank you to all of you who have contributed to agility-gatsby-starter!

🎉🤘💖🖖

License

Distributed under the MIT License. See LICENSE for more information.