Running a static site for free with Azure Blob Storage and Cloudflare

Lately, it feels like there’s an arms race in the “cheap static hosting” space. In today’s blog, I share my current favourite approach, using Azure Blob Storage and Cloudflare. I explain the problems I’ve encountered with other Blob Storage approaches, as well as how they can be overcome using Cloudflare. Oh, and it costs less and £0.01 per month. Intrigued? Read on…

With Gen 2 of Azure Blob Storage, we gained the ability to serve static websites directly from a blob container. All we need to do is flick a switch and put our files in the $web container. I won’t go into the details of this here, as my colleague Sneha recently published a great write-up.

Blob storage is so cheap!

The advantage of this approach is that it is cheap, cheap, cheap. Like, really inexpensive. So cheap, it’s virtually free. Go take a look at the pricing for blob storage, then consider that the static website option is free, and remember that your first 5GB of bandwidth (outbound, as inbound is always free) is free too. I challenge you to spend more than $1 / month.

The downside of just using blob storage is the almost total absence of any “mod cons”. You won’t find much configuration or monitoring beyond what a vanilla storage account offers. You can specify what your index and 404 pages are and, well, that’s about it.

You can configure a custom domain, but this comes with some limitations:

1. It’s not possible to use the “apex” (root) domain, so must use a subdomain. Using “www” is the most common workaround, but the experience for users who fail to include this won’t be graceful.
2. Similarly, HTTP is not supported. All requests have to be over HTTPS. This isn’t a problem in itself, but (again) the fallback is a less than ideal error message.

So how can we have our cheap cake and eat it too? How can we enjoy the effectively free storage on offer, whilst retaining some of the bells and whistles that the discerning developer expects?

Azure CDN?

One option is to use Azure CDN. You can read how to do that over in this post by Chad Shulz. This approach does give you some more fine-grained controls. Moreover, it does allow one to solve one of the two problems mentioned above – seamlessly redirecting non-HTTPS traffic to HTTPS.

Significantly, however, it seems as though Azure CDN no longer supports apex domains. There is a feature request for this, which has been open for two years now. Some people (including Arlan Nugara) have reported success using workarounds, but none of them worked for me in June 2020.

On top of this, there’s the price point. Azure CDN is by no means expensive, but it isn’t free. If we’re honest, it is basically free, with monthly costs probably coming in at the 10s of cents mark. Still, why would I pay anything when there’s a 100% free service I can use?

Cloudflare

I have been aware of Cloudflare for a while but first came to use their services when I moved this blog to SiteGround. I wrote about my experiences a few weeks ago and would continue to sing the praises of both SiteGround and Cloudflare.

When I was struggling to configure Azure CDN to use my apex domain, I started to wonder if I could do the same thing with Cloudflare. Let me tell you, I was pleasantly surprised by how simple it was. At first, I was actually trying to configure Cloudflare in front of Azure CDN, but quickly realised I could simplify things by pointing Cloudflare at blob storage directly.

Here’s what I did:

1. Add a new website to my Cloudflare account using their free tier
2. Configure the custom domain in blob storage
3. Create CNAME records to point my www subdomain at my blob storage hostname
4. Added the verification records to my DNS records
5. Force all traffic to be HTTPS by toggling the “Always Use HTTPS” switch
6. Create a “Page Rule” to perform a 301 redirect from my apex domain to the www subdomain.

And that’s basically it. The two main problems with naked blob storage are fixed in steps 5 and 6. Since these are pretty significant, I should probably go into a little more detail.

Well, perhaps there isn’t a lot of detail to go into for the first of these… As I said, setting up an HTTP-to-HTTPS redirect really is as simple as toggling an option from “off” to “on”. Whilst we’re here though, I could point out a wealth of other SSL-related options. You can see here that I’ve set the minimum TLS version to 1.2, for instance.

With the apex-to-www redirect rule, however, there is something more interesting to look at. Here’s how we configure a “Page Rule”:

The interface is intuitive and uses natural language to simplify the process. It’s very straightforward to intercept URLs matching a pattern (in my case lacking the www subdomain) and send them somewhere else. This is probably the least exciting kind of Page Rule. Other uses might include preventing sensitive details from being cached, for instance. (There’s even one intriguingly called “Rocket Loader”.) You can read more about Page Rules in the Cloudflare docs.

Overall, Cloudflare is a very feature-rich offering. The dashboard is packed with statistics and configuration options to explore. The free tier is obviously a loss-leader for them – you’ll be teased by many of the “pro” features as you look around – but it’s impressive what you get for free.

Final thoughts

I’ve been running my little static site for almost a month now, and my Azure bill is on track to be less than a penny. I’m quite interested to know how Microsoft will bill me for this! Even if they round it up to £0.01, I think I’ll still consider it to be effectively free.

Truth be told, I would have gladly paid more for the simplicity of having everything in one place. If the Azure CDN had done what I needed it to do, I might have been willing to overlook the £0.50/month (or whatever) as merely the price of convenience.

Now though, if Microsoft did improve their CDN offering, I think I’d have to give it a lot of thought. I really like the Cloudflare dashboard; the insights it and flexibility it offers. The Azure CDN team have a lot of catching up to do before I’d be tempted back based on features.

It’s a problem that will remain academic for the time being. I’m delighted with my setup as it is. It’s fully functional, ferociously fast, and best of all… free! Azure Blob Storage and Cloudflare make a great team.

What’s your preferred method of hosting static sites? Let me know in the comments.