How to host a Static Website on Microsoft Azure Blob Storage.

Prerequisites to hosting a static website:
Download Visual Studio Code - Once downloaded, Install Azure subscription and Azure Storage.
Download Themezy (free download). See link here.
Log in to Microsoft Azure and create a storage account. See link on how to create a storage account here. Once created, open the storage account and navigate to 'Static Website'. Click to open.
Once it opens to the right, click 'Enabled'.
Once enabled, type 'index.html' in the Index document name tab and 'error.html' in the Error document path tab. Click save on top left of page.
Under the Storage overview, click 'Containers' then click on '$web' to the right (this is where the file uploaded to Vision Studio Code will reflect later). '$web' is found under the blue 'Enabled' toggle.
Now go to your computer downloads folder for the 'Themezy' file downloaded earlier. It is called 'Ceevee'. Open the unzipped downloaded folder (CEEVEE).
Go to Visual Studio Code and click 'File', on top left.
Click 'Open Folder'.
Click 'Downloads'
Select the downloaded, unzipped folder - 'ceevee'.
Once selected, click 'Open'.
Click 'OK' and 'Yes i trust the authors'.
Click the drop down arrow to the left to show the content of the folder CEEVEE.
Scroll down and click 'index.html'.
'index.html' opens to the right with a set of codes.
Scroll down to line 59 and edit as you please. You may scroll down for more edits.
Once you're done editing, save i.e ( command + S for MAC).
Click on the Azure icon to the left (the letter A on the left pane).
Click 'Allow'.
Click 'Sign in to Azure'.
Click the 'Azure subscription' drop down arrow to open content.
Once opened, click on the 'Storage' drop down arrow.
Click on your storage account name. This may be different for you depending on the name you chose for your storage account in Azure.
If you click on the storage name drop down, it should open with all the options below.
Now right click on your storage name to open list of options as below and click 'Deploy to Static Website via Azure Storage'.
This opens with options on top of the page, click the 'ceevee' folder.
It starts to deploy.
Once deployment is complete, click 'Browse to website'.
It opens with your static website!.
To view the files you uploaded to Visual Studio Code in Azure, go back to your storage account on the Azure portal and click your storage name to open.
Once it opens, navigate to 'containers' and click to open.
It should open with '$web' to the right. Click to open.
This opens with the same uploaded files from Visual Studio Code.
Hope these steps have been helpful in hosting your Static website on Microsoft Azure Blob Storage.
Subscribe to my newsletter
Read articles from Oyindamola Balogun directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
