Static website hosting with Azure Blob Storage

Azure Blob Storage offers a cost-effective way to host a static website directly from a storage account. This method is ideal for sites that don't require server-side processing, such as documentation sites, single-page applications (SPAs), or marketing landing pages.

Benefits of using Azure Blob Storage for static websites

Cost-effectiveness: Pay only for the storage and data transfer.
Scalability: Blob Storage scales automatically to handle high traffic.
Durability: Built-in redundancy ensures your data is safe.
Global Distribution: Use Azure CDN to cache your content globally for faster delivery.
Simplicity: Easy to set up and manage for static content.

Steps to host a static website

1. Enable static website hosting

Navigate to your storage account in the Azure portal. Under Data management, select Static website.

Toggle the status to Enabled. Specify your index document name (e.g., index.html) and your error document path (e.g., 404.html).

Once enabled, Azure creates a special container named $web for your website's content. You'll also get a primary endpoint URL for your website.

                Note: If you are migrating an existing static website, ensure your index and error document names match the files in your project.
            

2. Upload your website files

Upload all your static website files (HTML, CSS, JavaScript, images, etc.) to the $web container in your Blob Storage account. You can use the Azure portal, Azure CLI, Azure Storage Explorer, or SDKs for this.

# Example using Azure CLI to upload files
az storage blob upload-batch --account-name <your-storage-account-name> --source <path-to-your-website-files> --destination '$web' --auth-mode login

Make sure your index.html file is at the root of the $web container.

3. Access your website

After uploading your files, your static website will be accessible via the primary endpoint URL provided in the Azure portal. It might take a few minutes for the changes to propagate.

The primary endpoint typically looks like this:

https://<your-storage-account-name>.z20.web.core.windows.net/

Custom Domain and HTTPS

To use a custom domain name and enable HTTPS, you can integrate Azure CDN with your Blob Storage static website.

Learn More: For detailed instructions on setting up a custom domain and HTTPS with Azure CDN, refer to the official Azure documentation.

Considerations

Security: Blob Storage static website endpoints are publicly accessible. Use Azure CDN for advanced security features like WAF.
Client-side Routing: If your SPA uses client-side routing (e.g., React Router, Vue Router), you might need to configure Azure CDN to redirect all non-existent requests to your index.html file to handle deep linking and page refreshes correctly.
Dynamic Content: For dynamic content or server-side logic, consider other Azure services like Azure Functions, App Services, or Azure Static Web Apps.

Important: When configuring Azure CDN for a static website hosted on Blob Storage, ensure that your CDN endpoint is configured to serve content from the $web origin.

Azure Blob Storage provides a robust, scalable, and economical solution for serving static websites. By following these steps, you can quickly deploy your static content and make it available to users worldwide.