Add netlify deployment guide (#559)

* Add netlify deployment guide

* Add pictures and adjust terminology

* Add integration images

Author: AlexGaillard

app/components/IntegrationsList.vue

@@ -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>
 

content/guides/11.integrations/4.vercel/0.index.md

@@ -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

content/guides/11.integrations/5.netlify/.navigation.yml

@@ -0,0 +1,2 @@
+title: Netlify
+headline: Netlify

content/guides/11.integrations/5.netlify/0.index.md

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

content/guides/11.integrations/5.netlify/deployments.md

@@ -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