Introduction to Gatsby and Agility CMS

Follow

 Agility CMS now integrates with Gatsby Cloud!

Get started with fast previews, incremental builds, and deployment integrations.

Building a Gatsby site with Agility CMS provides a best-in-class experience for editors and developers to create blazing-fast websites.

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

Our integration with Gatsby is the only one that will not only source your content but also generate your pages for you. This leaves developers to build UI components and empowers editors to compose and manage their pages.

Gatsby's fantastic developer experience is well documented, but we believe the editor experience should come first. If you want a fast website, happy developers, and productive editors, then this is for you.

mceclip0.png

What is in this Article

Build Better User Experiences

Gatsby was designed from the ground up to improve the User Experience across the web. That means performance, SEO, and accessibility are top of mind. They have implemented many out-of-the-box techniques to give you a leg up on providing the best experience for your users.

mceclip0.png

  • Fast rendering - your website is exported to static HTML, so there's no more waiting for your webserver to piece together and render your HTML
  • Pre-fetching content - as a user scrolls through your page, content for the next page they are likely to click on is pre-loaded in the background, making that next page load that much more snappy
  • Lazy-loading images - using the gatsby-image component, it will only load images on the page that are is within the user's view
  • Optimized images - using the gatsby-image component, it will only load the appropriately sized images for the device the user is using so smaller devices will load smaller images
  • Accessible output - your website is static HTML files which are easier for screen readers to read
  • Accessibility tools - includes tools to automatically check code for best practices for accessibility

Cheap, Reliable, and Flexible Hosting

Since your website is static HTML, you don't need numerous, expensive web servers to host your website, no matter how much traffic you get! Your site is infinitely scalable and easily portable. This means you can host your website for a fraction of the cost on a number of different providers and because your site is static, it is much more reliable.

Hosting a Gatsby Site on Netlify

Hosting a Gatsby Site on AWS Amplify

Hosting a Gatsby Site on Azure

Happy, Productive Editors

With Agility CMS powering the content for your Gatsby site, you can rest easy that your editors can create and manage their pages with ease. They'll have a toolkit of UI components (modules) and page templates that developers have built for them and they'll use these to compose their pages. After changing content, they'll then be able to preview their changes in real-time in a Preview environment prior to publishing them.

Happy, Productive Developers

Gatsby developers love their job. They can use the skills they have while developing new ones and take advantage of many of the modern tools available to improve the developer experience. 

Gatsby is a framework built on top of React, currently, the most popular JavaScript framework and for good reason. It makes it easier for developers to create reliable and re-usable interactive UIs, and there is an enormous eco-system of learning tutorials, forums and code plugins targeted to helping React developers. Gatsby takes this even further and provides a structured foundation for building websites using React. The end result is that developers building websites using Gatsby are developing an important skill that brings them into the React ecosystem and can even transfer some learnings into other React-based development such as mobile apps.

Get Started Quickly

The agility-gatsby-starter is a starter template designed for developers using Agility CMS with Gatsby. Save time and effort by using this template that is already integrated with Agility CMS using best practices.

  • It's simple - it's a bare-bones template but has enough examples in it for you to follow
  • Fast preview and builds - this uses our gatsby-source-plugin which will only source content that has changed since the last time you ran the project

  Try it!

For a tutorial on how to get started, see Gatsby Tutorial

4 out of 4 found this helpful

Comments

0 comments

Please sign in to leave a comment.