There has been lot of debate going on with the static site generators due to rise of JAMStack application. Despite the debate Gatsby has been widely used and have decent numbers of stars in Github. You can find the top static generators collection here.

🔋There are number of noticeable advantage of Gatsby. Some are:

• Less configuration needed, most done out of the box.
• SEO, Speed and performance optimization.
• Great community, nice documentation and growing plugin ecosystem.
• Ultimately better developer experience.

In this article we will be covering on showing how we can set up a system for managing content on any page of our Gatsby site. We will be making use of **gatsby-node**API to pull in content from Contentful and dynamically generate pages with it. We can also use Contentful data on any existing page via graphql queries.

🏋🏽‍♂️ Setting-up Gatsby

We’ll need the gatsby-cli tool to get started. Run npm i -g gatsby in your terminal and once that has run, create a new project with the command

$ gatsby new gatsby-demo

This command will create a new Gatsby project in your desired location path. Then we can locally run the project with **gatsby develop. **Now we can see our Gatsby starter homepage is running on localhost:8000

Let’s make a minor tweak to our code and replace the following code with the following code.

Github Gist Link

Let’s move to the Pages folder and find _page-2.js _and rename it to siteposts.js. Gatsby uses files in the pages folder as route name and it will make the exported React component available on the defined route. You may be familiar to this if u have used Nuxt or Next before. This means we have a **/siteposts** route. In the meantime, let’s also change a few values inside of **_gatsby-config.js file _**as well.

siteMetadata: {
title: `My Awesome Post`,
description: `An awesome post does have some cool description.`,
author: `YOUR_NAME`,
},

This is going great till now. We have made a basic setup. We will now move ahead with creating new account inside Contentful.

#front-end-development #javascript #jamstack #gatsbyjs #javascript-tips