Gatsby starter with Contentful

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

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.

If you used Gatsby-CLI or cloned 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.

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.

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.

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.

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

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.