How to host a static website in the Azure Blob storage
Published: 2023-07-01 16:55:30

Hosting a static website on azure storage (Blob Storage), save costs and one can enjoy a straightforward hosting solution that ensures your website is easily accessible and efficient. Below are step by step guides on how to host a static website.

a.	First and foremost, create a storage account with project details below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foq8wca4ll37g1w5p56c.png)
b.	After deployment is complete, go to resource to locate the storage account created.

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

**Enable the Static website from the storage account**
c.	Under Data management, click static website and enable the website as seen below. Type index.html and error.html into the boxes bar as seen below, then click save. The primary endpoint contains your URL.


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


**Upload Files and Folders to the Static website**
d.	Click container under data storage, you will see a file called $web, its auto created when enabling static website under data management, double click $web and upload your website files one after the other.


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/om735p8gfxawdasnsuzn.png)
e.	Upload website folders by using the advanced tab, expand the advanced tab, give your folder a name. browse for files, select all files,and click upload as seen below.

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

**Use Visual Code to connect to your Azure account and upload your website folders**

a.	Open the visual code, and click extension,
b.	Search for azure account and click install.


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

c.	Click on azure symbol, under resource and sign in into your azure account.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvrgyfeu343y0l2s9c98.png)
d.	You will get a message prompting you to close the browser. Close the browser and go back to Visual Studio Code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la2nqypdgui0ophn4f4p.png)
e.	Click on subscription and select the storage account, blob container where your $web file is stored. Right click deploy to static website via azure storage.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isvbfphhyod67al9kohr.png)
f.	A prompt to select the folders to deploy  the static website files appear at the top of the screen, browse to select all the files.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn5f5bf6u07lhf4zqi2z.png)
Wait for the Website files be deployed. After done uploading you see seel all the website files as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdg4jyzrgco8smf151oz.png)
g.	Click on Browse website or open a web browser and type in your primary endpointt (URL) and press enter.
h.	You can then edit your web code to suit your web page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vdup4b8c6qqji1zxr3c.png)
i.	Find the web page below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0nwnsf0xovi0vkqo77p.png)
**Share Your URL of the website Hosted on Azure**
This URL can be found from the under the data management (static website)


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