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
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.
Figure – 1 Azure Storage Account
Click on Create from Storage Account. Refer to figure -2 if you get lost.
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.
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.
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.
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.
Figure – 6 Azure Storage Account Public URL Enabled
Next, search for Storage Explorer (preview) as shown in figure-7.
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.
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.
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.
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.
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.
Figure – 12 Add Filters
