Connect your Hygraph project to Netlify

The integration lets you update your static deployments via a button in the Hygraph content view. Handled differently than by webhooks, the only configuration needed is connecting your Hygraph project to your Netlify site/app and selecting which content entries can trigger a rebuild via the UI.

This integration allows you to install a button in the Hygraph sidebar of a content model for manual redeploys, alongside a visual indicator of deployment status.

What you can do with the Hygraph-Netlify integrationAnchor

  • Trigger Netlify builds within your content view with a single click.
  • View the status of your Netlify build without leaving the Hygraph UI.
  • Specify which content models display the button in the sidebar, giving you more control over how builds are triggered when there are changes to your content.

Prerequisites to use this integrationAnchor

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

How it worksAnchor

Step 1) Install the Netlify appAnchor

Click here to install Netlify app on Hygraph.

Step 2) Select a projectAnchor

Select which project you want to install the app in, then click Add App.

Step 3) Connect Hygraph to NetlifyAnchor

Click on Connect to Netlify to setup the connection with Hygraph.

Step 4) Authorize the Netlify appAnchor

Click on Authorize to allow the app to perform actions on your behalf. After authorizing the app, you can close the tab and go back to Hygraph dashboard.

Step 5) Set up your websiteAnchor

In the dropdown, select your website on Netlify, add a Display Name, then click on Save.

Step 6) Adding Netlify deploy button to modelsAnchor

Now, go to the Schema editor and select the model you want to add Netlify deploy button.

Step 7) Adding Netlify sidebar widgetAnchor

Click on the Sidebar tab. Then, click on Netlify Deployment to add the widget to the sidebar.

Step 8) Customizing sidebar widgetAnchor

You can change the widget Display Name and Description if you want. Otherwise, click on Create.

Step 9) Reordering widgetAnchor

Click and hold the six-dotted handle and drag the widget to the position you want to display in the sidebar.

How to trigger a deploy on NetlifyAnchor

Step 1) Go to content viewAnchor

Go to the content editing section. You can do that by clicking on the left-side navigation or the "Go to content editing" link in the top-right corner.

Step 2) Go to model content viewAnchor

Under the views section, select the model you added the widget in the previous step. Then, click on the Edit button to open an existing entry. You can also create a new Entry.

Step 3) Triggering deployAnchor

On the sidebar, you should see Netlify deploy button. Click on it to trigger a new build.