Build a Starter Website with Gatsby and Contentstack

Gatsby is a framework to build static websites. This Gatsby starter website guide will help you to build a website using Gatsby and power its content from Contentstack.

The contentstack-gatsby plugin will ease the process of storing and delivering content to the Gatsby starter website from Contentstack.

Screenshots

homepage.png
about-us.png

Prerequisites

  • Contentstack account
  • Node.js version 12 or above
  • Gatsby CLI: npm install -g gatsby-cli
  • Contentstack CLI: npm install -g @contentstack/cli

Note: For this tutorial, we have assumed that you are familiar with Contentstack and Gatsby. If not, please refer to the Contentstack docs and Gatsby docs for more details.

Set Up Your App

Here is an overview of the steps involved in setting up the Gatsby starter app:

  1. Set the Region
  2. Login to your Account
  3. Import Content
  4. Create Delivery Token
  5. Build and Configure the Website
  6. Deploy the Website
  1. Set the Region

    By default, the CLI uses the North America endpoint. To use the European endpoint, run the following command in your terminal (command prompt):

    csdx config:set:region EU
  2. Login to your Account

    To import content to your stack, first, you’ll need to log in to your Contentstack account via CLI by running the following command in your terminal:

    csdx auth:login

    This command will ask you to provide your Contentstack’s account credentials (email and password)

  3. Import Content

    The ‘seed’ command lets you import content to your stack in a few steps. To do so, run the following command in your terminal:

    csdx cm:seed -r "contentstack/stack-starter-app"

    This command will prompt the following options as follows:

    • Organization name: You’ll get a list of organizations to which you have access. Select the one from the list where your source stack is located or where you want to create a new stack.
    • Stack preference: Next, you need to select your choice to create a new stack:
      • If you select Yes, you’ll receive a list of organizations to which you belong. Then, choose an organization where you are either an owner or admin to create the new stack, and then enter a name for your stack.
      • If you select No, you need to choose the organization where the destination stack exists and select that particular stack where you have the specific permissions for importing content. Refer to the Stack Roles documentation to learn more about permissions.

    Tip: To avoid the chances of any error, we recommend that you select the option of creating a new destination stack. If you choose to import content to an existing stack, ensure that the stack is empty.

    Finally, you’ll get the content imported to your stack.

  4. Create Delivery token

    A delivery token lets you fetch published content of an environment.

    You can create a delivery token for the “development” environment for running the website on localhost. Later, while deploying your site, you can create tokens for other environments.

  5. Build and Configure the Website

    Download the website code.

    Navigate to the root folder, create a configuration file named .env.development, and provide your credentials:

    API_KEY = <api_key_of_your_stack>
    DELIVERY_TOKEN = <delivery_token_of_the_environment>
    ENVIRONMENT = <publishing_environment_name>
    CDN = https://eu-cdn.contentstack.com/v3 // Compulsory param for EU users. NA users need not add this param.
    CUSTOM_HOST= <URL_where website is hosted> //Optional. Use this for updating URL in sitemap.xml page.

    Note: To use the European region, set CDN= https://eu-cdn.contentstack.com/v3.

    Fire up your terminal, point it to your project location, and run the following commands:

    npm install
    npm run develop

    That’s it!

    You can now view the website at http://localhost:3000. And you also have the stack that has all the content and resources for the website. Try experimenting by creating new entries and publishing on the “development” environment. You should be able to see the changes on the website at the localhost.

  6. Deploy the Website

    The easiest and the quickest way to deploy a Gatsby website on production is to use Vercel. You need a Vercel account before you start deploying.

    Note: During deployment, to use the Europe region, add an environment variable CONTENTSTACK_CDN and set its value to https://eu-cdn.contentstack.com/v3

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^