Host a static website in Azure Storage

1. Sign in to the Azure portal to get started.

2. Locate your storage account and select it to display the account's Overview pane.

3. In the Overview pane, select the Capabilities tab. Next, select Static website to display the configuration page for the static website.

   

4. Select Enabled to enable static website hosting for the storage account.

5. In the Index document name field, specify a default index page (For example: index.html).

   The default index page is displayed when a user navigates to the root of your static website.

6. In the Error document path field, specify a default error page (For example: 404.html).

   The default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.

7. Click Save to finish the static site configuration.

   

8. A confirmation message is displayed. Your static website endpoints and other configuration information are shown within the Overview pane.

   

You can enable static website hosting by using the Azure CLI.

1. If you've installed the Azure CLI locally, open a command console application such as Windows PowerShell.

2. If your identity is associated with more than one subscription, then set your active subscription to subscription of the storage account that will host your static website.

   az account set --subscription <subscription-id>
   

   Replace the <subscription-id> placeholder value with the ID of your subscription.

3. Enable static website hosting.

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • Replace the <storage-account-name> placeholder value with the name of your storage account.

   • Replace the <error-document-name> placeholder with the name of the error document that will appear to users when a browser requests a page on your site that does not exist.

   • Replace the <index-document-name> placeholder with the name of the index document. This document is commonly "index.html".

You can enable static website hosting by using the Azure PowerShell module.

1. Open a Windows PowerShell command window.

2. Verify that you have Azure PowerShell module Az version 0.7 or later.

   Get-InstalledModule -Name Az -AllVersions | select Name,Version
   

   If you need to install or upgrade, see Install Azure PowerShell module.

3. Sign in to your Azure subscription with the Connect-AzAccount command and follow the on-screen directions.

   Connect-AzAccount -Environment AzureChinaCloud
   

4. If your identity is associated with more than one subscription, then set your active subscription to subscription of the storage account that will host your static website.

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   Replace the <subscription-id> placeholder value with the ID of your subscription.

5. Get the storage account context that defines the storage account you want to use.

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • Replace the <resource-group-name> placeholder value with the name of your resource group.

   • Replace the <storage-account-name> placeholder value with the name of your storage account.

6. Enable static website hosting.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Replace the <error-document-name> placeholder with the name of the error document that will appear to users when a browser requests a page on your site that does not exist.

   • Replace the <index-document-name> placeholder with the name of the index document. This document is commonly "index.html".

The following instructions show you how to upload files by using the Azure portal. You could also use AzCopy, PowerShell, CLI, or any custom application that can upload files to the $web container of your account. For a step-by-step tutorial that uploads files by using Visual Studio code, see Tutorial: Host a static website on Blob Storage.

1. In the Azure portal, navigate to the storage account containing your static website. Select Containers in the left navigation pane to display the list of containers.

2. In the Containers pane, select the $web container to open the container's Overview pane.

   

3. In the Overview pane, select the Upload icon to open the Upload blob pane. Next, select the Files field within the Upload blob pane to open the file browser. Navigate to the file you want to upload, select it, and then select Open to populate the Files field. Optionally, select the Overwrite if files already exist checkbox.

   

4. If you intend for the browser to display the contents of file, make sure that the content type of that file is set to text/html. To verify this, select the name of the blob you uploaded in the previous step to open its Overview pane. Ensure that the value is set within the CONTENT-TYPE property field.

   

   Note

   This property is automatically set to text/html for commonly recognized extensions such as .html. However, in some cases, you'll have to set this yourself. If you don't set this property to text/html, the browser will prompt users to download the file instead of rendering the contents. This property can be set in the previous step.

Upload objects to the $web container from a source directory.

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

• Replace the <storage-account-name> placeholder value with the name of your storage account.

• Replace the <source-path> placeholder with a path to the location of the files that you want to upload.

Upload objects to the $web container from a source directory.

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

• Replace the <path-to-file> placeholder value with the fully qualified path to the file that you want to upload (For example: C:\temp\index.html).

• Replace the <blob-name> placeholder value with the name that you want to give the resulting blob (For example: index.html).

In the pane that appears beside the account overview page of your storage account, select Static Website. The URL of your site appears in the Primary endpoint field.

Find the public URL of your static website by using the following command:

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

• Replace the <storage-account-name> placeholder value with the name of your storage account.

• Replace the <resource-group-name> placeholder value with the name of your resource group.

Find the public URL of your static website by using by using the following command:

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

• Replace the <resource-group-name> placeholder value with the name of your resource group.

• Replace the <storage-account-name> placeholder value with the name of your storage account.