Building a blazing fast website with GatsbyJS and Contentful #1

Khaled Garbaya · 26K views · 2017 · 24:34

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering questions about wiring Gatsby to Contentful, such as swapping out another CMS or troubleshooting page and GraphQL query setup.

Recommended by 3 people across 3 different months, 2018 to 2018.

What it is

A 24-minute hands-on tutorial by Khaled Garbaya that takes a basic GatsbyJS starter site and converts it into a website powered by Contentful as its headless CMS. It is part 1 of a series, with source code on GitHub (branch part-1) to follow along.

What people said

Strong rec Matt · 2018-06 · Stack Overflow · on “Netlify CMS not able to update/replace image that has been optimized in Gatsby.js”

I actually just replaced my Netlify CMS with Contentful CMS (free tier). It is much easier at Contentful CMS to work with images. To do so, I viewed an excellent tutorial [this video] on setting up Gatsby with Contentful CMS.

Recommends Khaled Garbaya · 2018-01 · Stack Overflow · on “Programmatically create Gatsby pages from Contentful data”

You can create pages dynamically at build time and to do that you need to add some logic to the gatsby-node.js file. Here is a simple snippet. const path = require('path') exports.createPages = ({graphql, boundActionCreators}) => { const {createPage} = boundActionCreators return new Promise((resolve, reject) => { const storeTemplate = path.resolve('src/templates/store.js') resolve( graphql(` { allContentfulStore (limit:100) { edges { node { id name slug } } } } `).then((result) => { if (result.errors) { reject(result.errors) } result.data.allContentfulStore.edges.forEach((edge) => { createPage ({ path: edge.node.slug, component: storeTemplate, context: { slug: edge.node.slug } }) }) return }

Recommends LoopBoi · 2018-10 · Stack Overflow · on “connecting contentful CMS with gatsby page”

I ran into the same difficulties, I'm assuming you were following this youtube tutorial by khaled [this video] and try to check it out by using the default contentful Blog template like so: [LINK] Make sure you are using the CORRECT contentModelName when writing the allContentful{contentModelName} post . When using the default blog example for contentful the title shows up as "Blog Post". Just change it from "Blog Post" to "Blog" and everything should be working fine if you followed Khaled's steps and added the "new Promise" fix (which I see you already did). [LINK] Good luck!