Static website hosting in Azure Blob Storage

1 minute read

Setting up

Create a storage account with blob storage. Then enable static website on the storage account. It’ll ask you what would be the name of the default file. I chose index.html, as it’s the default html file of my react app.

Enable Static website

Once enabled, it’ll create $web directory / folder on the blob container.

It shows the endpoint:

Uploading content

You can use any of these tools to upload content to the $web container.

I used Azure Storage Explorer for testing purpose, but would set up an Azure Pipeline to deploy the change automatically whenever a new commit gets pushed.

Public access level of the web container

The files at the primary static website endpoint are served through anonymous access requests, which means public read-only access to all files.

I used Public access level: Blob, so that the primary static website endpoint would be

Integrate a static website with Azure CDN

You can enable Azure CDN for your static website

  • Go to your storage account overview
  • Under the Blob Service menu, select Azure CDN to open the Azure CDN page
  • Specify your static website endpoint in the Origin hostname field.

  • Update Origin fields like these. Otherwise, you would have the infamous XML error

Map a custom domain

Go to Custom domains menu and set up your custom domain. You can use cname mapping. Also, provision SSL certificate, so that you wouldn’t get security warning.

Create a CNAME DNS record with your domain provider. The domain should point to After Azure CDN verifies the CNAME record that you create, traffic addressed to the source custom domain would be routed to the specified destination.