HOSTING A STATIC WEBSITE
Tags: createstorageaccount, enablestaticwebsite, uploadfiles, testwebsiteusingurl
Published: 2024-07-05 18:44:10

**INTRODUCTION**
Static websites are the kind of websites that always maintain the same appearance to every of the users that access them at any point in point. It only changes when the website developer modifies the source file. Our task today is to host a website of sort on an Azure Blob Storage. This is divided into 4 major tasks as itemised and explained below with images.

**CREATE A STORAGE ACCOUNT**
1.Log on with your username and password to **_www.portal.azure.com_** to have access to the needed resources.

2.At the home page, select **STORAGE ACCOUNT**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pwtxyq7vbpqg8jm5j5z.jpg)

3.Select **CREATE** and then select **CREATE STORAGE ACCOUNT**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmwb1wkj6o8o04xnj73z.jpg)

4.Under **PROJECT DETAILS**, Select the **SUBSCRIPTION**,select an existing **RESOURCE GROUP** or create a new one.

5.Under **INSTANCE DETAILS**, input the desired STORAGE ACCOUNT NAME and the preferred **REGION** and leave others as default.  Leave other TAB as default and select **REVIEW AND CREATE** as below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4otxm1byo0agrpv16mkl.jpg)

6.The system tries to validate all the inputs and pops error if any, if not, it comes up with the page below...select **CREATE**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lar9f8vceu87m9yyd53i.jpg)

7.The system creates the storage account and all accompanying resources that will be needed. it pops up another page. Select **GO TO RESOURCE** this will unveil the configuration of the created storage account.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf3g3r9qh8rk5dpnqu3t.jpg)

AT THIS STAGE AZURE STORAGE ACCOUNT HAS BEEN CREATED WITH THE NAME **PRESHSTATICWEB**

**ENABLE STATIC WEBSITE**
The static website is not enabled by default and thus needs to be activated in three or four simple steps.

1.From the created storage account, select **CAPABILITY (7)** and then select **ENABLE**

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

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

2.After selecting ENABLE, it pops up 2 different fields to input the **INDEX DOCUMENT NAME **(this is the name of the file for the host page) and the **ERROR DOCUMENT NAME** (This is the error page it will display for users to see in case of any error).

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

3.Remember to save after this action. The system creates a web container ($Web), also includes the **PRIMARY ENDPOINT** field and automatically fills the url for the static website as below, copy the url and make it handy for use soonest.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pz5j2wdsl9onae48apt.jpg)

**UPLOAD THE FILES**
After all well said and well done, the next step is to upload the files to the storage account for reference purpose. We will use the web container created above to upload the needed files for the task.

CLick on $web and select **upload** upload the necessary files via the pop-up screen and click on **UPLOAD**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gu186zyji1icar94ddi.jpg)

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

At this stage, the needed files and folders are resident on the storage account for references.


**TEST THE STATIC WEBSITE USING THE URL ON BROWSER**
1.In the created static web, go to DATA MANAGEMENT/STATIC WEBSITE/PRIMARY ENDPOINT and copy the URL or use the copied URL in Step 3 above if its still handy

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ije794euxthq39mxhzs.jpg)
2. Open a web browser and paste the URL  for this example, https://preshstaticweb.z1.web.core.windows.net/ and below is the static website

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99grz4f2brkhfu67sl1m.jpg)

ALWAYS REMEMBER TO DELETE THE RESOURCES THAT ARE NOT NEEDED.

Thanks for following, I promise more educating resources.

I am Omoniyi, S.A. Precious A.K.A. Presh