Gatsby API site

Prerequisites

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:

   • VSCode installed on your computer
   • A GitHub account
   • A Vercel account

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 https://github.com/sarasate/gate

2. Click Fork.

   

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: https://github.com/ivancheban/gate

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

   

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: https://github.com/ivancheban/gate.git

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

   

This is your cloned GitHub project where you can edit the index.md Markdown 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.

   

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 vercel.app part.

   

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

https://gate-api.vercel.app/