Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/components/IntegrationsList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ const integrations = [
to: '/guides/integrations/vercel',
logo: '/docs/img/vercel.webp',
},
{
title: 'Netlify',
description: 'Integrate Directus with Netlify to deploy sites and track build progress.',
to: '/guides/integrations/netlify',
logo: '/docs/img/tutorials/netlify.png',
},
];
</script>

Expand Down
2 changes: 1 addition & 1 deletion content/guides/11.integrations/4.vercel/0.index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: vercel-integration
title: Integration
title: Vercel
description: Connect Directus with Vercel to trigger deployments, monitor build status, and manage your frontend projects directly from your Directus instance.
technologies:
- vercel
Expand Down
2 changes: 2 additions & 0 deletions content/guides/11.integrations/5.netlify/.navigation.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
title: Netlify
headline: Netlify
69 changes: 69 additions & 0 deletions content/guides/11.integrations/5.netlify/0.index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
id: netlify-integration
title: Netlify
description: Integrate Directus with Netlify to deploy your sites, track build progress, and manage frontend projects from within your Directus instance.
technologies:
- netlify
---

Integrate your Directus instance with Netlify to centrally deploy sites, track build progress, and manage multiple frontend projects — all from within Directus.


::callout{icon="heroicons-outline:rocket-launch"}
**Quick Start**
1. **Enable Deployment module**: Enable the Deployment module in your Directus project settings
2. **Link your Netlify account**: Go to the Deployment module and enter your Netlify Personal Access Token
3. **Add sites**: Connect one or more Netlify sites to your Directus instance
4. **Deploy**: Trigger builds and track deployment progress from Directus
::

## Getting Started

### Link Your Netlify Account

1. In Directus, go to **Settings**
2. Under **Modules**, enable the **Deployment** module
3. Open the Deployment module from the **primary navigation**
4. Select **Configure Netlify** to set up the integration
- **Personal Access Token**: Your Netlify [personal access token](https://docs.netlify.com/api/get-started/#authentication)
- **Account Slug (optional)**: Your [Account Slug](https://docs.netlify.com/manage/accounts-and-billing/team-management/overview/#access-or-modify-the-team-account-slug) to filter sites to a specific account. Leave empty to show all accessible sites
5. Click **Save** to connect and start adding sites

![Netlify configuration token](/img/netlify-configuration-1.png)

### Configure Sites

1. From the **Netlify Configuration** screen, choose **which Netlify sites** to manage from Directus
2. Click **Save** to add the selected sites
3. Return to integration settings anytime to add or remove sites

::callout{icon="material-symbols:warning" color="warning"}
**Removing Sites**
<br>
Removing a site from the Netlify integration will permanently delete all deployment history for that site from Directus. This cannot be undone.
::

![Netlify configuration sites](/img/netlify-configuration-2.png)

### View Your Sites

Once set up, your connected Netlify sites appear in the Deployment module. From here you can:
- See all connected sites at a glance
- Access deployment controls for each site
- Track deployment status and history

::callout{icon="material-symbols:info-outline"}
**Permissions**
<br>
**Admin Access Required (For Now)**
<br>
At this time, only admin users can trigger deployments and manage Netlify sites. Role-based permissions are planned for an upcoming release, enabling deployment access for specific users and roles.
::

![Netlify sites overview](/img/netlify-configuration-3.png)

## Documentation

**[Working with Deployments →](/guides/integrations/netlify/deployments)**

Trigger deployments, track build progress, and manage your frontend sites directly from Directus.
102 changes: 102 additions & 0 deletions content/guides/11.integrations/5.netlify/deployments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
---
id: netlify-deployments
title: Deployments
description: Full guide for triggering builds, tracking deployment progress, and viewing logs for your Netlify sites from Directus.
technologies:
- netlify
---

After linking your Netlify account and configuring your sites, manage all deployment activities directly from Directus.

Trigger deployments after publishing content updates that impact your frontend.

**[← Back to Netlify Integration](/guides/integrations/netlify)**

## Triggering Deployments

Start a new deployment for any connected Netlify site:

1. Navigate to the **Deployment** module
2. Click on the **Netlify** provider
3. Select the site you want to deploy
4. Click the **Deploy** button in the top right
5. Netlify will begin building and deploying your site

Each deployment is logged in Directus with its deployment metadata.

![Netlify integration overview](/img/netlify-integration-1.png)

## Monitoring Deployment Status

::callout{icon="material-symbols:info-outline"}
**Only deployments triggered from Directus appear here**. Deployments initiated directly in Netlify will not be displayed.
::

Track your deployments in the deployment list view. The list displays:

- **Deploy ID**: Netlify identifier for each build
- **Status**: Current deployment state
- `BUILDING`: Build is in progress
- `READY`: Site is successfully built, deployed, and live
- `CANCELED`: Deployment was stopped before completion
- `ERROR`: Build or deploy phase failed
- **Context**: Deployment environment (production, branch deploy, etc.)
- **Started**: When the build began
- **Duration**: Build time
- **Author**: Who initiated the deployment

## Viewing Build Logs

Access detailed build logs for any deployment:

1. Click any deployment from the site list
2. View the full build output, including:
- Build steps and timing
- Plugin execution details
- Asset optimization and caching
- Error messages (if applicable)
3. Use **search** to locate specific log entries
4. Filter by **log level** (All, Stdout, Stderr) to narrow results

Build logs are essential for diagnosing deployment issues and understanding your build pipeline.

![Netlify integration build logs](/img/netlify-integration-2.png)

## Exporting Logs

Download deployment logs for records or debugging:

1. Open the deployment details view
2. Click the **Download** icon in the top right
3. Logs are saved as a text file with timestamps

![Netlify integration export logs](/img/netlify-integration-3.png)

## Visiting Deployed Sites

Access your live deployments quickly:

1. From the deployment details view, click the **Visit** button
2. Your deployed site opens in a new tab

![Netlify integration visit site](/img/netlify-integration-4.png)

## Best Practices

**Deployment Workflow**
- Deploy after publishing content changes that affect your frontend
- Monitor initial deployments after setup to confirm builds succeed
- Retain build logs for failed deployments to aid troubleshooting

**Performance Tips**
- Build durations in the deployment list help track performance trends
- Netlify's build cache can accelerate subsequent builds

**Troubleshooting**
- For failed deployments, review build logs for error details
- Confirm your Netlify site configuration and build settings
- Verify your Personal Access Token has required permissions

## Next Steps

- **[← Back to Integration](/guides/integrations/netlify)** Return to the integration overview
Binary file added public/img/netlify-configuration-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/netlify-configuration-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/netlify-configuration-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/netlify-integration-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/netlify-integration-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/netlify-integration-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/netlify-integration-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.