Azure Storage Static website feature is really awesome - and great websites for less than 1$ a month can be hosted with them - but unfortunately, they can only mapped to subdomains. In this article, I explain how to get it working for both root and subdomains.
Azure Storage Static Website
As mentioned a few times here and there, I am using Azure Storage Static Websites to host a few websites (read more, here and here). It works great, is performant and overall I pretty much enjoy blogging more - maybe writing in VS Code gives me more joy than in Wordpress. The only thing that bugged me setting up the website, was the fact that you cannot host Azure Storage Static Websites on the root domain. So if your website only lives on www.yourawesomewebsite.net (subdomain) then you are fine - if you want to serve your website also on yourawesomewebsite.com (rootdomain) then you cannot do that natively on Azure Storage.
It’s really awesome that you can just update the documentation if you think that something is missing or not like you would expect it.
But let’s move on to a solution.
Azure CDN and Cloudflare
In my solution, and I guess there are more ways to solve it, I use Azure CDN and Cloudfare to get my blog served on the rootdomains and subdomains:
For that, you have to create the Azure CDN that maps to your Azure Storage Static Website. You can do that by creating a CDN profile. I chose the Microsoft Standard CDN because its cheap and has the features that I need. Afterwards I created an endpoint that exposes the Azure Storage:
Now my website is served through the cache and is available at melcher.azureedge.net
Then the most time consuming part needs to be done. You have to request a free SSL certificates for the CDN for your root and subdomains - all of them. Click on Custom Domain and create them:
Once this is done, the Azure CDN can present a valid SSL certificate if it gets requested.
That could be it, but, there is a SEO downside if you just use it like that.
Redirects for www and second domains
I do not want to get SEO punished for serving content on the same domains (if you only have one root domain you are probably fine!), so I forward traffic from www to the rootdomain and from melcher.it to melcher.dev. In order to do this I use Cloudflare to manage my Domains (and have a second cache).alternative verification method - and be patient - DNS stuff takes time.
And then, finally, you can manage the Cloudflare Page Rules to forward the traffic to the one and only domain:
In my case I route everything
to my new domain
the * is a wildcard that matches everything and can be reused in $ variables. So $2 is the match behind melcher.it/.
That’s great - and you can do that with the Cloudflare basic account that is free. By enabling the Cloudflare proxy you get a second cache in front of the Azure CDN - so Cloudflare will reduce your Azure bill by reducing the requests. Awesome.
The request flows to the following services:
It is not as convenient as it should be, but once configured it is mostly free and a super solid setup.