Content Management with Gatsby, Contentful & Netlify
BY BABS CRAIG
Follow on twitter
Gatsby, Contentful, Netlify — The Triple Threat For Content Management Success
Gatsby, Contentful & Netlify for the win!
I’ve been using Gatsby for the better part of 6 months and it’s quickly become my go-to for building static sites. The advantages are huge. You get:
A lot of configuration and boilerplate done out of the box.
Speed, SEO and performance optimizations.
A great community, great docs and a growing plugin ecosystem.
And my personal favorite — getting to write all the React & GraphQL code I want.
It’s been a great developer experience, to say the least. However, when building static sites, one of the major concerns in choosing a tool is how content gets updated on the site. Lots of older platforms have solved this one way or another, Wordpress being the most popular of them, but using the triple threat of Gatsby, Netlify, and Contentful, we can build a pretty good alternative to the traditional CMS tools out there while retaining our SEO compatibility.
This article will show you how you can set up a system for managing content on any page of your Gatsby site. In our case, we’ll be using Gatsby’s powerfulAPI to pull in content from Contentful and to dynamically generate pages. You can also use Contentful data on any existing page via the provided queries.
This is going to be a long one, so stretch your legs, grab a coffee or pick-me-up of your choice and let’s begin.
You’ll need theto get started. Run in your terminal and once that has run, create a new project with
This will create a new Gatsby project in a folder called. cd into the new project and run . Now you have the default Gatsby starter homepage:
Open up the project in your favorite text editor and navigate to the pages folder. Let's tweak some of the content in the: (You can just copy and paste this in)
Next, findand change the filename to . Gatsby uses the name of any file in the folder as a route name and will make the exported React component available on said route. This means we now have a route. We'll come back to this file later but in the meantime, let's also change a few values in the file. This file sits in the project .
Open up the sidebar and click on Create Space. Choose the free option and give your space any name. I’ll call mine gatsby-blog. Select the empty space option, click Proceed to confirmation, and confirm your options.
After confirming, on the dashboard, click either the “Create Content Type” button or the “Content Model” button in the header and fill in the form that appears. Let’s call the content type Blog Post and leave the API Identifier as is. Enter any description you’d like.
After creating the content type, we’ll start to add some fields to it “A field” is a building block for our content. If you have a blog post for instance, a few fields could be the title, the body, the tags and an image. This will generate a form that you’ll fill later on when we start to create actual blog posts. Follow the next steps to create a title field.
Click on the Add Field button to the right of the dashboard.
Select Text as the type of field you want.
In the form on the next screen, enter title as the name, then click on create.
Add another text field called body, but after selecting Text, select Long ext from the radio button on the screen below.
Add another field. Select Media as the type instead of Text and call it image.
Add a tags field by selecting Text as the type. Give it tags as a name, and then select the list option on the screen below since we will be storing a list of tags in this field.
Lastly, create a slug field. Start by selecting Text as the type and call it slug. This time, instead of clicking Create as above, click on Create and Configure. On the next screen go to the Appearance tab and select slug as the way the field should be displayed. Also, in the Validations tab select unique field to be sure that no two blog posts have the same slugs
Your content model should now look like this:
A content model is like a schema that our actual content will follow. You can create all types of models such as case studies, blog posts, product data, page content and so on.
Save your changes and click on the Content button at the top of the page and select Add Blog Post. I’m going to add three posts with placeholder data, feel free to add as many as you’d like. For images, you can grab some free, open license ones from . Notice how the field gets auto-generated as you enter the title? This will come in handy later.
Awesome! That was a lot but we’re halfway there…
At this point we have our first couple of blog posts and it’s time to bring them into our Gatsby site. For this, we’ll depend on Gatsby’s awesome GraphQL API for pulling in the data. Let’s work on that next.
Go to your settings in Contentful and click on the API Keys option in the dropdown menu. Create a new API Key and keep the details close by.
Back in your terminal, install the Gatsby plugin we need to start pulling in our Contentful data.
We’ll be using Contentful’s Content Delivery API since we want to retrieve published data only, so be sure to grab the Content Delivery API key and not the Content Preview API key.
In yourfile, add the configuration object to the array:
You should restart your development server again at this point for the new configs to kick in. When the server restarts,'s GraphQL queries will be available to use.
We can easily test if everything is working by using the GraphiQL playground that Gatsby provides for us. Open in your browser and run the query below by pasting it into the left window on the page. The query name is because our content model is called Blog Post. If we had called it Product or Case Study, then the query made available to us would have been or .
Theplugin handles all the behind the scenes fetching from the Contentful API using the keys we provided in the file. It then makes a semantically named GraphQL query available to us.
If it all works, you should see the content you added in the results window to the right of the GraphiQL window in JSON format.
Now that we have connected our Gatsby blog with our Contentful data, we can start building the pages for the blog. Gatsby provides us with a file called. This file can be used to dynamically add pages to your site. When Gatsby runs, it will look at the code here and create any pages you tell it to. In the file, let's place the following code:
This module exports a function called. This function has two parameters, Graphql, and an actions object. We extract the action then call the same Graphql query we ran in the GraphQL playground earlier. We take this result and for each result (each blog post) we call the function. This function accepts a config object which Gatsby reads when rendering the page. We set the path equal to the concatenated string plus the . Notice that we also reference a template file at , not to worry, we'll create that file soon.