Deploying Website with Gatsby (using ReactJS 🙀),Contentful 🙌 and Netlify in 8 Simple Steps(finish your website as fast as you finish 😝).

ReactJS+Comtentful+GatsbyJs

This piece will walk you through getting your GatsbyJS website up and running with Contentful. Contentful makes it easy for you to focus on developing beautiful, well-performing websites while we deliver the content — this makes us a great companion to the full-fledged static content authoring experience offered by GatsbyJS.

  • Create a free Contentful account
  • Clone a sample repo => gohere :point_right (github)
  • Create a space on Contentful to store content (Contenful)
  • Generate your Content Management and Content Delivery API access tokens.
  • Import data into your space
  • Tweak your configuration file
  • Preview a production build
  • Publish and go live.

Prerequisites

This tutorial assumes that you have GatsbyJS installed and, optionally, a Github account.(obviously you have… if not no problem!!!! LetsInstallGatsbyJs and Github).

Create your free Contentful account

You will also need a free(we love free 😆) Contentful account — creating one only takes a moment and we promise contenful will welcome you as nobody does 😜(Ahaaannnn relatable).

Getting started

Start by using this with the Gatsby CLI(start the ignition):

1gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter

Alternatively, you can also clone a sample repo from Github(open new Tab

Ctrl + Shift + T):

1.1git clone git@github.com:contentful-userland/gatsby-contentful-starter.git

And go into the directory and install the required dependencies (download node_modules) with:

1.2npm install

Create a new space to store content

A Space within Contentful serves as a storage area for content that will be used in your website and can be configured to serve specific purposes. Content is described and stored using a data model which we call content types; these are entirely configurable.

Create a new empty space by opening the sidebar menu and adding a Space. Give the space an apt name and click “Create” to go ahead with making it.

Wait .. Wait .. Wait slow-down first buy Ticket for journey.

Generate access tokens

Before getting to the exciting part of setting up your website, you first need to generate three access tokens to get your Contentful-powered website up and running by fetching data from the API.

Head over to your Space Settings dropdown menu and navigate to the APIs section. From there, navigate to the tab for the API token you would like to generate.

The Content Management API is used for write access to your space, so keep the generated token safe and private. Hit “Generate Personal Token”, give it a name and click “Generate”. Copy the token value and keep it safe and private — this is the only time you’ll be able to view it in your dashboard.

The Content Delivery API provides read-only access to your data and is one of the ways we deliver content to your website. Content is served via our Content Delivery Network (CDN). Click “Add API key” in the Content Delivery/Preview tab area.

Grab the Space ID and personal Content Delivery API access token — you’ll need this in a bit.

The Content Preview API works much like the Content Delivery API, except it shows content internally for you to preview and hence does not use the CDN to serve content; since viewing is only limited to you, the previewing user. Creating an API key is the same here as you did with Content Delivery.

Content model and configuration

Start setting things up with the npm run setup command, which first prompts you for the ID of the empty Space you just created along with the API access tokens for Content Management, Content Delivery, and Content Preview.

After that, it writes the credentials you provided into a file named .contentful.json into lines of code that look like so:

{  
"development":{
"host":"preview.contentful.com",
"spaceId":"...",
"accessToken":"..."
},
"production":{
"spaceId":"...",
"accessToken":"..."
}
}

Using the credentials in the .contentful.json file, content can now be imported into your space to being displayed on your website via our API.

Deployment

Go to your GitHub and create a new repo(already taught you how to make repo) called gatsby-contentful-blog-starter, then follow the commands for pushing to an existing repository.

$ git add .
$ git commit -m 'initial commit'
$ git remote add origin git@github.com:YOUR_GITUHB_USERNAME/gatsby-contentful-blog-starter.git
$ git push -u origin master

ith your code pushed to GitHub, head over to Netlify and create an account. In your dashboard click on’New site from Git, select GitHub as a provider and go through the authorization process selecting whatever options you feel comfortable with.

Next, select a repo from the list provided. if you can’t find the repo we just created, select Configure the Netlify app on GitHub. This will open a popup allowing you to choose the repo you want to authorize for use with Netlify. Follow the prompts till you find the repo. After selecting our blog project, you’ll be redirected to the Netlify deploy screen and you should now be able to select the gatsby-contentful-blog-starter repo. As you can see, Netlify knows how to build Gatsby sites so you can just click the Deploy Site button at the end of the page.

Netlify runs Gatsby sites really easy with minimal configuration. Your new site should be ready in a few minutes.

On Netify click on Site Settings and then in the left menu, select Build & Deploy. Look for the Add build hook button and click on it, giving the build hook a name (I am using “contentful”) and then click on Save.

Now copy the buildhook url and go back to your Contentful dashboard. Hit the settings dropwdown and select Webhooks. The Webhooks screen already has a template for Netlify in the bottom right. Click on this.

In the form that appears, add the Netlify build hook url and click Create Webhook.

Now go back to the Content page and add a new blog post. As soon as you hit publish, Contentful will make an API call to the build hook you provided. This will in turn, cause Netlify to redeploy your site. Gatsby will pull in the Contentful data all over again, which now includes the new post you added, and create a new page based on the new blog post.

Your 8 Step and 5 Minutes are done, as promised your website is ready.

Now You can Finally showoff” 😍

— Shikher Mishra

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store