gatsby-tutorials (20 Part Series)
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.
We will get to add data in the next screen.
Let’s add some content about our first place in Hampi.
For adding image, we select the image and then hit the Publish button first.
I had added two images, so it will show as below.
Now, publish it on the main screen by clicking the Publish button.
Now, it will show an item in the Content screen.
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.
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.
Next, in gatsby-config.js we had to add the plugin. Now, as per the docs let’s add the object.
Now, let’s get our API keys from contentful. In contentful API, click on Settings -> API Keys.
Seems, like there is already a key created for the first time.
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.
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.
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.
Let’s go to our graphql and refresh the browser. Now, click on docs and we can see contentful queries.
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.
Now, as per the docs we need to add the below lines in our gatsby-config.js
Now, we need to create a .env.development file in the root directory.
Now, in the .env.development file take the keys from gatsby-config.js and add them without quotation marks in two variables.
Next, in gatsby-config.js add this by process.env
Now, head over to .gitignore and add the .env.development file in it.
Once again head over to the terminal and run gatsby develop, to check if all runs well.
Now, before pushing to github we need to add these variables in our netlify also. So, head over to your netlify deployment.
Click on the big Site Settings button. The on the left menu click on Built & deploy and then Environment.
Now, click on the Edit Variables and add our two variables. After that click on Save.
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.