Hosting a static website on Azure Blob Storage

This article explains how to host a static website on Azure Blob Storage. Azure Blob Storage offers a cost-effective way to host static content (HTML, CSS, JavaScript, and images) directly from a storage account. This approach is ideal for static websites, gaming websites, or any site where content doesn't change frequently.

Overview

Static website hosting is a feature that can be enabled on an Azure Storage account. When enabled, the storage account creates a special container named $web for storing website files. You can then point your custom domain or a direct Azure URL to this container to serve your static content.

Note: Static website hosting is only supported on Storage accounts created with the StorageV2 (general-purpose v2) or BlobStorage account types.

Steps to Enable Static Website Hosting

Create or Select a Storage Account

You can enable static website hosting on a new or existing Azure Storage account. Ensure the account type is StorageV2 or BlobStorage.

To create a new account with the Azure portal:

Navigate to the Azure portal.
Select Create a resource.
Search for Storage account and select it.
Click Create.
Fill in the required details, ensuring you select the correct Account kind (StorageV2 (general-purpose v2) or BlobStorage).

Enable Static Website Feature

Once your storage account is created, navigate to its overview page in the Azure portal. Then:

In the left-hand menu, scroll down to the Data management section and select Static website.
Toggle the Static website option to Enabled.
Specify your Index document name (e.g., index.html). This is the default page served when a user navigates to your website's root.
Optionally, specify your Error document path (e.g., 404.html). This page is served when an error occurs, such as a requested file not being found.
Click Save.

After saving, Azure will automatically create a blob container named $web. You'll also see the Primary endpoint for your static website displayed on this page. This is the URL you'll use to access your website.

Upload Your Website Content

Upload your website's static files (HTML, CSS, JavaScript, images, etc.) to the $web container.

You can use various tools to upload your files:

Azure Portal: Navigate to the $web container, then click Upload.
Azure Storage Explorer: A free, cross-platform GUI tool for managing Azure storage resources.
Azure CLI: Use the az storage blob upload-batch command for uploading multiple files.
Azure PowerShell: Use Set-AzStorageBlobContent for uploading.

Ensure your main index page (e.g., index.html) is at the root of the $web container.

For the static website feature to work, the $web container must be publicly accessible. Azure automatically configures this for the $web container when static website hosting is enabled. You do not need to change the public access level of the $web container.

Accessing Your Website

Once your files are uploaded, you can access your static website using the Primary endpoint URL provided in the static website settings of your storage account. For example:

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

Configuring a Custom Domain

To use your own domain name (e.g., www.yourdomain.com) instead of the Azure endpoint, you'll need to configure a custom domain.

Configure DNS: Create a CNAME record in your domain's DNS settings that points your subdomain (e.g., www) to the primary endpoint of your static website.
Azure CDN (Recommended): For better performance, scalability, and HTTPS support, it's highly recommended to use Azure Content Delivery Network (CDN) with your static website. Configure an Azure CDN profile and endpoint, and then map your custom domain to the CDN endpoint. This also allows you to easily manage SSL certificates.

Tip: Using Azure CDN is crucial for production environments. It provides caching at edge locations worldwide, significantly reducing latency for your users.

Key Considerations

Content Type: Ensure your files have the correct MIME types set when uploading. Azure Blob Storage usually infers this, but it's good practice to verify.
HTTPS: For secure access, use Azure CDN to enable HTTPS for your custom domain. The direct Azure endpoint URL is served over HTTP.
Limits: Be aware of Azure Storage account limits (e.g., total capacity, number of blobs).
Dynamic Content: This feature is for static content only. For dynamic websites, consider Azure App Service, Azure Functions, or Azure Kubernetes Service.

Troubleshooting

404 Not Found: Double-check that your index document name is correctly specified and that the file exists at the root of the $web container. Verify the file name spelling and case.
Access Denied: Ensure the $web container's public access level is correctly set (Azure manages this automatically).
Incorrect MIME types: If your CSS or JavaScript isn't loading, the MIME type might be wrong. You can set it explicitly during upload or update it using tools like Azure Storage Explorer.

By following these steps, you can effectively leverage Azure Blob Storage to host your static websites with high availability and scalability.