A Comprehensive guide to hosting a static website in Azure Blob storage using Visual Studio Code

A static website (sometimes called a flat or stationary page) is a website that can be loaded and served from a pre-defined set of files, such as HTML, CSS, and JavaScript files and it is displayed on a web browser exactly as it is stored. It does not change, it stays the same, or "static" for every viewer of the site. Static websites do not require a web server to render content, which makes them faster and cheaper to host. You can host a static website on Azure Storage, a service that provides scalable and secure cloud storage for your data.
To host a static website in Azure Storage, you must enable your storage account's static website hosting feature and specify a default index page and an optional error page. You can use the Azure portal, Azure CLI, or Azure PowerShell to enable this feature and configure the settings.
In this post, I will be showing you how to host a static website using the Azure portal.

Let us begin!

1. Click here to open the static website template
2. Click on download to download and save the file to a location in your computer
3. Click here to download Visual studio code.
4. Choose the operating system and click on download
5. Install the Visual Studio Code on your computer
6. Create a storage account on the azure portal. For more information on how to create a storage account visit my blog here
7. Click on static website from the left pane. Toggle the button from 'Disable' to 'Enable' to enable the static website.
8. Type "index.html" on the index document name and "error.html" on the error document path fields.
9. Click on save
10. After being saved, a primary and secondary endpoints are generated. NOTE: The Primary end point is the URL of the static website which can be used to access the website on any browser.
11. Go back to the storage account and click on containers; a new container is created with the name '$web' to host the static website.

Open your file with Visual Studio Code

1. Open visual studio code and click on 'File' and select 'Open Folder'
2. Select the folder of the template you downloaded and click on 'index.html'. Your html code automatically reflects as shown below
3. You can edit the parameters like name, LinkedIn address, job description, etc to your own and save the changes you made.
4. Click on the Extension button
5. In the search bar, type Azure Account and click 'install' to install it
6. Click on the Azure button; under resources click sign in to Azure
7. Select your Azure account and log in
8. A browser page will be opened with a message prompting you to close the browser.
9. Click on Resources drop down arrow and select storage account
10. Right click on the account you created
11. Select Deploy to static website via Azure Storage
12. Select the folder to deploy to the Static website
13. Wait for the folder to be deployed to the storage container
14. Click on Browse to website directly or copy and paste your primary endpoint in a browser and click enter.
15. Your static website will be displayed in your browser. From your Azure portal, go to the container $web which you created. click on it and you will see the data for the static website you created.