Static Website Hosting on Azure Blob

Static website hosting on Azure Blob Storage enables you to serve static content (HTML, CSS, JavaScript, images, fonts, etc.) directly from a storage container via HTTP. The content is served as-is, with no server-side processing. This is ideal for sites that don't require dynamic content generation, such as landing pages, documentation, or single-page applications (SPAs) that rely on client-side JavaScript.

Traditional web hosting requires a web server (IIS, Apache, Nginx) to process requests and serve files. For static content, this overhead is unnecessary. Azure Blob static website hosting eliminates the need for a server, reducing cost and complexity. It leverages Azure's highly durable and scalable storage infrastructure, providing built-in redundancy and global reach. The feature was introduced to offer a simple, serverless option for hosting static sites, often used in conjunction with Azure CDN for low-latency access.

When you enable static website hosting on a storage account, Azure creates two special containers: $web (for content) and $logs (for optional logging). The $web container is the root of your website. Any file you upload to $web becomes accessible via the generated URL: https://<storage-account-name>.z13.web.core.windows.net. The URL format differs based on region and endpoint type (Azure global vs. national clouds).

Azure Storage uses a front-end layer that intercepts HTTP requests to the static website endpoint. This layer maps the request path to a blob in $web. For example, a request to /index.html retrieves the blob named index.html from $web. The storage service automatically sets the correct Content-Type header based on the file extension (e.g., .html -> text/html, .css -> text/css). It also supports caching headers via the blob's Cache-Control property.

To enable static website hosting via Azure Portal: 1. Navigate to your storage account. 2. Under 'Data Management', click 'Static website'. 3. Set Index document name (e.g., index.html). 4. Set Error document path (e.g., 404.html). 5. Save. The endpoint URL appears. 6. Upload your files to the $web container (visible under 'Containers').

Via Azure CLI:

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

To get the endpoint:

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

Via PowerShell:

$StorageAccount = Get-AzStorageAccount -ResourceGroupName <rg> -Name <account>
Set-AzStorageServiceMetricsProperty -Context $StorageAccount.Context -ServiceType Blob -MetricsType Hour
Enable-AzStorageStaticWebsite -Context $StorageAccount.Context -IndexDocument index.html -ErrorDocument404Path 404.html

A multinational corporation needs a low-cost, highly available landing page for a product launch. The page is static HTML with CSS and JavaScript for animations. The marketing team updates content quarterly. The solution: Enable static website hosting on a GPv2 storage account with RA-GRS redundancy. Upload files via Azure DevOps pipeline. Integrate with Azure CDN (Standard Microsoft) for global low latency and HTTPS. The CDN is configured with a 24-hour cache TTL. The custom domain (product.example.com) is mapped to the CDN endpoint. This setup handles millions of requests per month at minimal cost (storage + CDN egress). Common misconfiguration: forgetting to set the error document, causing 404 errors for missing pages to return generic Azure error pages instead of branded 404 page. Also, if the CDN is not purged after updates, users may see stale content for up to 24 hours. Solution: Use Azure CDN purge API after each deployment.

A startup deploys a React SPA for a customer portal. The SPA uses client-side routing (react-router). All routes like /dashboard and /profile must serve index.html so the JavaScript can handle routing. The solution: Enable static website hosting, set index document to index.html, and set error document to index.html. This way, any request that doesn't match a file (e.g., /dashboard) returns index.html with HTTP 200 status. However, this means actual 404 errors (e.g., missing API file) also return 200. To mitigate, the SPA's service worker can check for real 404s. The site is deployed via GitHub Actions to $web. Azure CDN is added for HTTPS. Performance consideration: The CDN caches the index.html for each path, which can cause issues if the SPA builds unique URLs. Solution: Disable query string caching or set a short TTL for HTML files.

A software company hosts versioned documentation for its product. Each version is a subfolder (e.g., /v1/, /v2/). The static site generator produces HTML files. The solution: Enable static website hosting, upload all version folders to $web. The index document for each folder is index.html. Users access https://docs.example.com/v2/. The site is integrated with Azure CDN for HTTPS. The team uses Azure Storage Lifecycle Management to archive old versions to cool tier after 60 days. However, lifecycle management cannot be applied directly to $web container blobs because the container is hidden. Workaround: Use a separate container for archival and move files programmatically. Common issue: The error document is set to a single 404.html, but users expect version-specific 404 pages. Solution: Use client-side JavaScript to detect missing versions and redirect.