Static website hosting in Azure Storage
In contrast to static website hosting, dynamic sites that depend on server-side code are best hosted using Azure App Service.
How does it work?
When you enable static website hosting on your storage account, you select the name of your default file and optionally provide a path to a custom 404 page. As the feature is enabled, a container named $web is created if it doesn't already exist.
Files in the $web container are:
- served through anonymous access requests
- only available through object read operations
- available to the public web following this pattern:
- available through a Blob storage endpoint following this pattern:
You use the Blob storage endpoint to upload files. For instance, the file uploaded to this location:
is available in the browser at a location like this:
The selected default file name is used at the root and any subdirectories when a file name is not provided. If the server returns a 404 and you do not provide an error document path, then a default 404 page is returned to the user.
CDN and SSL support
To make your static website files available over HTTPS, see Using the Azure CDN to access blobs with custom domains over HTTPS. As a part of this process, you need to point your CDN to the web endpoint as opposed to the blob endpoint. You may need to wait a few minutes before your content is visible as the CDN configuration is not immediately executed.
Custom domain names
You can configure a custom domain name for your Azure Storage account to make your static website available via a custom domain. For an in-depth look at hosting your domain on Azure, see Host your domain in Azure DNS.
Static website hosting is provided at no additional cost. For more details on prices for Azure Blob Storage, check out the Azure Blob Storage Pricing Page.
Begin by opening the Azure portal at https://portal.azure.com and run through the following steps on your GPv2 storage account:
- Click on Settings
- Click on Static website
- Enter an index document name. (A common value is index.html)
- Optionally enter an error document path to a custom 404 page. (A common value is 404.html)
Next, upload your assets to the $web container via the Azure portal or with the Azure Storage Explorer to upload entire directories. Make sure to include a file that matches the index document name you selected when enabling the feature.
Finally, navigate to your web endpoint to test your website.
Install the storage preview extension:
az extension add --name storage-preview
In the case of multiple subscriptions, set your CLI to the subscription of the GPv2 storage account you wish to enable:
az account set --subscription <SUBSCRIPTION_ID>
Enable the feature. Make sure to replace all placeholder values, including brackets, with your own values:
az storage blob service-properties update --account-name <ACCOUNT_NAME> --static-website --404-document <ERROR_DOCUMENT_NAME> --index-document <INDEX_DOCUMENT_NAME>
Query for the web endpoint URL:
az storage account show -n <ACCOUNT_NAME> -g <RESOURCE_GROUP> --query "primaryEndpoints.web" --output tsv
Upload objects to the $web container from a source directory. Be sure to properly escape the reference to the $web container in the command. For example, if you are using Azure CLI from CloudShell in the Azure portal, escape the $web container as shown:
az storage blob upload-batch -s <SOURCE_PATH> -d \$web --account-name <ACCOUNT_NAME>
Methods available for deploying content to a storage container include the following:
In all cases, make sure you copy files to the $web container.
To enable metrics on your static website pages, click on Settings > Monitoring > Metrics.
Metrics data are generated by hooking into different metrics APIs. The portal only displays API members used within a given time frame in order to only focus on members that return data. In order to ensure you are able to select the necessary API member, the first step is to expand the time frame.
Click on the time frame button and select Last 24 hours and then click Apply
Next, select Blob from the Namespace drop down.
Then select the Egress metric.
Select Sum from the Aggregation selector.
Next, click the Add filter button and choose API name from the Property selector.
Finally, check the box next to GetWebContent in the Values selector to populate the metrics report.
Once enabled, traffic statistics on files in the $web container are reported in the metrics dashboard.
Is the static websites feature available for all storage account types?
No, static website hosting is only available in GPv2 standard storage accounts.
Are Storage VNET and firewall rules supported on the new web endpoint?
Yes, the new web endpoint obeys the VNET and firewall rules configured for the storage account.
Is the web endpoint case-sensitive?
Yes, the web endpoint is case-sensitive just like the blob endpoint.
We’d love to hear your thoughts. Choose the type you’d like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.