Getting started with Gatsby and Contentstack

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 Code

Screenshots

Quickstart

A 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.

Prerequisites

Install Node.js on your system.
Install Gatsby CLI: npm install -g gatsby-cli

Step 1: Clone the repo

Clone the repo from GitHub. It contains all the required dependencies.

git clone https://github.com/contentstack/gatsby-starter-contentstack.git

Step 2: Install npm

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.

Step 3: Update the config file

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`
    },
  }'
]

Step 4: Create and publish content

To build a sample home page, perform the following steps in Contentstack:

Create Home content type with Title and Body fields
Create an entry for Home content type
Create a development environment
Publish Home entry to development environment

Step 5: Run Gatsby

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
    }
}

Step 6: Create page in Gatsby

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.