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:
- Running a web server that was only exposed on a local network
- Very cool but would be a project in itself
- Pushing files to a folder
- Would work but would need to change all links to have /beta/ in the path
The subdomain allows me to use the exact same files and view them as they will appear in “production”.
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:
||Primary Endpoint from last step|
If you are using Cloudflare disable
Proxy statusuntil 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 🥳