DEV Community

Cover image for Host a Static Website in Azure Storage by Bastus Babajide Mark
Bastus Babajide Mark
Bastus Babajide Mark

Posted on

Host a Static Website in Azure Storage by Bastus Babajide Mark

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 itemized 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

You create a resource group by clicking on the button
Image description

3.Select CREATE and then select CREATE STORAGE ACCOUNT
After clicking on the resource group button you now go ahead and configure your resource group or pick from the drop down button if its already existing. the subscription is default as in this case and create your resource groups name mine is (jdbastus)

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, its take you to your storage account

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

Image description
AT THIS STAGE AZURE STORAGE ACCOUNT HAS BEEN CREATED WITH THE NAME jdbastusstaticweb

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
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
Image description3.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 descriptionAt this stage, the needed files and folders are resident on the storage account for references.

Image description

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 descriptionOpen a web browser and paste the URL for this example,

https://jdbastuswebsite.z20.web.core.windows.net and below is the static website

Image description

Top comments (0)