Part 1: Azure Storage Static Websites with CloudFlare

Azure Storage is a great multipurpose storage solution and is utilized by many Azure services to store everything from log files to VM disks. It also offers many services on its own, the latest fresh out of preview is Azure Storage Static Websites.

AWS has long offered static website hosting in S3 buckets, so it’s nice to see Azure catch up on this front.

For the heck of it I decided to take this new feature for a spin, with one catch – use CloudFlare as the CDN. CloudFlare offers tons of features, even with the free account, such as DDoS protection and free SSL. Now it’s possible to use an Azure CDN to do something similar, but sometimes it’s nice to see how everything can play together.

If you’re following along at home, you’ll need an Azure subscription, a domain name and a free CloudFlare account.

First step, create a new new Azure Gen 2 Storage Account:

Once created, head over to the Static website blade for the Storage Account. Enable the Static website feature and click Save. Once saved, you will be presented wit ha new Primary endpoint URL specifically for the static website.

While you’re here, go ahead and provide an Index document name and Error document name.

Now that the feature is enabled, head over to the Blobs blade. Notice a new container has been created named $web. Azure has already set the permissions so that it’s accessible by everyone.

At this point go ahead and use the Azure Portal to upload a sample index.html file to the $web container. I highly recommend downloading  Azure Storage Explorer if you plan to interact with Storage Accounts on a regular basis.

At this point fire up a web browser and navigate to the endpoint URL. You should be presented with your index.html document.

OK, if that worked it’s time to to move on to configuring CloudFlare and the Storage Account for a custom domain. I’ll cover this in part two.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.