Subdomains on Azure Static Websites

Posted at — Jan 17, 2020

Up to now I have been updating this website by pushing to production and seeing if anything broke. As I now have a blog that I would like people to read, I can’t afford to break my website without realising. Unfortunately, local files don’t accurately represent a static site, as absolute links don’t work. I had a couple of options to solve this:

  1. Running a web server that was only exposed on a local network
    • Very cool but would be a project in itself
  2. Pushing files to a folder
    • Would work but would need to change all links to have /beta/ in the path
  3. beta.carlinmack.com subdomain

The subdomain allows me to use the exact same files and view them as they will appear in “production”.

My Setup

My website as of writing this is hosted through Azure, with DNS and HTTPS configured through Cloudflare. This is because I get $100 of Azure credit as a student and the free Cloudflare plan suits my current needs.

Creating a subdomain

To create a subdomain with the same structure as your current website you need to duplicate and make a whole new web app/server/storage account for it. This theoretically implies double the running costs, however if you’re using a storage account, you’re only charged as much as it’s used.

So, as my website is currently a static website, I needed to make a duplicate static site. To do this you create a Storage Account (all the default settings are fine) and then enable Static Website under the settings. Copy the Primary Endpoint for later and input index.html for your Index document name. The simplest way to upload index.html is to go Storage Explorer (preview) -> Blob Containers -> $web -> Upload.

Next go to Blob service -> Custom domain and enter your target subdomain, for example, beta.carlinmack.com.

Creating the DNS record

In your registrar create a CNAME record with the following structure:

Type Name Content
CNAME beta Primary Endpoint from last step

If you are using Cloudflare disable Proxy status until Azure has accepted the custom domain.

Then go back to Azure and click Save in the Custom domain tab. Hopefully Azure should see that the registrar points from your URL to Azure. If not, check that the primary endpoint is correct and going to the subdomain returns an HTTP status code.

When you visit your new subdomain, you should see the index.html you uploaded earlier 🥳