Gatsby And Contentful — The Headless CMS Approach

This post has been published first on CodingTheSmartWay.com.

Subscribe On YouTube

Welcome to this free six-part video tutorial on building a blog with Gatsby.js and Contentful from start to finish. In this course you’ll learn everything which is needed to get started with Contentful and Gatsby to apply the Headless CMS approach in a pratical example.


If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot!


Episode 1: Starting A New Gatsby Project And Setup Contentful

This is the first episode of the six-part “Gatsby And Contentful — The Headless CMS Approach” tutorial. In this tutorial we’ll start from scratch building a blog with Gatsby and Contentful. Contentful will be used as the headless CMS in which blog posts are stored and managed. Gatsby will be used to build the front-end layer of the blog. By connecting Contentful to Gatsby we’ll obtain blog post data directly from Contentful and Gatsby will take care of generating the corresponding blog post pages automatically!

In this first part of the tutorial series we’re going to initiate a new Gatsby project and setup the Contentful service.

Episode 2: Connecting Gatsby To Contentful

In the second episode of the six-part “Gatsby And Contentful — The Headless CMS Approach” tutorial we’re going to continue the implementation of the headless CMS Gatsby blog example from the first part. After having initiated a new Gatsby project in the and setup the Contentful service we’re now ready to connect Gatsby to Contentful by using a Gatsby source plugin.

We’ll also discover how to query data from Contentful (and made available to Gatsby by the corresponding source plugin) by using GraphQL. To execute sample queries we’ll use GraphiQL.

Episode 3: Programmatically Create Post Pages From Contentful

In the third episode of the six-part “Gatsby And Contentful — The Headless CMS Approach” tutorial we’re going to continue the implementation of the headless CMS Gatsby blog example. We’ll use Gatsby’s built-in Node.js API to progammatically create pages for blog post content which is retrieved from Contentful. Because we’ve made sure that the corresponding Contentful source plugin is installed already in the last episode we’re now ready to retrieve the needed data from Contentful by using GraphQL queries.

Episode 4: Implement The Blog Post Template

Episode 4 of the Gatsby & Contentful tutorial series includes the steps which are needed to continue the implementation of the Gatsby blog sample application by adding a blog post template component. This component is used when generating blog post pages programmatically.

Episode 5: Outputting A List Of Posts

In the fifth part of the Gatsby & Contentful tutorial series we’ll be focusing on the implementation of the output of the blog post overview page. Therefore we’ll be implementing a Gatsby component which contains the code which is needed to output post data which is retrieved from Contentful (by using a GraphQL page query) in list form.

Episode 6: Displaying Images From Contentful

The blog sample website is almost ready. In the last part of the Gatsby.js and Contentful tutorial series we’ll be completing our application and and include images in the output of each blog post page and on the blog posts overview page. Therefore we’ll use the power of Gatsby and include Images which are optimised regarding file size and resolution so that the Gatsby site is loading fast.

This post has been published first on CodingTheSmartWay.com.

You’re looking for a way to learn Gatsby.js from the ground up? Check out the great Gatsby Course with hundreds of students already enrolled. This is a CodingTheSmartWay.com course:

Gatsby Static Site Generator For React

Would like to get a profound understanding of React? Check out the great Complete React Web App Developer Course by Andrew Mead with thousands of students already enrolled:

The Complete React Web App Developer Course

If you’d like to dive deeper into JavaScript check out the following online course:

The Complete JavaScript Course: Build a Real-World Project

Disclaimer: This post contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support this blog!