CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
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 Storage Account
Click on Create from Storage Account. Refer to the image below if you get lost:
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:
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:
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:
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:
Azure Storage Account Public URL Enabled
Next, search for Storage Explorer (preview) as shown here:
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:
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.
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:
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:
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.
Add Filters
