Host Hugo on Azure (and set GoDaddy as Custom Domain)

The process to host your Static App into Azure “Static Web App” service is pretty easy if you have your webapp code stored in GitHub or Azure DevOps.

I strongly suggest having your code always stored in a repository, this gives you flexibility to work wherever you want and make you resilient to any hardware fault, obviously you’ll need a connection to push your code to the remote (and more important, you must remember to do so!)

Hugo quick-start itself makes you initialize a git repository into your project folder. That’s because the management of the themes is made leveraging the git submodule command.

Azure Static Web App

Every resource in Azure can be created both in a graphical way and a command line way. For this particular task, I would strongly suggest leveraging the web interface.

Setting up a Static Web App is fairly simple, and also, for personal projects, costless. Infact the Free tier contains already a lot of features that are interesting. I list some of them here:

Feature Free Tier
Price Free
Included Bandwidth 100GB per subscription
Bandwidth Overage N/A
Custom Domains 2
SSL Certificates Free

This list contains the values from this page, and they were valid on the 7th of December 2022

One feature i like a lot is the free SSL certificate, which is also valid on the two custom domains, that’s why you are seeing this website through HTTPS requests.

Let’s suppose you are done with your code (or at least it is good enough to publish a first draft!) you can create your Static Web App.

Azure Static Web App creation user interface

In my case, I have my application stored in a GitHub Private repository, so it doesn’t have to be public. Once you select the repository, you are asked if there is a build preset that applies to your deployment, I selected the one for Hugo:

Azure Static Web App creation user interface

When you click the create button, magic happens. The automated process will create a GitHub Action to automatically deploy the branch you have specified into your static app, and link it to the app. In this way in the overview page of the static app you can see the deployment settings and history:

Azure Static Web App creation user interface

GoDaddy Custom Domain

GoDaddy is one of the most famous domain providers in the world. It has a problem, it doesn’t allow you to set a CNAME (so a redirect, basically) for your base domain.

To get the point, if i want to redirect every request that comes to subdomain.domain.com to the website myfreewebsite.freewebsitehosting.com we can do it with a simple CNAME entry inside the DNS configuration of our domain.

But if we want that every request to domain.com point to myfreewebsite.freewebsitehosting.com, then, in GoDaddy DNS configuration, we must set an A or AAAA entry, that needs to have the IP of the destination.

Since Azure Static Web App doesn’t give you the IP of your application, since technically speaking, they can be a few since the infrastructure is fully managed, then we must find an alternative way.

Azure DNS Zone

Azure can help in this case too. There is a service called DNS Zone, which allows you to manage the DNS of a custom domain. This is not a free of charge service (for pricing, see here).

Cloudflare is an inexpensive alternative to that. I chose Azure DNS Zone, to have a smooth configuration of the Static Web App and to avoid any surprise. I did not try Cloudflare, so i don’t know if it allows the CNAME alias for the base domain, but it seems so (and since ages!)

Once created with your base domain (in my case codethings.it), it gives you four addresses of name servers in the overview of the zone. Those addresses must be set into GoDaddy. There is a pretty simple guide here, to help you in this process.

Once done, the configuration of the Static Web App custom domain is simple: just follow this guide and everything should be fine.

The end

What I learn from this configuration is that if we let Azure resources speak together, the process has been implemented to make you create the needed connections without complexities.

The result is awesome. I can directly push my blogposts from my remote, containerized development environment into my GitHub repository and have it published in a couple of minutes on my own domain!