I'm a creator, product manager and programmer based in London

Writing

Writings and musings about history, technology, development and anything else that seems interesting.

Hosting a static site using Azure Blob Storage

Paying to host sites for side and past projects using a virtual machine can prove costly and wasteful, even on shared plans and especially if usage is low. A new Azure Storage feature, currently in preview, allows you to use Azure Blob Storage to host static sites in cost-effective and easy way.

After reading about trends in serverless architecture I reviewed my personal Azure usage to see if any of my sites could be converted to use Azure Functions, where you are changed per request rather than hourly. All the sites I had running were sharing an Azure App Service B1 plan, which allows 5+ apps to share a server – cutting down on some of the cost, but at £41.50 a month still not exactly cheap given the intermittent usage.

 The only remaining page of the  Foundbite  home page.

The only remaining page of the Foundbite home page.

One of the sites on my App Service plan was for Foundbite, an app for sharing sound and photos that I built a few years ago. Though now shut down, we kept the site as a public record and showcase for some of the best foundbites shared by our users. When the service was running the site was dynamic and allowed users to share their Foundbites with friends on external services like Facebook and Twitter. After we closed it down, we transformed the site into a static page with a limited number of our favourite clips saved locally on the server, but we kept it as an ASP.NET app. As this static page is now accessed <100 times per month it was my first candidate site to convert to serverless.

I was initially planning to use Azure Functions as Anthony Chu does here. However, by chance I came across a preview feature in Azure Blob Storage that allows you to serve static files. You pay for storage space and bandwidth, which for the usage in this case is negligible. I converted the site in an evening. Here are the steps to convert your ASP.net to a static site hosted in Azure Storage:

Converting the Site

1. Create an Azure Storage Account for the site. As you can only have one static site per storage you’ll need one storage account for each, but that’s no big deal - you'll be charged for the bandwidth you use and the amount you are storing.

 Set up your Azure Storage account to host a static site and below, uploading site content via Visual Studio Storage Explorer

Set up your Azure Storage account to host a static site and below, uploading site content via Visual Studio Storage Explorer

2. Opening the created account, find the static site option half way down the lefthand-side menu and enable the feature. This creates a public Blob container called $web in which we’ll place our files.

3. Save the html file for your page, the JavaScript and CSS bundle files which were outputted from the ASP.net site along with the site content to local folders. I took copies of the images and sound used for the featured Foundbite slideshow.

4. Create new Blob containers/folders inside $web for the site content (image, sound, favicons etc.) and upload this using Visual Studio Storage Explorer.

5. Finally, save the html file to the server as a child of $web and enter it into the field for your site’s default view. I also made ours the error page, as we have lots of links all over the web pointing to foundbites that no longer exist.

6. Et voila! Your static site is now live at the URL given (after a small delay): https://foundbite.z33.web.core.windows.net/

Altogether, it is a pretty simple process, although I had a hiccup getting my CSS files to work. I’d set them up on Azure as the generic Content-Type rather than text/css causing them to be treated differently by the browser. A tricky one to spot – watch out for it!

Watch out for the content type when uploading files

Custom Domain and SSL

At this stage Blob Storage static sites do not support custom domains or SSL, which is a bit naff as you don’t really want to use the ugly domain they’ve given you or for your users to get browser warnings when they try to view the site using https. But there is good news in the form of the Azure Content Delivery Network.

The main purpose of the Azure CDN is to sit between your app and your users, caching content “at the edge” close to your users’ location, thereby improving the time it takes you to deliver images and content to them. With this small site that performance boost is not really important to us, but it does allow you to use custom domains and will also create a free SSL certificate. As it is metered, you’ll only be charged for what you use.

The steps to create a CDN and then encrypt your static site's traffic are as follows:

1. Create a new Azure CDN resource. Configure the origin by setting type to be “custom origin” and the hostname and header to be the URL given in Azure Blob Storage.

 The view after creating the CDN and, on the left, adding a custom origin pointing to our Azure Storage Static site.

The view after creating the CDN and, on the left, adding a custom origin pointing to our Azure Storage Static site.

2. Add a new endpoint to the CDN and configure a custom domain.

3. Follow the simple steps to confirm the domain and Azure will generate a custom SSL certificate for you.

 The process Azure takes you through provisioning an SSL certificate for your custom domain and, right, the finished business.

The process Azure takes you through provisioning an SSL certificate for your custom domain and, right, the finished business.

That’s it – enjoy your static site with custom domain and SSL and the cost savings that will go with it!