Microsoft Azure Storage and Database Part 12 – Azure Blob Storage – Host Static Website In Azure Storage Account

Hello Everybody,

Hope you all are doing good !!! 🙂 .

In one of our previous article we have discussed, how to Get Shared Access Signature (SAS) Using PowerShell. Today in this article we will discuss about the simple way to Host a static website on Azure.

Previous Azure series :

1. Learn Basics Of Azure Networking In 60 Hours
2. Learn Basic Of Azure Active Directory And Azure Identity And Access Management
3. Azure DevOps – Learn at one place

If you have missed our previous articles on Azure Storage and Database Series, please check it in following links.

Part 1 – Overview Of Azure Storage and Database

Part 2 – Azure Storage Account

Part 3 – Azure Blob Storage

Part 4 – Work With Azure Blob Storage

Part 5 – Storage Explorer For Azure Storage

Part 6 – Azure Blob Storage – Snapshot Using Storage Explorer

Part 7 – Azure Blob Storage – Shared Access Signature (SAS)

Part 8 – Secure Azure Storage Using Stored Access Policy

Part 9 – Secure Azure Storage Using RBAC

Part 10 – Configure Stored Access Policy Using PowerShell

Part 11 – Get Shared Access Signature (SAS) Using PowerShell

Next Article : Part 13 – Azure Blob Storage – Work With AzCopy Tool

Static Website :

A static website contains Web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor.

Azure Storage static website hosting is a great service, which allow to serve static content (HTML, CSS, JavaScript, and image files) directly from a storage container. Hosting our content in Azure Storage enables us to use server less architectures that include Azure Functions and other Platform as a service (PaaS) services. So let’s go through the following steps and see how to host our static Website on Azure using Storage Account.

Step 1 – Before we move to Azure, first thing to do is prepare our sample static webpage, which will be our Index or Landing page of our static webpage. To make it easily, create one notepad file (.txt) file and give a meaning full name (My KJ Page.txt) as showing in the following figure.

Step 2 – Convert the page type from text file to html file by changing the extension of the file from .txt to .hrml .

Step 3 – Open the file in a text editor and change the content as per the requirement , in my case I have added some sample html content as showing in the following figure.

Step 4 – To check if the html page is working as expected, open the page in browser as showing in the following figure. We can see our content is showing as we design. It is small but looking nice, isn’t it 🙂 .

Step 5 – Now time came to go to our Azure portal and move to our Storage account. if we don’t have any storage account, create one before proceed to next step. Guidance to create a Storage Account can be found here.

Step 6 – Once we are ready with our Storage Account, it’s time to Enable Static Website in Azure. To enable it, select Static Website from Data management section as showing in the following figure and click Enabled button.

Step 7 – When we click on Enabled button , it will allow to provide few information like, provide the index or start page name of our website and the Error page name.

In this case just put the file name (My KJ Page.html), we have created in the above section and one document for the error page, then don’t forget to click Save button as showing in the following figure.

Step 8 – By default the static website is Disabled. We need to enable it to host our static website. When we Enabled our static website, in turn following actions get done.

• Create two new container named $Web and $Log as showing in the following figure
• Generate primary endpoint/URL of our static website as showing in the above figure
• Generate Secondary endpoint/Url as showing in the above figure.

Step 9 – Now we have enabled Static Website. Lets try to browse the URL provided in the above step. Copy the URL and browse in the browser. As we can see in the following figure, it is throwing error.

It is because, we have not deployed our pages ( Index page and error page, we have created) in the proper location. The correct location is $Web container, which is automatically created when we enabled Static Website.

Step 10 – Let’s first upload only the error page, so that we can get our custom error page, when it will not found the Index/start page. In above section it through the azure default error page. Following figures showing how to upload the pages.

Step 11 – Now we have uploaded our custom Error page but we have not uploaded our start or Index page yet. let’s check how it is behaving, if we browse our website URL.

Step 12 – We can see in the above image it is now showing our custom error . Now let’s upload our landing page as showing in the following figure.

Step 13 – We are ready with our all configuration. It is time to test our static website by browse it.

As we can see in above figure, our static website is up and running in the Azure.

I hope this is informative to you. Please let me know if I missed anything important or if my understanding is not up to the mark.

Next Article : Part 13 – Azure Blob Storage – Work With AzCopy Tool

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more.

If you have any suggestion / feedback / doubt, you are most welcome. Stay tuned on Knowledge-Junction, will come up with more such articles.

Thanks for reading 🙂 .