HOSTING A STATIC WEBSITE ON AZURE BLOB STORAGE
Published: 2023-06-16 18:56:59

 **You can serve static content (HTML, CSS, JavaScript, and image files) directly from a container in a general-purpose V2 or BlockBlobStorage account.**

Below are the 3 simple steps to be taken to successfully achieve this feat. 

**TOOLS TO BE USED**
These are tools you require to deploy a static website with Azure storage:

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

2. Install the **Azure Subscription**, **Azure Account** and **Azure storage account** extensions plugin on the **Visual Studio code**.

3.Create a **Storage account** in the **Azure portal**

4.Create a folder that houses your static website data

**STEP 1**

**ENABLING STATIC WEBSITE IN AZURE STORAGE**

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

- Click on the enabled under the **Static website**

- Under **Index document name** input your index.html document name.

- Under **Error document path** input your error.html document name.

- Then click on the Save button above to save your configurations.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4y7wjijeduv99lm1v74.PNG)
 
This will open a page with your primary and secondary endpoints.

- Copy the primary endpoint, that's the URL of your static website.

**STEP 2**

 **BACK TO YOUR STORAGE ACCOUNT** 
- 
Go back to your storage account and click on containers, you will see a $web container blob, already create to hold the content of your static website.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rpiwq09opq633rer341.PNG)

**STEP 3**

**OPEN THE FOLDER HOLDING YOUR STATIC WEBSITE DATA WITH VS CODE**

- Right-click on the static web content folder and select the option to open with VScode.


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

- 
Click on the Azure extension icon on the left-side of your Vscode.

- Select your Azure subscription and click on it. This will display your Azure account resources. 

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

- Click on Storage accounts to see the storage accounts you have and select the one you have enabled to host the static web.

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

- Right-click on your chosen storage account and select **Deploy to Static Website via Azure Storage**.
You will be prompted to browse for the folder to be hosted. Select your static website folder.

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

When it is done deploying the website, you will get a notification at the foot of the VScode, informing you that you can browse your website. Click on the notification to view your static website or use the primary endpoint you copied earlier as a URL to view the website in a browser.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rqc6pra876bdqakewia.PNG)

Your static website is now available on the internet and can be accessed through the endpoints.

**Static Webpage**

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


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