Gatsby is a blazing fast static site generator. This example web page is built using the 'gatsby-source-contentstack' plugin and Contentstack. It uses Contentstack to store and deliver the content of the website.
View CodeA starter project for building websites using Contentstack and Gatsby
This is a quick, step-by-step starter guide to help you create a sample web page using Contentstack and Gatsby.
Clone the repo from GitHub. It contains all the required dependencies.
git clone https://github.com/contentstack/gatsby-starter-contentstack.git
Go to the gatsby-starter-contentstack folder, and run the following:
cd gatsby-starter-contentstack npm install
This downloads the required files and initializes the site.
Update the gatsby-config.js file with your stack details:
plugins: [{ resolve: `gatsby-source-contentstack`, options: { api_key: `api_key`, access_token: `delivery_token`, environment: `environment` }, }' ]
To build a sample home page, perform the following steps in Contentstack:
Navigate into your root directory and run the following command:
gatsby develop
After running this, you will be able to view your site at http://localhost:8000/. You can run the GraphiQL IDE at http://localhost:8000/___graphql. The GraphiQL IDE will help you to explore the app's data, including Contentstack APIs.
Now, you will able to query Contentstack data. Try the query given below to get 'Home' content type data:
{ contentstackHome { title body } }
Go to the pages folder inside the src folder, and create a home.js file. Add the code given below in it.
import React from 'react' export default ({ data }) => { return ( <div> <h1>{data.contentstackHome.title}</h1> </div> ) } export const pageQuery = graphql` query HomeQuery { contentstackHome { title } } `
This will display the title of your home page on http://localhost:8000/home. Likewise, you can query more fields of your entry.