Build a sample website using Gatsby and Contentstack

Gatsby is a blazing fast static site generator. This example website is built using the contentstack-gatsby plugin and Contentstack. It uses Contentstack to store and deliver the content of the website.

Screenshots

Home page.png
Blogs landing page.png

Quickstart

Here’s a quick guide on how to create this demo website using Gatsby and Contentstack.

Prerequisites

Contentstack account

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

In this tutorial, we will first go through the steps involved in configuring Contentstack, and then look at the steps required to customize and use the presentation layer.

  1. Create a stack

    Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your website. Learn more on how to create a stack.

  2. Add a publishing environment

    To add an environment in Contentstack, navigate to ‘Settings' -> 'Environment', and click on the '+ New Environment’ tab. Provide a suitable name for your environment, say ‘staging’. Specify the base URL (e.g., ‘http://YourDomainName.com’), and select the language (e.g., English - United States). Then, click on 'Save'. Read more about environments.

  3. Import content types

    A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.

    For this website, all these content types are required: Home Page, Blogs, and Authors. For quick integration, we have already created these content types. You simply need to import them to your stack. (You can also create your own content types. Learn how to do this).

    To import the content types, first save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the ‘import’ link, and select the JSON file saved on your machine.

    Here’s a brief overview of all the content types required for this project.

    • Home Page: The ‘Home Page’ content type enables you to add content for the home page of your website.
    • Authors: The ‘Authors’ content type enables you to add author details.
    • Blogs: The ‘Blogs’ content type enables you to add content for the blog posts that you will add in your website.

    Download All Content Types

    Now that all the content types are ready, let’s add some content for your website.

  4. Adding content

    Create and publish entries for your content types

    Add an entry for all the added content types. Save and publish these entries. Learn how to create and publish entries.

    With this step, you have created sample data for your website.

  5. Install 'gatsby-cli'

    The Gatsby command line tool lets you create new Gatsby sites, and also lets you run commands on these sites.

    npm install --global gatsby-cli
  6. Configure and build

    The process of configuring and building the Gatsby website is further divided into three steps: downloading the code, installing the dependencies, and configuring the 'gatsby-source-contentstack' plugin.

    Let's look at them in detail.

    1. Download the code

      To get your app up and running quickly, we have created a sample static example for this project. You simply need to download it and change the configuration.

      Download Code

    2. Install the dependencies

      To install the Gatsby source plugin for Contentstack, gatsby-source-contentstack, you need to fire up your terminal (command prompt or similar on Windows), point it to your project location, and run the following:

      npm install

      This will download and install the gatsby-source-contentstack plugin as a dependency.

    3. Configure the 'gatsby-source-contentstack' plugin

      Next, in the gatsby-config.js configuration file, add your stack’s API Key and Delivery Token along with the environment. Once done, the config file would look something like this:

      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)
          },
        },
      ]
      // Note: access_token has been replaced by delivery_token
      
  7. 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.

  8. Run your website locally

    To view your site locally, you need to run the following command in your terminal within the project location:

    gatsby develop
    

    This will install and start the Gatsby 'development' server and will help you check if Contentstack is connecting to our website. If successful, the server will start up.

    The above command will allow you to view your site at http://localhost:8000/ and you can run the GraphiQL IDE at http://localhost:8000/___graphql. The GraphiQL IDE will help you to explore the app's data including the Contentstack API.

  9. Deploy website to Netlify

    For this example, we will use Netlify to create the build and host your website. Perform the following steps to connect your source code to Netlify:

    1. Login to your Netlify account and click on ‘New site from Git’.
    2. Link your ‘GitHub’ repository.
    3. Authorize Netlify to access your GitHub account.
    4. After authorizing Netlify, you’ll see your GitHub repositories. Select the one you want to connect.
    5. Configure your Netlify settings. By default all the values will be filled. Click ‘Deploy site’.
    6. In order to notify Netlify about any changes in your content, you need to set up webhooks in your stack by providing the Netlify webhook URL.

That’s it! Your static website should now be up and running!

Additional resource: You can also deploy this Gatsby website on other platforms. Refer to our documentation on Hosting a Static Website on Amazon S3.

On This Page

top-arrow