A step-by-step walkthrough on how to host a Static Website on Microsoft Azure Blob Storage
Tags: blobstorage, azure, staticwebsite, visualstudiocode
Published: 2024-07-03 23:03:08

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkvvrcgbo82vvh76djb2.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qebwx5hqqsemweo8kf7.png)

Install **Visual Studio Code** on your desktop.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ob31ytcrkh8vvduf7ec.png)

**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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxbj15mhil7u5uk00ms2.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35iu2t58duhdi4nt3exy.png)


**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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcg59g0p4qlyi69mq979.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j8fmczc09c7ce0v2bz1.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t0jrsif9lr0mnl0qic1.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hhfdhkds1e5ug5yaa18.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zobmf0l6xyt8esq7os9.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0qqhif6p0g6i6mv37gs.png)

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**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e64urzfbos4089x5ll5p.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdw2uwpccaxldc5wlu9l.png)

**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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mslyas6zs79nung7lst.png)

**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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kku7dxto5j68gp2qzqem.png)

**Go to Resources**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7160yqqmwqoxai2hspa9.png)

**STEP 5**
To find the Static Website settings:
1. Click on Data Management dropdown.
2. Select Static Website
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or0b1il9wbdo11q7kpb4.png)

**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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/insul1hwrfrvgo0nmh3y.png)

**Go to Containers**
1. Open the Data storage dropdown.
2. Select Containers
3. Click on $WEB
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mbln3fzpbeo5rouvkp4.png)

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yomcfxxqrqljp598z3uw.png)

**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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn3bhqfhw2o2k0jswcyl.png)

**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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa1wedc3ulzz86euxb1j.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2iwqxy28i1ldw8pe0sf.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea1iuctzp55aq76qg38l.png)

Click on explorer then drag the path and right click to deploy to static website via Azure storage to sign in to Azure account.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g85196w1lnm1pw5781c.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50tay6tyynbsiwh3b9oh.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8m8f43xzwhivyvaptuo.png)
Click on the **Resources** drop- down and then click on the **Azure subscription** drop- down
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wno76qj05ielw1i0i835.png)
Next click on the **storage account** drop-down
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn33d5o3udf4p96t9s99.png)
Click on **Deploy to the static website via Azure storage**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tdw77lakj2kjnizcehm.png)
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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op3djsb7xc0g2z1kasem.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0b5ypwc5bew3qtntwgp.png)
At this point your Static Website is ready that was done through visual studio code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a8fkukiog570wakjzv4.png)
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.