How to Host a Static Website in Azure Storage

Hosting your website with the Azure Storage Service is cheap if you have static content that needs to be exposed in the public cloud. Developers can now deploy static content (HTML, CSS, JavaScript, and image files) directly to a storage container named $web using Azure Storage options. In addition, a developer can also deploy the entire Front-End of their websites with static files using JavaScript and JSON. In this article, I will show you how to enable static website hosting by using the Azure portal.

To set up a development environment, make sure you meet the following prerequisites:

  • Visual Studio Community edition
  • Azure Free Subscription

Read: Best IDEs for .NET and C# Developers

Steps to Host A Static Website on Azure Cloud

Sign in to the Azure portal to get started by going to the Azure Portal Login. To add a new resource, search for Storage Account. Refer to the figure below for more information:

Azure Static Website Hosting

Azure Storage Account

Click on Create from Storage Account. Refer to the image below if you get lost:

Azure Storage Account

Create New Azure Storage Account

For the demo, I have entered the storage account name, then for the location, I selected US East as the region. For other options, I have selected the resource groups that were created previously and will keep the default for the rest. See below:

Hosting Storage Accounts in Azure

Enter Basic Details of New Azure Storage Account

Next, click Review and Create. It will take some time to create the storage service, so be patient:

Deploy Static Website in Azure

New Azure Storage Account Created

Read: Setting Up Budgets and Configuring Alerts in Azure

Enable Static Website Hosting in Azure

Next, go to the settings and select the static website option, then click on Enable:

Azure Storage Account Created

Enable Static Website Hosting

The above action will generate a URL for you to reach out to your site and also add the entry point of the application or the default landing page name. For the demo, I have added index.html and for the error page chosen 404.html. Next, click on the Save button:

Static Web Hosting in Azure Enabled

Azure Storage Account Public URL Enabled

Next, search for Storage Explorer (preview) as shown here:

Azure Storage Explorer

Azure Storage Account Explorer

Upload Content to a Static Site in Azure

Now, you need to upload the content of your static site to the $web container. Expand the BLOB CONTAINERS node, and then select the $web container. Refer to the image below for more:

Azure Storage Account

Upload Static Files

Next, choose the Upload button to upload files. Select the files you want to upload. For this demo, I have uploaded the following index and error HTML files, as seen in figure-9. Note, for the browser to display the contents of the files, make sure that the content type of that file is set to text/HTML. By default, the Storage Explorer automatically sets this property to text/HTML.

Uploading Static Website Files in Azure

Static Index & Error Files Uploaded

Next, find the website URL in the pane that appears beside the Account Overview Page of your storage account, then select Static Website.

The URL of your site appears in the Primary endpoint field. Open the URL in the browser and the index.html page will be rendered.

Read:
How to Use Query Editor in Azure SQL

Enable Metrics on Static Web Pages in Azure

Next, enable metrics on static website pages. Once you have enabled metrics, traffic statistics on files in the $web container are reported in the metrics dashboard. To enable this feature, click Metrics under the Monitor section of the storage account menu:

Azure Static Index and Error Pages

Browse Public Website

Next, click on the time frame button, choose a time frame, and then click Apply. Select Blob from the Namespace drop-down. Then, select the Egress metric. Next, select Sum from the Aggregation selector:

Azure Analytics

Enable metrics on static website pages

Next, click the Add filter button and choose the API name from the Property selector. Check the box next to GetWebContent in the Values selector to populate the metrics report.

These setting changes will enable metrics.

Azure Metric Filters

Add Filters

Read more Azure programming and development tutorials.

More by Author

Must Read