Azure Storage Docs

Static Website Hosting with Azure Blob Storage

This guide explains how to configure Azure Blob Storage to host a static website. Static websites are websites where content is delivered to the user exactly as it is stored. This can include HTML, CSS, and JavaScript files, as well as images and other media assets.

Note: This feature is available in all Azure regions. For specific feature availability details and any preview limitations, refer to the Azure product documentation.

Key Benefits

  • Cost-effective: Blob storage is an inexpensive way to store website assets.
  • Scalable: Handles high traffic loads automatically.
  • Global Distribution: Can be combined with Azure CDN for fast, global delivery.
  • Secure: Leverages Azure's robust security features.

Steps to Enable Static Website Hosting

1

Navigate to your storage account in the Azure portal.

2

In the left-hand menu, under Data management, select Static website.

3

Set the Static website toggle to Enabled.

4

Specify the name of your Index document name (e.g., index.html) and your Error document path (e.g., 404.html).

These files are typically at the root of your website.

5

Click Save.

This action will create a container named $web in your storage account. This container will store your website's static files.

Uploading Your Website Content

Once static website hosting is enabled, Azure creates a container named $web. You can upload your website's HTML, CSS, JavaScript, and other assets to this container. The files will be served directly from this container.

Using Azure Storage Explorer

Azure Storage Explorer is a graphical tool that allows you to manage your Azure storage resources. It's a convenient way to upload your website files.

  1. Download and install Azure Storage Explorer.
  2. Connect to your Azure subscription and navigate to your storage account.
  3. Select the $web container.
  4. Drag and drop your website files and folders into the $web container.

Using Azure CLI

You can also use the Azure Command-Line Interface (CLI) to upload your files.

az storage blob upload-batch \
    --account-name  \
    --destination '$web' \
    --source ./your-website-folder \
    --auth-mode login

Replace with your actual storage account name and ./your-website-folder with the path to your local website files.

Accessing Your Static Website

After uploading your content, your static website will be accessible via a primary web endpoint URL. This URL is generated automatically and can be found in the Static website blade of your storage account.

The URL typically looks like this:

https://.z.web.core.windows.net/

Tip: For custom domain names and HTTPS, consider integrating Azure CDN with your static website.

Common Scenarios and Configurations

Index and Error Documents

The Index document name is the default page served when a user navigates to the root of your website or a directory. The Error document path is served when a requested resource is not found (e.g., a 404 error).

Routing with JavaScript Frameworks

For single-page applications (SPAs) built with frameworks like React, Angular, or Vue.js, you'll typically want to configure your Error document path to point to your index.html file. This ensures that client-side routing correctly handles deep links and page refreshes.

If your SPA uses client-side routing, set your Error document path to index.html.

Customizing the Index and Error Documents

You can change the names of the index and error documents at any time by editing the settings in the Static website blade.

Security Considerations

  • By default, the $web container is publicly accessible.
  • For more granular control, consider using Azure CDN with managed identities or SAS tokens for restricted access.
  • Ensure your website code does not contain sensitive information.

Next Steps