Gatsby API site

Reference API documentation site built with Gatsby. The theme is based on Slate and Stripes API docs.

In this example, let’s build the API documentation site using the Gate API theme for Gatsby static site generator. This Gatsby theme is inspired by Slate and Stripes API docs. The end result will look similar to this site:


  1. Check that you have installed the Git client. In the Command Prompt run:

    git version

    If you don’t have Git client installed on your computer, read how to install Git client.

  2. Check that you have:

Install Gatsby CLI

Gatsby CLI is an npm package you need to install for running Gatsby commands in the Command Prompt.

  1. Download and install the latest Node.js version from the official Node.js website.

  2. In the Command Prompt, run the following command to install Gatsby CLI globally on your computer.

    npm install -g gatsby-cli

Fork and clone the Gate API project from GitHub

Fork or download the Gatsby API docs project from GitHub to make it your own. Then clone (download) it to your computer.

To fork the Gatsby API project on GitHub:

  1. Go to

  2. Click Fork.

    Fork repository from GitHub

The forked repository becomes your own repository. Now, you can clone or download your own GitHub project to your computer.

To clone your GitHub repository:

  1. Go to your forked repository.

    In my case, it’s:

  2. Click the Code button and copy the https link to your GitHub project.

    Copy GitHub project link

  3. Open VSCode and click Ctrl + Shift + P.

  4. Enter Git: Clone and press ENTER.

  5. Paste the link to your GitHub repository.

    In my case, it’s:

  6. Open the cloned repository folder when you see this notification in VSCode.

    Open cloned repository

This is your cloned GitHub project where you can edit the Markdown content file.

Project content file

Build site locally

Before publishing the site online, let’s see how it looks locally. Also, it’s convenient to instantly view all changes locally before publishing online.

To build your Gatsby API site and open it locally:

  1. In the Command Prompt, go to the cloned project directory.

    In my case. it’s c:\Users\ivanc\gate\.

    cd c:\Users\ivanc\gate\
  2. Install the npm dependencies for this project.

    npm install

    Be patient as installation of the npm packages may take a while.

    Install npm dependencies

  3. Build the Gatsby site for the local development.

    gatsby develop
  4. Go to http://localhost:8000/ to view the API site locally.

    Your site opens in your browser. As you edit the site content, all the changes display automatically on this live reload server.

Publish with Vercel

To publish your site online:

  1. Log in to Vercel.

  2. Select New Project.


  3. Search and import your gate repository.


  4. Skip the Create a Team offer.


  5. Click the Deploy button.


    Wait while Vercel builds and deploys your site online. The success message informs that your site is available online.


  6. Select Go to Dashboard and then View Domains.


  7. Select Edit to change your site name to something more suitable for you. Don’t change the part.


Your site should be available now. You can view my Gatsby API documentation site here:

Last modified March 9, 2023: added redoc api article (f99a6e6)