# Deploy your Gatsby Cloud project with Hygraph webhooks

Get all the necessary information to deploy your Gatsby Cloud project using webhooks.

**Warning:**

The Gatsby integration has been deprecated and no longer receives support. Please migrate to using webhooks by following the steps shown <a href="/classic-docs/developer-guides/webhooks/deploy-gatsby-project#migrate-from-gatsby-integration-to-webhooks">Here</a> .

If you are using **Gatsby Cloud** for your deployments, you can use **Hygraph webhooks** to automatically deploy when content changes.

## Prerequisites

- You must have a **Hygraph** account. If you don't have one, you can create one [here](https://app.hygraph.com/signup).
- You must have a **Hygraph** project. Read [this](https://hygraph.com/classic-docs/getting-started/fundamentals/quickstart#create-a-project) document to access further information on how to create Hygraph projects.
- You must have an **Gatsby Cloud** account. If you don't have one, you can create one [here](https://www.gatsbyjs.com/dashboard/signup).
- You must have a **Gatsby Cloud** site. Read [this](https://www.gatsbyjs.com/classic-docs/quick-start/) document to access further information on how to get started with Gatsby Cloud.

**Warning:**

**Webhooks are environment specific**. This means their configuration is applied per environment. Take this into consideration if you're working with a project using more than one environment.

## Your Gatsby Cloud site

You can use your pre-existing Hygraph powered Gatsby site in Gatsby Cloud - if you have one - or you can create a new site by importing your pre-existing Gatsby project from a GitHub repository. You can follow [this guide](https://support.gatsbyjs.com/hc/en-us/articles/https://support.gatsbyjs.com/hc/en-us/articles/17278081789588-Connecting-to-GraphCMS) for instructions on how to do this.

During the setup process, you will be asked to provide the necessary environment variables for your Gatsby site to build:

![Environment variables in Gatsby Cloud](https://hygraph.com/images/classic-docs/user-guides/webhooks/gatsby/gatsby-environment-variables.png)

You will find this information in your Hygraph project by navigating to **Project settings > API access**.

| In Hygraph            | In Gatsby Cloud  |
| --------------------- | ---------------- |
| Content API           | HYGRAPH_ENDPOINT |
| Permanent Auth Tokens | HYGRAPH_TOKEN    |

You will find the **Content API** URL under **Endpoints**. Scroll down to the bottom of the screen to find the **Permanent Auth Tokens**.

**Note:**

You can follow the same process for <b>Build variables</b> and <b>Preview variables</b> in Gatsby Cloud.

## Configure webhooks

The first thing you need to do is navigate to your Gatsby Site, go to **Settings > Webhook**, and copy your **Builds Webhook**. Follow these steps afterwards:

[Video](https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/CPhJj5CRGWJ6cg2MePza)

1. In Your Hygraph Project, go to **Webhooks** and click on the `Add` button, located in the upper right corner of the screen, or on the `+Add Webhook` button at the center of the screen.
2. The `Add webhook` screen will display. Complete the following information:
   - **Name:** Name for your webhook.
   - **Description:** Description for your webhook. Optional field.
   - **Include payload:** Switch. True by default. If true, data will be sent via the webhook.
   - **Method:** Dropdown menu that allows you to select an HTTP method from a list. The default value is **POST**, but you can also select **DELETE**, **GET** or **PUT**.
   - **URL:** Webhook URL. This is where you paste the **Builds Webhook** that you copied from your Gatsby Site settings.
   - **Secret key:** You can optionally add a secret key to sign the payload of your webhook. The secret key allows the other end to check that the source is genuine. This can be used to verify requests and, for instance, avoid triggering deploys from unknown sources.
   - **Triggers:** This is where you select which Models, Stages, Actions and Sources should trigger your webhook. Each item has a dropdown menu, where you can select one or more options. Selecting none acts as a wildcard, then all models will trigger the webhook. If you're a developer, [this document](https://hygraph.com/classic-docs/api-reference/basics/webhooks#triggers) contains some more information on triggers that might be useful to you.
   - **Headers:** Here you can configure your headers by adding additional **Key** and **Value** data, then clicking on the `Add` button. You can add multiple **key-value** sets, and you can delete the ones you added by clicking on the trash icon. Some endpoints require authentication using API Keys, which could be set here.

![Gatsby webhook example - Headers](https://hygraph.com/images/classic-docs/user-guides/webhooks/gatsby/gatsby-keyvalue.png)

**Warning:**

Follow the same process to create a second webhook using the <b>Preview webhook</b> from your Gatsby cloud site if you want to create a preview link as well.

## Trigger a Gatsby Cloud build from Hygraph

Once the webhook has been [configured](https://hygraph.com/classic-docs/developer-guides/webhooks/deploy-gatsby-project#configure-webhooks), performing one of the trigger actions will trigger a build in Gatsby Cloud.

For instance, if the trigger actions you configured for the webhook are `PUBLISH` and `UNPUBLISH`, doing either of those actions in the **Content editor** will trigger a new build in Gatsby Cloud.

You will be able to check the new build in your **Hygraph project** by checking the [logs](https://hygraph.com/classic-docs/developer-guides/webhooks/deploy-gatsby-project#view-webhook-logs). You can also see this in your in your **Gatsby Site**, under **Master > Build history**.

## Migrate from Gatsby integration to webhooks

Follow these steps to migrate from your Gatsby integration to webhooks:

1. In your **Hygraph** project, navigate to **Apps** and locate your Gatsby integration card.
2. Click on the trash icon to delete.
3. Finally, navigate to Webhooks and follow the [configuration process](https://hygraph.com/classic-docs/developer-guides/webhooks/deploy-gatsby-project#configure-webhooks).

## Resources

- [Gatsby Cloud documentation](https://www.gatsbyjs.com/classic-docs/)
