Tutorial: Host a static website on Blob Storage

  • Article
  • 4 minutes to read

In this tutorial, you'll larn how to build and deploy a static website to Azure Storage. When you're finished, yous will have a static website that users tin access publicly.

In this tutorial, yous learn how to:

  • Configure static website hosting
  • Deploy a Hi World website

Static websites have some limitations. For instance, If you want to configure headers, you'll have to utilize Azure Content Delivery Network (Azure CDN). There's no style to configure headers as part of the static website feature itself. As well, AuthN and AuthZ are not supported.

If these features are important for your scenario, consider using Azure Static Web Apps. Information technology's a peachy alternative to static websites and is also advisable in cases where you don't require a web server to render content. Yous can configure headers and AuthN / AuthZ is fully supported. Azure Static Web Apps too provides a fully managed continuous integration and continuous delivery (CI/CD) workflow from GitHub source to global deployment.

Prerequisites

To access Azure Storage, you'll need an Azure subscription. If you don't already take a subscription, create a complimentary account before you begin.

All access to Azure Storage takes place through a storage account. For this quickstart, create a storage account using the Azure portal, Azure PowerShell, or Azure CLI. For help creating a storage account, see Create a storage account.

Note

Static websites are at present available for general-purpose v2 Standard storage accounts also as storage accounts with hierarchical namespace enabled.

This tutorial uses Visual Studio Code, a gratuitous tool for programmers, to build the static website and deploy information technology to an Azure Storage account.

After yous install Visual Studio Code, install the Azure Storage preview extension. This extension integrates Azure Storage management functionality with Visual Studio Code. You lot volition use the extension to deploy your static website to Azure Storage. To install the extension:

  1. Launch Visual Studio Code.

  2. On the toolbar, click Extensions. Search for Azure Storage, and select the Azure Storage extension from the list. Then click the Install button to install the extension.

    Install the Azure Storage extension in VS Code

Sign in to the Azure portal

Sign in to the Azure portal to get started.

Configure static website hosting

The start step is to configure your storage account to host a static website in the Azure portal. When you configure your account for static website hosting, Azure Storage automatically creates a container named $web. The $web container will comprise the files for your static website.

  1. Open the Azure portal in your spider web browser.

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

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

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

  5. In the Index certificate name field, specify a default index folio of index.html. The default index page is displayed when a user navigates to the root of your static website.

  6. In the Fault document path field, specify a default error folio of 404.html. The default error page is displayed when a user attempts to navigate to a folio that does not be in your static website.

  7. Click Salve. The Azure portal now displays your static website endpoint.

    Enable static website hosting for a storage account

Deploy a Hello World website

Next, create a Howdy World web page with Visual Studio Lawmaking and deploy it to the static website hosted in your Azure Storage account.

  1. Create an empty binder named mywebsite on your local file system.

  2. Launch Visual Studio Code, and open up the folder that you just created from the Explorer console.

    Open folder in Visual Studio Code

  3. Create the default index file in the mywebsite binder and name it index.html.

    Create the default index file in Visual Studio Code

  4. Open index.html in the editor, paste the following text into the file, and salve it:

                      <!DOCTYPE html> <html>   <torso>     <h1>Hi World!</h1>   </body> </html>

  5. Create the default error file and name it 404.html.

  6. Open 404.html in the editor, paste the following text into the file, and save it:

                      <!DOCTYPE html> <html>   <body>     <h1>404</h1>   </body> </html>

  7. Correct-click under the mywebsite folder in the Explorer panel and select Deploy to Static Website... to deploy your website. You lot volition be prompted to log in to Azure to recall a list of subscriptions.

  8. Select the subscription containing the storage account for which you enabled static website hosting. Next, select the storage account when prompted.

Visual Studio Code will now upload your files to your web endpoint, and show the success condition bar. Launch the website to view it in Azure.

You've successfully completed the tutorial and deployed a static website to Azure.

Feature support

This table shows how this feature is supported in your account and the bear upon on back up when you lot enable certain capabilities.

Storage account blazon Blob Storage (default support) Information Lake Storage Gen2 1 NFS iii.0 1
Standard general-purpose v2 Yes Yes Yes
Premium block blobs Yes Yes Yes

i Data Lake Storage Gen2 and the Network File System (NFS) 3.0 protocol both require a storage account with a hierarchical namespace enabled.

Next steps

In this tutorial, you learned how to configure your Azure Storage account for static website hosting, and how to create and deploy a static website to an Azure endpoint.

Adjacent, learn how to configure a custom domain with your static website.