How to host a static website in the Azure Blob storage

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.

b. After deployment is complete, go to resource to locate the storage account created.

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.

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.

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.

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.

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

d. You will get a message prompting you to close the browser. Close the browser and go back to Visual Studio Code.

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.

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.

Wait for the Website files be deployed. After done uploading you see seel all the website files as shown below.

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