Hosting 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

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 figure -1 for more information.

Azure Static Website Hosting

Figure – 1 Azure Storage Account

Click on Create from Storage Account. Refer to figure -2 if you get lost.

Azure Storage Account

Figure – 2 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. Refer to figure -3 below.

Hosting Storage Accounts in Azure

Figure – 3 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. Refer to figure – 4 for more details.

Deploy Static Website in Azure

Figure – 4 New Azure Storage Account Created

Next, go to the settings and select the static website option, then click on Enable. Refer to figure – 5.

Azure Storage Account Created

Figure – 5 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. Refer to figure-6 below.

Static Web Hosting in Azure Enabled

Figure – 6 Azure Storage Account Public URL Enabled

Next, search for Storage Explorer (preview) as shown in figure-7.

Azure Storage Explorer

Figure – 7 Azure Storage Account Explorer

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 figure -8 below for more.

Azure Storage Account

Figure – 8 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

Figure – 9 Static Index & Error Files Uploaded

Next, find the website URL in the pane that appears beside theAccount 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.

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. Then, refer to figure – 10.

Azure Static Index and Error Pages

Figure – 10 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. Refer to figure-11.

Azure Analytics

Figure – 11 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

Figure – 12 Add Filters

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read