Exploring Microsoft Azure Storage Static Website Features

Introduction

In this blog, we will explore an awesome feature provided by Microsoft Azure for its Storage offering, i.e. Microsoft Azure Storage - Static Website.

At the end of this blog, you will learn how to enable, host, and manage static website features using the Azure Management Portal.

Prerequisites

As a part of the prerequisites, we need to have:

A valid Azure Subscription – Free, Pay as you go, etc.
The zeal to learn Microsoft Azure.

Overview

Microsoft Azure provides different options for hosting your .net application on public Cloud. Azure App Service, Azure VMs, Containers are the most used ways to host any application with technology stack variants.

This all though comes of-course with a cost associate to it, and that too with a flat monthly cost, commonly known as App service Plan. Consider a scenario where you are hosting a meetup, or conference, and have a static application, an HTML, JavaScript, application. And now you want to host this application for a week's time only. In this case, going with Web App, or Azure VM will be to cost consuming.

Microsoft Azure Storage comes with a super cool feature – Static Website, wherein you can host any static application to a public cloud, using Azure Blob storage. Here you can with few simple steps can enable a blob storage account to host static content, with having a public URL. Webpages may include static content, like HTML, CSS, JavaScript, image files, and client-side scripts. Server-side scripting is not supported. And all this does come with the same availability, security as of Azure storage. Also, having a storage account gives the cheapest way to host your application on the cloud, as compared to all other options available.

Also, hosting your content in Azure Storage enables you to use Serverless architectures that include Azure Functions and other Platform as a service, services.

Pricing

Enabling the static website feature comes with no charge. Costing is calculated only for the blob storage being utilized along with an operational cost. For more detailing, visit here.

Create an Azure Storage Account

Using Azure Portal - Now let’s create a Microsoft Azure Storage account, the very first step to start with.

Go to Microsoft Azure Portal => Create a resource => type ‘Storage’ and select the one highlighted as shown in below image, and hit on ‘Create’

This will come up with the window to add configuration details for storage accounts:

Basic Details

Select the valid Subscription
Enter Resource Group name from existing or create new. In this article, have created a new RG name HostonStorage.
Enter the storage name. Have some indicative name, as this name would be the part of your website public URL. In this article, have given it’s as HostonCloud.
The most important detail is ‘Account Kind’. It should opt as StorageV2 (general purposeV2) only. This is because, at the time of writing this article, the only account kind which supports Website hosting is Storage V2 (general purposeV2). So, ensure you select this option as you would not be able to leverage the Static Website feature.
Other options like Location, performance, Replication can be selected as required.

Refer to the below image with basic configuration details:

Click on, Next: Networking section.

Make sure the connectivity method is opted as Public endpoint (all networks), as our goal is to have this storage as a public hosting option for a web page.

Click on Next: Advanced option. Have all the options as selected by default. Again it depends on the requirement, but in this article, I am keeping the configuration as default.

Click on the next options, Tags, not mandatory to have one, but strongly recommended. It helps in the segregation of resources for billing, and other management purposes.

Once done with the above details, Hit on Next: Review + Create. You can hit on this at any given blade.

This will review and validate all necessary requisites based on the details provided. And once the validation is passed, the Create button is enabled to deploy the resource.

Hit Create, to initiate the deployment of resources.

Once the resource is created, you will be notified in the Notification window with the link ‘Go to Resource’ to navigate to newly created Storage resources.

Enable Static Website Feature

Now, once we are done with having our storage account created, its time to configure it to have it as a Hosting option for static web content.

To do so, follow the below steps:

In the storage resource page as seen above, at the left-hand corner blade, at the top we have a search box. Enter, ‘Static Website’ in the text box, and click on the resulted option.

Alternatively, you can just scroll down in the same blade and search under Settings => ‘Static Website’ and Hit the option.
Once selecting the ‘Static Website’ option, it will show a screen with a toggle option to Enable/Disable, the said feature.

By default, it will be disabled. Select the toggle button to make it enable and click on Save.

Once its saved, the screen will provide you with two public endpoints, primary and secondary. These are your public URLs:

If you notice the above image carefully, along with the endpoints, it also says, that a container name ‘$web’ is created in the storage account.

This is important to note, as the web content artifacts need to be uploaded to this newly created container.

Uploading Web File to Storage

Now, if we browse the primary endpoint or secondary endpoint, by copying the URL from portal to the browser’s address bar.

It will be shown as below:

This is because we haven’t uploaded any content to the $Web container created.

Once you upload the files with static content to the container, it will start displaying the page.

So now let's upload some files with static content to the container and check.

For this article, will upload a simple HTML file name Iamfromcloud.html

And now let browse this page through the primary endpoint we tried earlier:

Cool, it is working. So we have hosted files with static content to public cloud Azure using Azure Storage.

Again, just notice the above image, and the URL is highlighted.

It does contain the name of an HTML file and not just the URL. And if you again browse with just URL, it will show No content message.

To avoid this, we can also set the default page name to get display.

Set Default Web Page

Go to the same Static Website page in Azure Portal.

Here, under ‘Index document name’, just enter the file name you want to get displayed by default and click on Save.

Similarly, you can also set a Custom Error page or 404 pages for any incorrect request being made.

I have also uploaded an HTML file name 404.html

I mentioned the same under, Error document path field, then click Save.

And now, let's browse the primary endpoint without mentioning any file name.

It displays our page set as default on public URLs,

Also, try with some incorrect file name request.

And it now loads the error file set, 404.html.

Conclusion

So, in this article, we learned, how seamlessly we can enable, host & manage static files on Azure cloud using Microsoft Azure Storage.

Would recommend you try this at your end and let us know if you have any queries or concerns.

Thank you!