DEV Community

Cover image for HOSTING A STATIC WEBSITE
Omoniyi
Omoniyi

Posted on

HOSTING A STATIC WEBSITE

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

3.Select CREATE and then select CREATE STORAGE ACCOUNT
Image description

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

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

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

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

Image description

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

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

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

Image description

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

  1. 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

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

Top comments (0)