BLOG ON HOW TO HOST STATIC WEBSITE ON AZURE BLOB STORAGE
Published: 2024-07-05 17:30:52

You will need to download Visual Studio Code. It is a code editor.
It is static because it is fixed i.e.one cannot interact with it. 

STEPS
a. Download a sample website and save.
b. Open Visual Studio Code

i. To open Visual Studio Code; search for Visual Studio Code in the search bar at the bottom left, beside the windows icon
ii. Click on file at the top left. See below screenshot


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

iii. Select open folder from the dropdown to open the folder.


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

iv. Go to the download folder to select the folder you want to work on.
Click on it and select Folder

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


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

v. Click on index.html on visualstudio code to open it


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

vi. Then, you edit the portions written in white. They are between the tags. Extra care has to be taken so as not to delete or tamper with the codes.
The portions written in white are the things rendering on the page i.e. the things we can see on the page when it is opened on the browser.
After editing, you can now save.

2. Go to Azure Portal
i. Login to Azure
ii. Create a Storage Account. Search for Storage Accounts in search bar, and select it


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

iii. Click on +Create on the top left of the page

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

iv. Edit the Basic page, leave the others at default. Then, review and create.

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

After successfully creating the storage account, click on go to Resource.


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

v. Locate the static website.
The static website can be located by either Clicking on 'capabilities' or by clicking 'Data Management' on left pane as shown below

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

Data Management
Click on Data Management, then, click on 'Static Website'

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

vi. After clicking static website; you enable it. Then, you input the index document name and the error document path. Then, you click save.
The index majorly is the root folder; from the index, you can link to other folders.


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

vii. After saving, an Azure Storage account will be created, as well as the 'Primary Endpoint link', and 'Secondary Endpoint link'. These links when opened on the browser will take you to your website.


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

viii. Go to Data Storage
Click on Containers. This will open the recently created storage account.
Click on the Azure storage account that was created


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


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

ix. Click on the Azure storage account, click 'upload' select the file to be uploaded from the folder. Drag and drop on the Azure storage account. Then, click on upload.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hg4yu5zdu4hsmjink3l.PNG)


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

x. To access the website, go to the overview page. 
Select Data Management, Click on Static website, and copy the 'Primary Endpoint', and paste it in your browser.

https://anthonywebsite.z19.web.core.windows.net/


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