Contentful and Gatsby Starter

Build your first Gatsby starter 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 React static site generator that allows you to connect your web projects to a variety of APIs and data sources. Contentful can be used with many programming languages, including JavaScript, so it is a great option to pair with Gatsby.
1
Create an account

Sign up for a Contentful account. Once you do so, a new space will automatically be created.

2
Start with the Gatsby-CLI

Create a new Gatsby project using the homepage starter template.

Alternatively, you can clone the homepage starter repo from GitHub:

This open-source Gatsby homepage starter provides a homepage with a pre-built content model and uses our GraphQL API for data retrieval that’ll help you get started in minutes.

3
Navigate to project folder

If you used Gatsby-CLI or cloned the starter:

4
Setting up the starter

or

You’ll need your Space ID and Content Delivery API token. To find these in the Contentful app, click Settings then API keys. To generate the tokens, click on Add API key.

You’ll also need to create a Content Management API token. This token allows both read and write access to your Contentful space so you’ll want to keep it private. Once the token is generated, copy the key and save it remotely as it will not be accessible later on. If the token is lost, a new one must be created.

5
Add Space ID and API tokens

In the terminal, add your Space ID, Content Management API token, and Content Delivery API token. Once the setup command executes successfully, a sample content model and content will be imported to your Contentful app.

6
Start the development server

or

Navigate to localhost:8000

Now you can customize the starter template. Feel free to make changes by modifying the CSS styles or editing the content model. For examples of how to structure project data, check out our content modeling docs. When you’re ready to fetch new content from your Contentful space, restart the development server.

7
Push to GitHub

Create a new repository on GitHub, GitLab, or Bitbucket and add it as the origin.

Commit the changes and push the code to the new repository.

Replace <REPO URL> with the git repository URL.

8
Create a Gatsby Cloud account

Create a Gatsby Cloud account and connect it with your GitHub, GitLab, or Bitbucket account.

9
Deploy with Gatsby Cloud

Login to your Gatsby Cloud account and click Add a site.

Under the Import from a Git repository, select the Git provider where you have hosted the repository.

Then, select the repository and click Import. In the Basic Configuration section, click Next.

Under the Suggested integrations section, click Connect and connect your Contentful space. This will configure the build webhook and create new environment variables in Contentful.

In Gatsby Cloud, configure the newly created environment variables, and click Build site. If the build is successful, your site will go live!

To really make this project your own, install your favorite Gatsby plugins or go with a different Gatsby theme. Happy building!

Creating a blog should be quick and easy. In this tutorial, Developer Advocate Brittany Walker shows you how to quickly create and deploy a Gatsby blog in 7 minutes using Contentful.

Build a blog using Gatsby and Contentful

GatsbyJS and Contentful in 5 minutes

Get started with Contentful and Gatsby CLI

Choose your technology path with our language and framework agnostic CMS

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