Building Hoist (ep 2) - Integrating Sanity's Headless CMS with Gatsby
Sanity's Headless CMS is a perfect match for Gatsby, with easily extensible content types, powerful image resizing functionality, and more. In this episode, we'll sign up for a new Sanity account, configure some content types and add content items. We'll then walk through the process of pulling that content in during Gatsby's build process to generate new pages, as well as displaying content as elements in existing pages. Finally, we'll look at the Image URL module from Sanity, that allows us to define preferred dimensions for images, and let Sanity ensure that the most interesting part of the image is never cropped out.
Sign up for a Sanity account here: https://www.sanity.io/
Want to jump to a particular part of this episode? Let me help you with that:
00:00 Welcome!
00:30 Update on the state of the web application and intro to the Hoist Community forum
02:02 Intro to Sanity's Headless CMS
03:30 Setting up the initial Dataset using the Sanity CLI
07:45 Configuring a "Program" content type in Sanity
12:15 Adding content via Sanity Studio
15:55 Defining a hotspot-enabled Sanity Image content type
19:35 Uploading images and seeing the hotspot editor in action
23:32 Adding Sanity to React
26:16 Why we add the dotenv module to pull in environment variables
27:46 Creating a Sanity token and getting other configuration values
29:43 Generating Program pages from Sanity documents during the Gatsby build process
37:08 Creating a template component with GraphQL support
47:18 Filtering and listing Sanity documents for display in a standard Gatsby page
53:40 Adding Sanity's image-url module to Gatsby for smart image resizing
1:01:34 Configuring a subscription "Plan" content type in Sanity
1:04:47 Generating Plan pages from Sanity documents during the Gatsby build process
1:11:08 Recap and closing
--
Building Hoist focuses on the development journey of a platform designed to help everyone fund effective climate change programs with a single payment.
Episode 1: Gatsby and the Auth0 React SDK (https://ben.sc/hoist-ep1)
Episode 2: Integrating Sanity's Headless CMS with Gatsby (https://ben.sc/hoist-ep2)
Episode 3: Creating a Node.js Express API that can talk to the Auth0 Management API (https://ben.sc/hoist-ep3)
Follow the live development stream: https://ben.sc/twitch
Follow me on Twitter - https://ben.sc/twitter
--
A big shout out to Auth0 (https://ben.sc/auth0) who allow me to create these videos as part of my work. Hoist isn't an Auth0 product, but they're keen on seeing it succeed, and hopefully even using it someday!