How To Host a Static Website in Azure Blob Storage
Tags: beginners, blob, programming, devchallenge
Published: 2024-05-29 22:14:38

**Introduction**
A static website is like an electronic brochure that contains fixed information and doesn't change frequently. It consists of web pages that have text, images, and other content that remains the same for everyone who gains access to the website.

An example of such websites are cloud courses like whizlab or cantril.io

By hosting a static website on Blob Storage, you can save costs and enjoy a straight forward hosting solution that ensures your website is easily accessible and efficient.

In this tutorial, we will be hosting our static website in Azure Storage. Please ensure the following prerequisites are followed before we begin.
Prerequisites

As a prerequisite to deploying a static website with Azure storage;

1. Install Visual Studio Code on your desktop.

2. Install the Azure Subscription, Azure Account and Azure storage account extensions on the visual studio code.

3.Create a storage account in the Azure portal

4.Create a folder that houses your static website data
Enable Static Website in Azure

a) Go to your storage account, and click on the Static website button on the left side of the search bar.


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

b)Click on the "Enabled" button to enable the static website

c)On the index document name type "index.html" and the Error document path type "error.html"

d) Click on the save button


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

e)Once it's saved, It generates your primary and secondary endpoint


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

d) When you go back to your storage account, click on containers, you can see that a web container has been created to host your static website data


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

Open Your File On Visual Studio Code

a)The next step is to click on File at the top-left corner of your VScode.

b) Click on "Open File" and select the folder that houses your static website codes and data.


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

c)Once you open it, the file appears here as shown below.

d) Click on your file drop-down and click index.html


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

e) Once you click it, your html code automatically reflects as shown below


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

Connect To Azure

a) To connect to your $web container, click on the Azure extension.

b) Next click on the Resources drop-down, click on the Azure subscription drop-down

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

c) Under the Azure subscription, click on the storage account drop-down


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

d)You will see the storage account you created in the Azure Portal, right-click on it.

e) Click on "Deploy to the static website via Azure Storage"


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

f) You will be prompted to select your folder to deploy the static website


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

g) Wait for the deployment to be complete and click on browse static website

h) You will be redirected to your static website as shown below


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

i) On the Azure portal, go to the $web container in your storage account, you can see that all your static website data has been deployed in the container

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