Contentful + Gatsby

Build your first Gatsby website with Contentful. The combination of Gatsby with a headless CMS like Contentful provides an increase in performance optimization, faster build times and greatly improves the developer experience.

What is Gatsby
Gatsby is a static site generator that allows you to connect your web projects to a variety of APIs and data sources; including Contentful’s content platform.
1
Create an account

Create your Contentful account by signing up. After sign up Contentful will automatically create a new empty space for you.

2
Start with the Gatsby CLI

Copy
npm install -g gatsby-cli

Copy
gatsby new contentful-starter https://github.com/contentful/starter-gatsby-blog

Alternatively, you can also clone a sample repo from GitHub:

Copy
git clone git@github.com:contentful/starter-gatsby-blog.git

3
Navigate to project folder

If you used gatsby-cli

Copy
cd contentful-starter

and if you used github clone

Copy
cd starter-gatsby-blog

4
Start setting things up with

Copy
npm run setup

You will need your Space ID, Content Delivery API token & Content Preview API token. You can find these in the Contentful app in Settings under API Keys. Click on Add API key to generate the tokens. 

You will also need to create a Content Management API token. Avoid sharing this token because it allows both read and write access to your Contentful space. Once token is generated copy key and save remotely as it will not be accessible later on. If lost a new one must be created.

5
Add Space ID and API tokens

Back in the terminal add Space ID, Content Management API token, Content Delivery API token. After npm run setup has completed a sample content model has been imported into your Contentful app.

6
Now start the development server

And navigate to localhost:8000

Copy
nmp run dev

At this point you can now edit the content in the Contentful starter. You will have restart the development server to fetch the new content from your Contentful space.

7
Ready to Deploy

Copy
npm run build

8
Deploy with Netlify

Gatsby integrates easily with Netlify and can be deployed from the command line by running these commands. You will have to create an account with Netlify to proceed.

Copy
npm run netlify:login

Copy
npm run netlify:deploy

And now your site is live. Happy building!

Configuring Gatsby v3 with Contentful

Gatsby and Contentful in 5 minutes

Get started with Contentful and Gatsby CLI

More than a CMS: The API-first content platform for your tech stack
Build for free
Curious guy
add-circle arrow-right remove style-two-pin-marker subtract-circle