CICD blog with Azure and Hugo - Part 4
Aug 12, 2018
5 minute read

Previous blogs in this series:
1. Pipeline overview
2. Creating your site
3. Setting up Azure

Blog 4: Creating the pipeline

Like I said at the beginning, I wanted a site where I could just write, commit, and be done with it. What this means with respect to Hugo is that when you create new content, you don’t want to be bothered with re-building your site, uploading it via FTP to hosting, put it aside for versioning, etc. You want the CMS-way: write, save & publish, done. With a CI/CD approach with Hugo you can essentially achieve this. Writing new content comes down to one new Markdown file, add some images, commit them via Git to the repository and let software do all the work for you. This last part of the series shows you how.

Visual Studio Team Services

Microsoft Visual Studio Team Services (VSTS) has everything you need to get started. It is a cloud-based service to host your repository, build your site with hosted agents and take care of everything dealing with publishing it to Azure. If you don’t have VSTS set up, register for it with your Microsoft account. After that, start a new project. Give it a name, a description, choose Git for Version control and choose a Work item process. For a basic repository, any of these will do, but I prefer Scrum as I use this practice daily.

Create a new project

After you have created the project, you will come to a ‘Get started’ page with several options. As you’ve already created a local repository for your site earlier in this series, you can actually push your repository by adding VSTS as a remote. Unfortunately, there is not a clean way to add this in VS Code yet, so start up a commandline, navigate to your website directory and run the two commands shown.

Push existing repository

Building the builder

Before we can let VSTS handle anything, we need to tell it what to do. To make things easier, install these two items from the Visual Studio Marketplace: Hugo and Purge Azure CDN Endpoint. Click on Get it free, sign in, and select your VSTS organization to install.

After that, go back to your VSTS project and Navigate to Build and release, Builds, and click on the New Pipeline button to get started.

Create new pipeline

On the select your repository screen leave the defaults for VSTS Git, make sure the right project and repository are selected and that you are on the master branch, and click Continue. After that, click on Empty Process. On the left side of your screen the process for this build pipeline is visualized, while on the right you configure options for each aspect of the process. We’ll go through each one of these.

Process

You can leave the name as-is, but change the Agent queue to Hosted.

Get sources

You can leave the options for Get sources to the defaults, but if you have a theme from the Hugo Themes Showcase cloned using Git, you might want to add a tick to Checkout submodules.

Phase 1

The default Phase 1 is where the magic is gonna happen. You can add tasks to the phase by using the + button. Add these in order (you can search by name): - Hugo - Publish Build Artifact - Azure App Service Deploy - Purge Azure CDN Endpoint

Hugo generate

This will download the required version of Hugo and run it to build our site. We need to tell it where our site is, where to save the generated site, which version to use (probably latest) and what the base URL for our site will be. You can set some other settings as well.

Hugo generate settings

Publish Artifact

You can leave these settings as is, but if you need a nicer name for your generated site to download later (instead of drop), you can configure it here.

Publish Artifact settings

Azure App Service Deploy

First, select your Azure subscription and hit the Authorize button. This way VSTS can communicate with your Azure deployed services, including your Web App. Then select the right App Service to deploy to. Finally, point to your Build Artifact which you want to deploy. No need to change other settings.

Azure App Service Deploy settings

Purge Azure CDN Endpoint

We let the agent connect to Azure one more time, this time to automatically purge the CDN endpoints so our new content will be distributed ASAP. Choose Azure Resource Manager at Azure Connection Type, choose your Azure Subscrition and the resource group your CDN is registered in. Type in your endpoint name (without .azureedge.net) and the corresponding profile name, leave the rest default.

Purge Azure CDN Endpoint settings

One last thing…

We’ve built the entire pipe, beginning to end, to make your website happen. Only one thing is needed to make it automated after every commit: go to the Triggers tab in the build pipeline, and tick the box marked Enable continuous integration. Each time you push to master on VSTS, a new build will now automatically trigger, which will build your site, deploy it, and purge the CDN. You will be notified by email (as well as within VSTS) if your build succeeds, so you get notified if something goes wrong. All that is left is hit the Save & queue button to save the pipeline, and push your site into the great wide open.

Blogs in this series:
1. Pipeline overview
2. Creating your site
3. Setting up Azure
4. Creating the pipeline