post-image
Gatsby.js

Gatsby And Contentful – The Headless CMS Approach


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

ONLINE COURSE: The Complete React Web App Developer Course

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

  • You’ll learn how to develop, test, and deploy React web applications
  • Learn how to setup and automate testing using Karma and Mocha
  • Understand the rich ecosystem of 3rd-party libraries like Redux and Webpack
  • Learn to style applications using the Foundation framework
Go To Course

Using and writing about best practices and latest technologies in web design & development is my passion.