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.

View Demo View Code

Screenshots

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.

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

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

Step 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.
  • Blogs: The ‘Blogs’ content type enables you to add content for the blog posts that you will add in your website.
  • Authors: The ‘Authors’ content type enables you to add author details.

Download All Content Types

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

Step 4: Adding content

Create and publish entries for your content types

Add an entry for the 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.

Step 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

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

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

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

Step 6.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: {
      api_key: `api_key`,
      access_token: `delivery_token`,
      environment: `environment_name`
    },
  },
]

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

Step 8: 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!

Was this article helpful?
top-arrow