Moving this blog to an Azure static web app

Up until now I’ve had this blog hosted on Azure blob storage as a static website, behind a CDN. All has been well, with a few (admittedly) minor gripes:

• The blog only works for the www subdomain. Browsing to https://ryanwilliams.blog did not work and gave a 404 response. I tried setting up redirection in my domain registrar but that gave me a security warning due to a hostname mismatch.
• The CDN is not free. Although it’s quite cheap for the traffic I’m seeing, free sounds better to me.
• There seems to be a few too many moving parts for a simple blog: blob storage, CDN endpoint, CDN rules. And on top of that I have both build and release pipelines in Azure Devops to package and deploy the site whenever changes are pushed.

Azure Static Web Apps have been out of preview mode for a while now, and I had been wanting to build one. This post is how I moved this blog to be hosted as a static web app, with the following benefits:

• Fewer Azure resources
• A simpler deployment model using a single Github action
• www -> root domain redirection

Table of contents

The plan

The plan is this:

• Move my source code to Github
• Create an Azure static web app
• Create an Azure DNS zone
• Configure my domain registrar (Namecheap) to use Azure nameservers
• Add custom domains to the web app & configure DNS records

Note this approach will cause some downtime as the DNS records get updated and the custom domain names are validated in Azure. For my case, this is fine with me. If my blog’s down for a few minutes, it’s not the end of the world.

Move my source code to Github

Previously my source code was hosted in an Azure Devops Git repo. While static web apps can be deployed from Azure Devops, I liked the simplicity and ease of having it deployed from Github.

There’s not much to say about this, just some very basic steps:

• Create a new Github repo and clone it
• Copy the old code to the new repo’s folder
• Manually change the .git/config file to set the remote origin’s URL to point to the new repo
• Commit and push

Create a static web app in Azure

In the Azure portal, create a new static web app and choose ‘Github’ as the source in the deployment details section. I went with the free plan since that suits my needs.

After signing in with Github and authorising the static web app to access my Github account, I chose my repo and branch, and also chose the ‘Hugo’ build preset:

After clicking Review + Create -> Create, if all goes well the static web app will be provisioned and the Github action should kick in and start building and deploying the site.

Once it’s done, go to the newly created static web app, copy the automatically generated URL, it will look something like https://word1-word2-randomdigits.azurestaticapps.net. and paste into a new browser tab to check it’s working.

Create an Azure DNS zone

In the Azure portal, create a new DNS zone. After the deployment has completed, copy the name server information:

Configure domain registrar

My domain registrar is Namecheap, so these steps are specific to that vendor and may be different for other registrars. For my domain, I chose to use Custom DNS for the nameservers and entered the details copied from the DNS zone created previously:

Add custom domains to the web app & configure DNS records

In the Azure portal, click on the static web app and then Custom domains. Add a new custom domain and enter the root domain (eg mydomain.com) in the domain name field, and click Next:

This will then proceed to a page to validate domain ownership. Choose TXT for the hostname record type, then click the Generate code button to generate a random code. After the code is generated, copy it and then browse to your Azure DNS zone in the Azure portal:

Create a new record set and enter the root domain as @, and choose Type = TXT. Paste your code into the Value textbox and click OK:

Repeat the process for the www subdomain.

Back in the validate & configure page for the static web app, it will enter the validation process to verify the TXT records are correct. This might take some time, for me it took about 15 minutes.

Once the validation has completed, go to the DNS zone and create a new alias record set for the root domain. Enter the domain as @, and choose Alias record set = Yes, Alias type = Azure resource, and choose your Azure subscription and static web app from the dropdowns.

Delete the TXT record for the www subdomain, and create a new CNAME record set for the www subdomain. Enter the domain as www, and choose Alias record set = Yes, Alias type = Azure resource, and choose your Azure subscription and static web app from the dropdowns.

The final step is to set the default domain name as the root domain name for the static web app. In the Custom domains section, click on the root domain and then the Set default button. Once this takes effect, the name should change to mydomain.com (Default).

And that’s it - you should be able to browse to both the root and www subdomains for your site. The www subdomain should redirect to the root domain automatically. If this doesn’t happen, you may need to wait until the DNS changes are propagated (the actual time depends on your TTL for the record sets).

After this I was able to delete my Azure Devops repo and pipelines, and delete the CDN and static web site blob storage from Azure. Now I’m down to only two Azure resources: the DNS zone, and the static web app.