A step-by-step walkthrough on how to host a Static Website on Microsoft Azure Blob Storage

In Azure Storage are designed to store various types of data, including structured, semi structured and unstructured data. Blob Storage is specifically optimized for storing large amounts of unstructured data, like text or binary files. Azure allows you to upload your static website easily, share its link anywhere, and make it accessible to anyone.

Hosting your static website on Azure is free, but you'll need to pay for the storage account. Azure ensures data security using encryption techniques. This article provides step-by-step instructions with screenshots to help you host your static website successfully through Azure and visual studio code. Just follow these steps to get your static website up and running.
Steps – Hosting a static website with Azure Storage

STEP 1
Open your Google drive link then click on mywebsite to download the file to your PC.

STEP 2
Click on your Download tab and locate the
mywebsite-20240629T172754Z-001 file to extract the file.

Install Visual Studio Code on your desktop.

STEP 3
Open your File in the visual studio code then Click on file at the top -left corner of your Visual Studio Code Click on Open file and select the folder that houses your static website codes and data.
Click on your file drop-down and click Index.html

STEP 4
A. Change only white text on command line 7 and
47 to your name
B. Change orange text on command line 59 from
index.html to about.html to test run and see
when it’s deployed and not part of personal
information to change.
C. Edit command line 92, 93 and 109 to reflect
your name and other details.

D. Click on your file drop-down and click 404.html as
the error page.
E. Change only white text on command line 7 and 47 to
your name.

To access Azure, you need to log in to your Azure account using your credentials.
Search and Navigate to Storage Accounts and then click on Create

To set up a Storage Account

1. Go to the Basics tab, under Project details and ensure the correct subscription is chosen. From the resource group list, select azurestorgaeRG or create a new one if needed.
2. Enter a unique name for the Storage account.
3. Choose a region for its location.
4. Select Standard for performance.
5. Choose Geo Redundant Storage (GRS) for redundancy.
6. Proceed to the next step or adjust other settings if necessary; otherwise, keep them as default.
7. Click on Review + Create to finalize the setup.

Validation
Before proceeding, validate the configuration of the storage account to ensure everything is set up correctly. If the configuration is correct, the option to create the storage account will be available. If not, review all configurations thoroughly before clicking on the Create button.

Go to Resources

STEP 5
To find the Static Website settings:

1. Click on Data Management dropdown.
2. Select Static Website

To set up the Static Website

1. Enable the Static Website feature.
2. Enter the name of the index document.
3. Enter the name of the error document. Afterward, Azure generates two links: Primary and Secondary endpoints. Copy the Primary endpoint link. Azure also creates a storage container named $WEB to host the static website; click on it. After that two option appears on the screen (Disable and Enable), Click on the Enable.
4. Click on Save icon for your changes.

Go to Containers

1. Open the Data storage dropdown.
2. Select Containers
3. Click on $WEB

To upload files from your PC

1. Click on Upload
2. Navigate to the folder on your computer where the website files are located.
3. Select all then Drag and drop the files from this location into the designated box.

To test run on a browser
When your file is successfully uploaded then paste your primary link on your browser.
At this point your Static Website is ready.

STEP 6
Connecting your static website to your Azure Account through Visual Studio Code
Click on the Azure extension to install your Azure account and Azure Storage

Click on explorer then drag the path and right click to deploy to static website via Azure storage to sign in to Azure account.

Click on the Resources drop- down and then click on the Azure subscription drop- down

Next click on the storage account drop-down

Click on Deploy to the static website via Azure storage

You will be instructed to select your preferred folder to deploy the static website. After the deployment is completed, ensure to click on browser static website.


At this point your Static Website is ready that was done through visual studio code

Thank you for sticking with this post and going through the steps, I hope you were able to use this guide to setup a static website on Azure Storage.