Contentstack Demonstrates 295% ROI as Part of New Go Composable Initiative295% ROI with ContentstackRead more
cs-icon.svg

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.

Prerequisites

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.
Make sure to use Gatsby version 5 or above.

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

    To use the North AmericanEuropean, or Azure North American endpoint, run the following command in your terminal (command prompt):

    csdx config:set:region <<region>> 
    
    

    Note: - For North American users, set the region as NA.
    - For European users, set the region as EU.
    - For Azure North American users, set the region as AZURE-NA.

    Note: For more details on setting the region, refer to Configure Regions in the CLI.

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

    Note: Currently, Contentstack does not support strict SSO for CLI authentication. To access CLI from strict SSO-enabled organizations, go to the Organization Settings and change the SSO strict mode to a user-by-user basis. Once done, you can enable it for certain developers or create a developer account that you can share with developers to access the CLI. For more login details, refer to CLI Authentication and Adding Tokens.

  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

    Fire up your terminal, navigate to your project folder, and run the following command to create a configuration file named .env.development.

    cp .env.sample .env.development
    

    Note: If you are a Windows user, replace cp with copy in the command given above.

    The .env.development file contains all the necessary config parameters. Open it in any code editor or IDE of your choice, provide your stack credentials, and save the file.

    Note: The below code is for North America region users only. Refer the configuration code for European region and Azure North American region on the regions configuration page.

    CONTENTSTACK_API_KEY = <api_key_of_your_stack>
    CONTENTSTACK_DELIVERY_TOKEN = <delivery_token_of_the_environment>
    CONTENTSTACK_ENVIRONMENT = <environment_name>
    CONTENTSTACK_API_HOST = api.contentstack.io
    

    Mandatory configuration parameters to enable Live Preview

    CONTENTSTACK_MANAGEMENT_TOKEN = <management_token_of_the_environment>
    CONTENTSTACK_APP_HOST = app.contentstack.com 
    CONTENTSTACK_LIVE_PREVIEW = true 
    #By default the live preview feature is enabled for this project. To disable it, set "CONTENTSTACK_LIVE_PREVIEW= false".
    CONTENTSTACK_LIVE_EDIT_TAGS = false 
    #By default live editing tags are disabled for this project. To enable it, set “CONTENTSTACK_LIVE_EDIT_TAGS= true”.
    

    Note: Make sure your management token has READ permission only.

    Additional Resource: Go to our Live Preview documentation to learn more about the Live Preview feature in Contentstack.

    Run the following commands in your terminal:

    npm install --legacy-peer-deps
    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.

    Set up Live Preview (Optional)

    Note: In order to use Live Preview, your plan must include this feature. Check our pricing page for more details. 

    The next step is to set up and enable live preview for your website. Follow the steps below to set up live preview feature for your website:

    1. Navigate to the Live Preview section in your stack's “Settings”.
    2. Select the Enable Live Preview checkbox.
    3. Now, select a preview environment and preview URL for previewing live content of your website. Finally, Save your settings. 

    This completes your live preview set up. Now, you can deploy the website using Vercel.

  6. Deploy the Website

    You can deploy this Gatsby website on production using Vercel platform.

    Deploy to Vercel

    To deploy a Gatsby website on production using Vercel, you need a Vercel account.

    Note: While deploying the starter website to Vercel, make sure to enable/ disable the Live Preview environment variable as per your requirement.

Was this article helpful?
^