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

Screenshots

gatsby_starter1.png
Gatsby Contentstack Starter Page 2.png

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

  3. Update the config file

    Update the gatsby-config.js file with your stack details:

    plugins: [
      {
        resolve: `gatsby-source-contentstack`,
        options: {
          // Required: API Key is a unique key assigned to each stack.
          api_key: `api_key`,
          // Required: Delivery Token is a read-only credential.
          delivery_token: `delivery_token`,
          // Required: Environment where you published your data.
          environment: `environment`,
          // Optional: CDN set this to point to other cdn end point. For eg: https://eu-cdn.contentstack.com/v3
          cdn: `cdn_url`,
          // Optional: expediteBuild set this to either true or false
          expediteBuild: `boolean_value`,
         // Optional: Specify true if you want to generate custom schema
          enableSchemaGeneration : `boolean_value`,
          // Optional: Specify a different prefix for types. This is useful in cases where you have multiple instances of the plugin to be connected to different stacks.
          type_prefix: `Contentstack`, // (default)
         // Optional: Set this to "true" if you want to download all your contentstack assets on your local machine
          downloadAssets: `boolean_value`
        },
      },
    ]
    // Note: access_token has been replaced by delivery_token
  4. Note: If you set enableSchemaGeneration to true, it will set the schema of the entries as per the content type that you created in Contentstack. In this way, we are overriding the auto schema definition of Gatsby to avoid errors which resulted due to this, previously in some cases.

  5. Create and publish content

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

    1. Create Home content type with Title and Body fields
    2. Create an entry for Home content type
    3. Create a development environment
    4. Publish Home entry to development environment
  6. 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
        }
    }
    
  7. 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.

More Resources

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

top-arrow