How to configure Azure Blob Static Website: step by step

João Barros 04 de October de 2026 5 min read

This tutorial shows how to publish a simple static website using Azure Blob Storage Static Website. It is a lightweight and cost-effective solution to host landing pages, single-page apps (SPA) or technical documentation without needing a Web App, server or complex CDN. Here I explain the reason for each step and provide practical commands to get your site online in a few minutes.

Prerequisites

Azure account with permissions to create resources (Subscription Contributor or higher).
Azure CLI installed and authenticated (az login).
A small local static site — typically at least index.html and 404.html; for example a directory ./site with 5–20 files (HTML, CSS, JS, images).
Optional: Azure Storage Explorer to visually inspect the $web container.

Why this is useful: Azure Blob Static Website serves files directly from a special container ($web). There are no running servers, the service automatically scales with traffic and the cost is mainly storage + egress. For a simple static site, you can have costs of only a few cents per month under low traffic.

Step 1: Create a Storage Account

Create a Storage Account of type StorageV2 (general-purpose v2) with Standard_LRS replication. The Storage Account name must be globally unique and use only lowercase alphanumeric characters.

az group create --name rg-staticweb --location northeurope
az storage account create --name mystaticacct12345 --resource-group rg-staticweb --location northeurope --sku Standard_LRS --kind StorageV2

Practical notes: choose northeurope if you are in Europe for lower latencies. Standard_LRS is a good initial choice (lower cost); if you need higher resilience you can use GRS/RA-GRS. A real example: a small landing page with 1 MB of content spread across 20 files usually has storage costs under €0.10/month, plus egress cost depending on visits.

Step 2: Enable Static Website on the Storage Account

Enable the static website feature and set the index and 404 documents. This tells the service to map requests to the root to index.html and handle errors with 404.html.

az storage account update --name mystaticacct12345 --resource-group rg-staticweb --set allowBlobPublicAccess=true

# Enable static website and set default files
az storage blob service-properties update --account-name mystaticacct12345 --static-website --index-document index.html --404-document 404.html

Explanation: allowBlobPublicAccess=true allows blobs to be served publicly; if you prefer restriction, use a SAS or a CDN with a private origin. After enabling, Azure automatically creates the $web container.

Step 3: Upload the site files

Upload your local directory files to the $web container. The example uses the connection string, but you can use a SAS token or SharedKey.

CONN=$(az storage account show-connection-string --name mystaticacct12345 --resource-group rg-staticweb -o tsv)

# Upload all files from the ./site directory
az storage blob upload-batch --connection-string "$CONN" --destination '$web' --source ./site

# Verify that the blobs were uploaded
az storage blob list --connection-string "$CONN" --container-name '$web' -o table

Practical example: if you have 12 files, the upload-batch command will send them in parallel. If a file fails due to network issues, retry uploading the specific file.

Step 4: Configure MIME types and caching (optional)

To ensure browsers correctly interpret CSS and JS and to optimize performance, set Content-Type and Cache-Control. A common pattern is to set a long cache for versioned static files (hash in the filename) and a short cache for index.html.

az storage blob upload --connection-string "$CONN" --container-name '$web' --file ./site/styles.css --name styles.css --content-type 'text/css' --content-cache-control 'public, max-age=31536000'

# For index.html (short cache)
az storage blob upload --connection-string "$CONN" --container-name '$web' --file ./site/index.html --name index.html --content-type 'text/html' --content-cache-control 'no-cache, must-revalidate'

Rule of thumb: use max-age=31536000 (1 year) for stable assets and no-cache for files that may change without a name change.

Step 5: Get the public URL and configure a custom domain (optional)

Get the public endpoint created and test the site. If you want a custom domain with HTTPS, consider using Azure CDN or Azure Front Door because the static website endpoint does not directly support TLS for custom domains.

az storage account show --name mystaticacct12345 --resource-group rg-staticweb --query "primaryEndpoints.web" -o tsv
# Example output: https://mystaticacct12345.z6.web.core.windows.net/

For custom domains: create a CNAME record to point to the endpoint and validate the domain. For automatic HTTPS and better caching, deploy Azure CDN or Front Door (may cost from a few euros/month depending on traffic).

Verify the result

Visit the endpoint URL; you should see the content of index.html. Test a non-existent route and confirm that 404.html appears. If you cannot find files, check that they are in the $web container with az storage blob list and confirm the Content-Type. Common error: 403 Forbidden — this indicates that allowBlobPublicAccess is disabled or you used invalid credentials; solution: enable the option or use a valid SAS.

Conclusion

You now have a static website running on Azure Blob Static Website. It's quick to set up and very suitable for simple projects. Suggested next steps: automate deploys with GitHub Actions (build and run the same CLI commands), add a custom domain with Azure CDN for HTTPS, or define fine-grained cache policies to reduce latency. Final tip: always confirm files are in the '$web' container and that the Content-Type values are correct to avoid rendering issues in the browser.