Building this blog with Hugo + Azure (Part 2)

In the previous post we created the static website using blob storage and set up pipelines to automatically deploy changes. In this post we’ll add a custom hostname with HTTPS support to the static website using a Content Delivery Network (CDN).

Adding a custom hostname with HTTPS support to an Azure static website using blob storage is not natively supported (yet), but here’s how you can do it using a CDN.

This post assumes you’re familiar with the Azure Portal and also your domain registrar’s portal for DNS configuration.

Table of contents

Create a CDN profile

Why do we need a CDN? Two things:

  • Allows us to auto-redirect HTTP calls to HTTPS for security
  • Provides a certificate for our custom domain

Also a nice-to-have is the caching a CDN provides, which means there will be less traffic from our blob storage account.

So, let’s get onto it! In the Azure Portal, create a new CDN profile, and choose the P1 Premium Verizon tier:

Create CDN profile}

The reason we need the premium Verizon CDN is that it’s the only one that provides redirect rules.

Click next and enter your options, giving your CDN and setting the resource group.

CDN creation options}

Click Create and wait for the CDN profile to be created.

Create a CDN endpoint

Once the CDN profile has been created, go to the profile and add a new endpoint and select the following options:

  • Origin type: Storage static website
  • Origin hostname: (Select your storage account)
  • Origin path: (Leave blank)
  • Origin host header: (Will default to be same as domain name)

Add CDN endpoint}

Click Add to create the endpoint. Once the endpoint has been created, click on it and copy the endpoint hostname (minus the HTTPS:// part):

CDN endpoint hostname}

Configure DNS records for your domain

Now you’ll need to browse to your domain registrar’s site and create new CNAME records for your domain to your CDN endpoint:

Type Host Value
CNAME www yourcdnendpoint.azureedge.net
CNAME cdnverify cdnverify.yourcdnendpoint.azureedge.net
URL Redirect Record @ https://www.yourcustomdomain.com

DNS records}

Associate custom domain with CDN endpoint

Back in the Azure portal for your CDN profile, click on the new endpoint, click on Custom Domains and then click the Custom domain button to add a new domain:

CDN endpoint custom domain}

Enter your custom domain - it might take a while for your DNS changes to propagate and for the domain verification to work:

CDN endpoint custom domain verification}

Click Add to add the new custom name - this may take a few seconds to complete. Once it’s created, click on the custom domain name and enable HTTPS:

CDN endpoint custom domain HTTPS}

Leave Certificate management type as CDN managed (unless you have your own certificate in which case you can proceed to select Use my own certificate, but this blog post won’t cover that).

Click Save and wait - this part will take quite a while to complete. Microsoft advises that domain validation can typically take a few hours, even up to 24 hours. And then the certificate provisioning can take a further 6 hours to complete.

CDN endpoint custom domain HTTPS}

Configure CDN redirection rules

Go back to your CDN profile and click the Manage toolbar item at the top of the screen:

CDN creation options}

This will take you to the CDN management portal. Click on the HTTP Large menu at the top, then Rules Engine:

CDN creation options}

Create a new draft policy, give it a name and then create a rule to redirect HTTP to HTTPS:

CDN creation options}

Note if you need to know the source value before the (.*), temporarily add a new rule for Match -> Origin => Customer Origin and note the value in the Value. Then delete the temporary rule.

CDN creation options}

Purge CDN cache on deployment

In order to ensure the CDN serves up the latest content when we deploy changes to the blog, we’ll need to configure the release pipeline to purge the CDN cache.

Note down the names of your CDN profile and CDN endpoint - in my case they are both the same name ryanwilliamsblog. Also note your resource group name.

Go to your release pipeline in Azure DevOps and edit it, add the following variables:

  • AZURE_CDN_PROFILE_NAME: Enter the name of your CDN profile
  • AZURE_CDN_ENDPOINT_NAME: Enter the name of your CDN endpoint
  • AZURE_RESOURCE_GROUP_NAME: Enter the name of your resource group

Release pipeline variables}

Now edit the AZ CLI task and add the following line:

az cdn endpoint purge --resource-group $(AZURE_RESOURCE_GROUP_NAME) --name $(AZURE_CDN_ENDPOINT_NAME) --profile-name $(AZURE_CDN_PROFILE_NAME) --no-wait --content-paths '/*'

Release pipeline AZ CLI purge command}

Click Save and the Create Release and that’s it!

So, to recap here’s what we did:

  • Created a source control repository to store our site
  • Created a blob storage account and enabled static web hosting on it
  • Setup a build pipeline to run the hugo command to build the site and produce a build artifact
  • Setup a release pipeline to deploy the site to blob storage and purge the CDN cache
  • Setup a CDN to cache the site, redirect HTTP to HTTPS and provide a certificate to allow HTTPS
  • Modified DNS records to redirect our custom domain to the CDN endpoint