Static Website Hosting on an Azure Storage Account

Overview

There are many ways to host websites in Azure. The newest of these is to store static website code in a special container in a General Purpose v2 (GPv2) storage account. The benefit of this is that you get an ultra-simple configuration and an ultra-low cost. The website code must be static, but backend process execution can be done with Azure platform features such as Functions. If you need dynamic content, then Microsoft recommends you stick with Azure App Services or, if you really need to, virtual machines.
At the most basic level, the cost of hosting will be:

• Hot blob storage (GB per month) in a GPv2 storage account.
• Outbound data transfer

Additional costs might be accrued if you add extra features such as Content Delivery Network (CDN), Functions, and so on.

The Storage Account

The infrastructure you require for this hosting is a GPv2 storage account – GPv1 is not supported.

Wait for the storage account to be created. Once it is, open the storage account and browse to Static Website under settings. Here you should:

1. Set Static Website to enabled.
2. Add the filename for Index Document Name, the default website document.
3. Optionally add the Error Document Path, the default error page to load.
4. Click Save.

After the save commits, the URL of the website will appear – document this.

Upload Content

Now you can upload content to the storage account. Once you enable static website hosting, a system container called $web is created in blob storage in the GPv2 storage account. This will be where you store the website. There are many ways to get content into the container:

• Azure Storage Explorer (desktop)
• Storage Explorer (Azure Portal)
• AzCopy
• Azure Pipelines
• Visual Studio Code extension

In my case, I am using the Azure Storage Explorer.

Now if I browse the site using the previously captured default URL then it will load my static content.

Custom DNS

The default URL is not quite user-friendly and most people will need a vanity URL, such as http://petri.com. There are a couple of gotchas.
You might have noticed that the storage account provides HTTPS hosting. Currently, we cannot upload a custom SSL certificate to a storage account to be associated with a vanity domain URL. The only workaround is to abstract the storage account using Azure’s CDN, which will have the added benefit of improving the performance of the website.
The second gotcha is that the static website on the storage account does not have a static public IP address. This means that we cannot create a root vanity domain name (petri.com) and users will have to browse to petri.com.
If you want to use SSL/TLS then you have no choice right now but to use the aforementioned CDN solution. However, if you want to enable insecure browsing (no SSL/TLS) then

1. Open the storage account in the Azure Portal.
2. Browse to Settings > Configuration.
3. Set Secure Transfer Required to Disabled – Enabled forces HTTPS-only browsing.

You can associate a vanity domain by doing the following:

1. Open the management tool of your DNS hosting service.
2. Create a CNAME record that points to the previously captured default URL of the website. For example, create a CNAME for www in the petri.com DNS domain and set the alias to the default site URL.
3. Open the storage account in the Azure Portal.
4. Browse to Blob Service > Custom Domain.
5. Enter the complete new alias name, such as petri.com – this must match what your new DNS name is.
6. Click Save.

You will probably have to wait a few minutes for the new name to be usable.