Deploying a site to Netlify with Azure DevOps

A three-stage process to automating a release pipeline

Photo from Unsplash blended with Azure DevOps and Netlify logo.

Introduction

I recently deployed a static website to Netlify from the Azure DevOps release pipeline. Although my source code was in a Git repository, I couldn’t connect my repository to Netlify straight away as Netlify only supports GitHub, GitLab, and BitBucket at the moment. Instead, I had to take another route which I will expand upon here. In this article, I’ve recreated the scenario and have highlighted the approach I took to solve the problem at hand.

Assumptions

For the sake of brevity, let’s assume a few things:

• You’re familiar with Azure DevOps.
• We have a build pipeline set up that runs every time code is checked into the master branch and creates a deployment package — a ZIP file with the website contents — as the output of this build pipeline.
• We’ve created a release pipeline with a new stage called Netlify. This stage currently has one task in it that extracts the contents of the ZIP file from the build artifact and copies the website contents into this $(System.DefaultWorkingDirectory)/output folder. The output folder has only one folder in it called src which contains the source code of the website that is ready to be deployed.

Solution

Let’s break this guide down into 3 stages:

• Stage 1: Adding Netlify to the release pipeline
• Stage 2: Fetching the site ID and personal access token from Netlify
• Stage 3: Adding the finishing touch

Stick around for a cool bonus section at the end of this article!

Stage 1: Adding Netlify to the release pipeline

Let’s click on the + icon to add a new task, and search for Netlify. You should see this task from the Marketplace by Aliencube. Click on the “install” button to install this extension.