Host a static website in Azure Storage

You can serve static content (HTML, CSS, JavaScript, and image files) directly from a container in an Azure Storage GPv2 account. To learn more, see Static website hosting in Azure Storage.

This article shows you how to enable static website hosting by using the Azure portal, the Azure CLI, or PowerShell.

Enable static website hosting

Static website hosting is a feature that you have to enable on the storage account.

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

  2. Locate your storage account and display the account overview.

  3. Select Static website to display the configuration page for static websites.

  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. The Azure portal now displays your static website endpoint.

    Enable static website hosting for a storage account

Upload files

These instructions show you how to upload files by using the version of Storage Explorer that appears in the Azure portal. However, you can also use the version of Storage Explorer that runs outside of the Azure portal. You could 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. Select Storage Explorer (preview).

  2. Expand the BLOB CONTAINERS node, and then select the $web container.

  3. Choose the Upload button to upload files.

    Upload files

  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.

    Check content types

    Note

    Storage Explorer automatically sets this property 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. To set this property, right-click the file, and then click Properties.

Find the website URL

You can view the pages of your site from a browser by using the public URL of the website.

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.

Azure Storage static websites metrics metric

Enable metrics on static website pages

Once you've enabled metrics, traffic statistics on files in the $web container are reported in the metrics dashboard.

  1. Click Metrics under the Monitor section of the storage account menu.

    Metrics link

    Note

    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're able to select the necessary API member, the first step is to expand the time frame.

  2. Click on the time frame button, choose a time frame, and then click Apply.

    Azure Storage static websites metrics time range

  3. Select Blob from the Namespace drop down.

    Azure Storage static websites metrics namespace

  4. Then select the Egress metric.

    Azure Storage static websites metrics metric

  5. Select Sum from the Aggregation selector.

    Azure Storage static websites metrics aggregation

  6. Click the Add filter button and choose API name from the Property selector.

    Azure Storage static websites metrics API name

  7. Check the box next to GetWebContent in the Values selector to populate the metrics report.

    Azure Storage static websites metrics GetWebContent

    Note

    The GetWebContent checkbox appears only if that API member was used within a given time frame. The portal only displays API members used within a given time frame in order to only focus on members that return data. If you can't find a specific API member in this list, expand the time frame.

Next steps