Gatsby Contentful tutorials: A four part video series

Published on February 28, 2018

GatsbyJSxContentful Khaled

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.

Many of you have been asking about the best way to build a static site with Contentful. And while we don’t like to play favorites, we do have a recommendation for how you can get going with Contentful and Gatsby, a static site generator for React.

One of our JavaScript ecosystem developers, Khaled Garbaya has released a 4-part tutorial video series to help you build a “blazing fast” website with Gatsby and Contentful. The series begins by transforming the Gatsby’s getting started example to a Contentful-powered site. From there, each video walks you through a new aspect of production, from automating deployment with CircleCI to integrating the Contentful webhooks feature.

-“I wanted these videos to act as documentation,” says Khaled. -“There were a lot of people asking around about how to do this. And I think it’s important to show not only how to do this thing with Gatsby or how to do that with Contentful, but from start to finish how you can actually deploy, use webhooks, and so on. These are hidden gems that not everyone will look for.”

Those hidden gems Khaled is talking about, those are part of what he believes makes Gatsby and Contentful a compelling combination. Additionally, there are structural aspects of both platforms that add to this: -“Gatsby works with React and React is component-based. And you can also think of Contentful in this way, if you think of your content as components” he explains. -“So that’s made a really perfect match because you can have this component that renders a specific content type and then this can be shared across your website.”

Another unique distinction is the complementary ways Contentful and Gatsby process data. -“Contentful has the sync endpoint, so this can actually improve the ability to process a lot,” Khaled says. -“Because the first time, you get all of the data. The next time, you only get the entries that changed so it takes less time to parse the JSON and so on. Also Gatsby is good because all of the data you have from Contentful would be in a GraphQL schema, so you can query your data that way.”

Ready to dive in? All four parts of Khaled’s Gatsby video tutorial series are now available on YouTube. You can also find the source code on GitHub.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL8KiuH6vpACV-F7jXribe4YveGBhBeG9A" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Additionally, we also have a gatsby-contentful-starter repo for you to clone to get your first Contentful and Gatsby-powered blog up and running in no time.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.

Related articles

Illustrated image showing how rich text is rendered with JS
Guides

How to build a CMS using JavaScript with Contentful

November 29, 2022

What is GraphQL? This article explains GraphQL, how it is different from REST, and how you use a GraphQL API to fetch data for your frontend applications.
Guides

What is GraphQL? What a GraphQL API is and how to use it

December 13, 2021

Vue and React are both popular JavaScript UI frameworks. We cover their similarities and differences, discussing which is best for different use cases.
Guides

Vue vs. React: Which JavaScript UI framework is best?

July 18, 2024

Contentful Logo 2.5 Dark

Ready to start building?

Put everything you learned into action. Create and publish your content with Contentful — no credit card required.

Get started