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.

ONLINE COURSE: Gatsby - Static Site Generator For React - Complete Guide 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 During the course sections you’ll learn: Use Gatsby to create ultra-fast static websites with React and GraphQL

Working with pages, components and assets

Apply styling in Gatsby by using global styles, CSS modules, or styled components

Understand Gatsby’s built-in data layer and make use of GraphQL

Retrieving data by using Static Queries and Page Queries

Use Gatsby’s plugin system

Use source plugins to connect to data sources

Use transformer plugins to bring data into the right format

Programmatically create pages

Working with images in Gatsby

Building the Gatsby site for production and deployment

and much more … Go To Course