A Comprehensive guide to hosting a static website in Azure Blob storage using Visual Studio Code
Tags: beginners, azure, hagitalcloud
Published: 2023-08-30 21:30:48

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[](https://www.themezy.com/free-website-templates/151-ceevee-free-responsive-website-template) to open the static website template
2. Click on download to download and save the file to a location in your computer
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z45q2ukqf0rmvfiigsdn.jpg) 
3. Click [here](https://code.visualstudio.com/Download) to download Visual studio code. 
4. Choose the operating system and click on download 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxb215fsjtme40ng428b.jpg)
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](https://dev.to/ogah2_il/creating-a-blob-storage-account-in-azure-16kb)
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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9tyghfzbsdmx7tl78oo.jpg)
**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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk24x7d0z3bubug6jj65.jpg)

**Open your file with Visual Studio Code**
1. Open visual studio code and click on 'File' and select 'Open Folder'
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ocycrrvfyyyu0l6gije.jpg)
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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jqjj9v1uldigfchqcyt.jpg)
4. Click on the Extension button
5. In the search bar, type Azure Account and click 'install' to install it
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amzkr4mmfperbj0qox4f.jpg)
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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zl439e1u5s3lioafl3i.jpg)
9. Click on Resources drop down arrow and select storage account
10. Right click on the account you created 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4na75si0i6n5qnrq1ng3.jpg)
11. Select Deploy to static website via Azure Storage 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iwrdirut161p2eapj11.jpg)
12. Select the folder to deploy to the Static website 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43ugk4yrxzkehhmbsre5.jpg) 
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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7l7bgb6e2ycjp69jspc.jpg)
15. Your static website will be displayed in your browser. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/libsb0h9jn0vlqidrmi5.jpg)
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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfgs4r181lmud8ssbxtm.jpg)