As I mentioned in my opening blob post I wanted to use one of the Azure services to host my blog since I’ve been using Azure a lot recently and I wanted to get a bit more hands-on with some more of the services.

Which service to choose?

First things first, I need to choose exactly which service I’m going to use. Azure offers a few different services that might meet my needs:

• Azure Static Web Apps
• Azure Web Apps
• Azure Blob Storage Static Website

Azure Static Web Apps

The newest of the 3 options, becoming generally available in 2021, Azure Static Web Apps offers Free and Standard plans that come with a whole host of features:

The ones that stood out to me for this particular project were:

• Free tier - Despite being free it comes with all the features I’d need to get the blog up and running. Even upgrading to the Standard plan for $9 (£7.31) per month wouldn’t break the bank, but I think unnecessary for this project.
• Free SSL certificates, which are automatically renewed (because no one wants to have to be worrying about certificates expiring).
• GitHub integration where, through GitHub Actions, commits to the repository will automatically trigger a build and deployment of the blog. This will save so much time and effort manually building and copying files.
• Tying in nicely with the GitHub integration is the Staging environments feature. GitHub actions will automatically deploy a new instance of the site from a pull request on a temporary URL. I think this could be very useful if I’ve made a significant change to the site config that I want to check before making it live.
• Custom domains. I’ve got nothing against the automatically generated hostnames Azure provide, but having your own domain is almost a must.

Azure Web Apps

Azure App Service has been around an incredibly long time now and would be another contender for this use case, except looking at the feature list the Free tier doesn’t support custom domains. For that, I’d have to upgrade to the Shared tier which comes in at a bit more than the Standard plan for Static Web Apps at £7.53 per month. Since Static Web Apps offers custom domains on the free plan, that’s currently the leading contender here.

Azure Blob Storage Static Website

The final solution on my list was hosting the blog straight out of Azure Blob Storage. Nestled within the list of menu items for a Storage Account is an item labelled ‘Static website’

On this blade it’s as easy as toggling the switch to enable the static sites feature and providing the path to the index.html file for your website, which will need to be placed in the $web container.

Microsoft very helpfully provide full details on how to do this in Host a static website in Azure Storage.

One of the features of Static Web Apps that appealed to me was the tight integration with GitHub actions for building and deploying. It’s possible to achieve the same result with Blob Storage, but it’s a bit more effort. Full details of how to set it up have been documented by Microsoft here in Use GitHub Actions workflow to deploy your static website in Azure Storage.

Deployment

After considering my options I decided to give Static Web Apps a spin. It was very close between Static Web Apps and Blob Storage, but the first-class integration that Static Web Apps has with GitHub actions just tipped it for me.

Looking through the documentation I found a tutorial (Publish a Hugo site to Azure Static Web Apps) that would talk me step-by-step through everything I would need to do to get my blog hosted.

Working through the tutorial took next to no time at all and was amazingly easy to get the blog up and running with my first post.

Adding the Custom Domain

After having completed the tutorial I’ve now got my blog up and running on Azure. It’s live! Except the only problem is it’s running off an auto-generated hostname. Something like nice-beach-[bunch of numbers].azurestaticapps.net. It’s not pretty. Let’s fix it.

I’m not a DNS expert so this has been a huge learning experience having to try to understand the differences between ANAME, CNAME, ALIAS, and TXT records. I knew I wanted the blog to run off adamrice.dev and not a subdomain (like blog.adamrice.dev or www.adamrice.dev). Not using a subdomain turns out is called the apex domain.

I’m not using Azure DNS here either. I’m using an external provider (namecheap), which has a separate set of steps in the documentation. It took me a little while to work out exactly what I was doing here, but Microsoft do a good job with this helpful little table that leads you to the right set of instructions depending on your particular use case.

To get my blog running on my domain I followed these instructions - Set up an apex domain in Azure Static Web Apps.

I was able to get the domain setup using the TXT record (to verify I own the domain) and the ALIAS record to point my domain at the auto-generated hostname Azure gave me.

I hope this post was helpful and if you’re considering hosting solutions for small web apps or side projects, maybe even your own blog, I’d really recommend trying out Static Web Apps.

Thumbail Image by Freepik