How To Host Static Website on Azure Blob Storage

introduction

A static website is like an electronic brochure that contains fixed information and doesn’t change frequently. It consists of web pages that have text, images, and other content that remains the same for everyone who gains access to the website.

An example of such websites are cloud courses like whiz lab or cantril.io

By hosting a static website on Blob Storage, you can save costs and enjoy a straight forward hosting solution that ensures your website is easily accessible and efficient.

In this tutorial, we will be hosting our static website in Azure Storage. Please ensure the following prerequisites are followed before we begin.
Prerequisites.

Virtual Studio code

1.Install Visual Studio Code on your desktop.

2.Install the Azure Subscription, Azure Account and Azure storage account extensions on the visual studio code.

3.Create a storage account in the Azure portal

4.Create a folder that houses your static website data
Enable Static Website in Azure.

Enable static website hosting

a) Go to your storage account, and click on the Static website button on the left side of the search bar.

b)Click on the “Enabled” button to enable the static website

c)On the index document name type “index.html” and the Error document path type “404.html”

d) Click on the save button.

e)Once it’s saved, It generates your primary and secondary endpoint.

d) When you go back to your storage account, click on containers, you can see that a web container has been created to host your static website data.

Open Your File On Visual Studio Code

a)The next step is to click on File at the top-left corner of your VScode.

b) Click on “Open File” and select the folder that houses your static website codes and data.

c)Once you open it, the file appears here as shown below.

d) Click on your file drop-down and click index.html

e) Once you click it, your html code automatically reflects as shown below.

Connect To Azure

a) To connect to your $web container, click on the Azure extension.

b) Next click on the Resources drop-down, click on the Azure subscription drop-down.

c) Under the Azure subscription, click on the storage account drop-down

d)You will see the storage account you created in the Azure Portal, right-click on it.

e) Click on “Deploy to the static website via Azure Storage”

f) You will be prompted to select your folder to deploy the static website.

g) Wait for the deployment to be complete and click on browse static website

h) You will be redirected to your static website as shown below.

i) On the Azure portal, go to the $web container in your storage account, you can see that all your static website data has been deployed in the container.