Alt Text

Welcome to part-10 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

It’s time to add some content. So, head over to Content tab. You will see the below screen. Click on the big Add amazing-hampi-data button.

Amazing Hampi DataAmazing Hampi Data

We will get to add data in the next screen.

Adding dataAdding data

Let’s add some content about our first place in Hampi.

Adding contentAdding content

For adding image, we select the image and then hit the Publish button first.

PublishPublish

I had added two images, so it will show as below.

Two imagesTwo images

Now, publish it on the main screen by clicking the Publish button.

PublishedPublished

Now, it will show an item in the Content screen.

ContentContent

Next, i will add some more content about the places to visit in Hampi. I will follow the same step. You can take the data from the github code or take it from the website, after a few tutorials.

I had added entries about 22 places in contentful.

ContentContent

Next, we will import these data in our site. For this we will install the plugin gatsby-source-contentful. The docs for the same can be found here.

As usual, we need to first npm install in our project directory.

npm install --save gatsby-source-contentful

So, head over to project directory and stop gatsby develop and npm install.

npm installnpm install

Next, in gatsby-config.js we had to add the plugin. Now, as per the docs let’s add the object.

contentful objectcontentful object

Now, let’s get our API keys from contentful. In contentful API, click on Settings -> API Keys.

APIAPI

Seems, like there is already a key created for the first time.

Example Key 1Example Key 1

Once, we clicked on Example Key 1 in the above screen, we can edit the name of the key. We need to note our Space ID and Content Delivery API — access token from here.

Space IDSpace ID

Now, head over to your code and these two. We are not going to keep them here and soon move them to environment variable, as we don’t need to push these key’s to GitHub and have everyone see them.

Gatsby ConfigGatsby Config

Let’s head over to our terminal to check whether the setup was right, by running gatsby develop.

Our command ran without any error and we also got the connection fetching correct data from contentful.

ContentfulContentful

Let’s go to our graphql and refresh the browser. Now, click on docs and we can see contentful queries.

GraphQLGraphQL

Next, we will use environment variables to put the spaceId and accessToken in it. For that we need to install dotenv package. So, head over to your terminal and stop gatsby develop and npm install the package.

npm installnpm install

Now, as per the docs we need to add the below lines in our gatsby-config.js

dotenvdotenv

Now, we need to create a .env.development file in the root directory.

.env.env

Now, in the .env.development file take the keys from gatsby-config.js and add them without quotation marks in two variables.

VariablesVariables

Next, in gatsby-config.js add this by process.env

process.envprocess.env

Now, head over to .gitignore and add the .env.development file in it.

.gitignore.gitignore

Once again head over to the terminal and run gatsby develop, to check if all runs well.

gatsby developgatsby develop

Now, before pushing to github we need to add these variables in our netlify also. So, head over to your netlify deployment.

netlifynetlify

Click on the big Site Settings button. The on the left menu click on Built & deploy and then Environment.

DeployDeploy

Now, click on the Edit Variables and add our two variables. After that click on Save.

EnvEnv

Now, commit your code and push it to github. You can find my code in my github account here.

Also, because of the continuous deployment it got sucessfully pushed to netlify site.

This completes part-10 of the series.

This post is also available on DEV.