How to Host a Static Website on Azure Blob Storage

To host a static website on Azure Blob Storage, enable the Static website feature in the storage account settings and upload your site files to the $web container. Azure then serves your files as a website with a public URL.

Syntax

To host a static website on Azure Blob Storage, you must enable the Static website feature and specify the index.html and optionally error.html files. Your files must be uploaded to the special container named $web.

• index document name: The main page of your website, usually index.html.
• error document path: Optional page shown on errors, usually 404.html.
• $web container: A reserved container where all your static files must be uploaded.

bash

az storage blob service-properties update --account-name <storage-account-name> --static-website --index-document index.html --error-document 404.html

az storage blob upload-batch --account-name <storage-account-name> --source <local-folder-path> --destination $web

Example

This example shows how to enable static website hosting on an Azure Storage account named mystorageaccount, upload your local website files from ./site folder, and get the website URL.

bash

az storage blob service-properties update --account-name mystorageaccount --static-website --index-document index.html --error-document 404.html

az storage blob upload-batch --account-name mystorageaccount --source ./site --destination $web

az storage account show --name mystorageaccount --query "primaryEndpoints.web" --output tsv

Output

https://mystorageaccount.z6.web.core.windows.net/

Common Pitfalls

• Forgetting to enable the Static website feature disables website hosting.
• Uploading files to any container other than $web will not serve them as a website.
• Not setting the index.html file name correctly causes the site to fail loading the main page.
• Using the wrong storage account name or missing permissions causes command failures.

bash

Wrong (files uploaded to 'mycontainer'):
az storage blob upload-batch --account-name mystorageaccount --source ./site --destination mycontainer

Right (files uploaded to '$web'):
az storage blob upload-batch --account-name mystorageaccount --source ./site --destination $web

Quick Reference

Summary tips for hosting static websites on Azure Blob Storage:

• Enable Static website in storage account settings.
• Upload all site files to the $web container.
• Set index.html as the index document.
• Use Azure CLI commands for easy setup and deployment.
• Access your site via the primaryEndpoints.web URL.

Key Takeaways

Enable the Static website feature in your Azure Storage account to host files as a website.

Upload your website files only to the special $web container for public access.

Set the index document (usually index.html) correctly to load your main page.

Use Azure CLI commands to configure and deploy your static website easily.

Access your site via the provided web endpoint URL from the storage account.