Configure Static Website

This document guides you through the process of configuring a static website hosted on Azure Blob Storage.

What is Azure Storage Static Website?

The static website feature in Azure Blob Storage allows you to host static content files (HTML, CSS, JavaScript, images) directly from a storage account. It provides a globally available endpoint for your website, often at a lower cost than other hosting solutions.

Enabling the Feature

To enable the static website feature, you need to configure it within your Azure Storage account settings.

Steps:

Navigate to your Azure Storage account in the Azure portal.
In the left-hand menu, under Data management, select Static website.
Toggle the Static website option to Enabled.
Specify the Index document name (e.g., index.html). This is the default page that will be served when a user requests the root URL or a directory.
Optionally, specify the Error document path (e.g., 404.html). This page will be served when a requested resource is not found.
Click Save.

Once enabled, Azure Storage automatically creates a container named $web. This is where you will upload your website's static files.

Important: The $web container is hidden by default. You can upload files to it using tools like Azure Storage Explorer, Azure CLI, or the Azure SDKs.

Uploading Website Content

After enabling the feature, upload your website's static assets (HTML, CSS, JS, images, etc.) into the $web container. Ensure that your index document (e.g., index.html) is at the root of this container or in the specified path.

Example Upload using Azure CLI:


az storage blob upload-batch \
    --account-name <your-storage-account-name> \
    --destination '$web' \
    --source <path-to-your-website-files> \
    --auth-mode login

Replace <your-storage-account-name> with your storage account name and <path-to-your-website-files> with the local path to your website's root directory.

Accessing Your Website

After uploading your content, Azure Storage provides a primary endpoint for your static website. You can find this endpoint URL in the Static website configuration pane in the Azure portal.

Tip: For custom domains and SSL certificates, consider using Azure CDN (Content Delivery Network) in front of your static website endpoint.

Configuration Settings

Static Website Settings

Index document name The name of the index document (e.g., index.html).

Error document path The path to the error document (e.g., 404.html).

Enable CORS (Cross-Origin Resource Sharing) Allows web applications from different domains to access your storage resources.

Troubleshooting

404 Not Found: Ensure the Index document name and Error document path are correctly configured and the files exist in the $web container.
Access Denied: Verify that your files are uploaded to the $web container and that your public access level is configured appropriately (though for static websites, direct access is usually enabled via the endpoint).
CORS Issues: If your website makes requests to other domains, ensure CORS is properly configured in Azure Storage or via Azure CDN.