Hosting Static Website on Azure Blob Storage
Tags: cloudcomputing, azure, microsoft, tutorial
Published: 2024-07-05 11:37:21

Table of Contents <a name="content"></a>
[Introduction](#intro)
[Requirements](#require)
[Steps on Hosting a Static website on Azure Blob Storage] (#steps) 

### Introduction <a name="intro"></a>
A static website is a website whose content is constant. They present the same content to all users and do not use databases or server-side processing. The contents are not generated using server-side scripting languages like PHP, Java, Ruby, Pithon rather they are built using front end languages like HTML, CSS and JavaScript.

Azure blob storage is a type of storage in Azure that store massive amount of unstructured data. Blobs are organized in a container. A container can store unlimited number of them. A container is located in a storage account.

What does it mean to host a website? To host a website also known as web hosting is to make a website available and accessible on the internet. Hosting your content in Azure storage enables you to use serverless architecture. it is a good option when you do not require a server to render your content.

[_back to Contents_](#content)

### Requirements <a name="require"></a> 
This guide uses Visual studio code to deploy already built static website to Azure blob storage. Hence, you need to do the following:

- Download and install Visual studio code.
- install extensions like Azure Account and Azure Storage on the Visual Studio Code. The extensions will be used by visual studio code to deploy your static website to Azure Storage.
- Already created static website saved in a folder.

[_back to Contents_](#content)

### Steps on Hosting a Static website on Azure Blob Storage <a name="steps"></a>
#####Sign in
sign in to portal.azure.com if you already have azure subscription otherwise click [here](https://azure.microsoft.com/en-us/free/?WT.mc_id=A261C142F) to create a free one.

##### Create a Storage Account 

- Search and select storage accounts on the search bar, then click create.

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

- On the basic tab, fill the following
On the Project details, select the subscription in which to create the new storage account. Create a new or select an existing resource group to organize and manage your storage account.

On the Instance details, give the storage account a name. Select region closest to your user. For performance, select standard or premium performance. Standard is recommended for most general-purpose v2 account scenarios while premium is recommended for scenarios that require low latency. Finally, select the redundancy type. 

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

- Click review and create then create.

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

##### Configure Static Website for Hosting
- Once deployment is complete, click go to resource to move to your storage account overview page.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xx2x66585ywwz4rnpbdp.jpg)
- On the left pane, click on data management.

- Select static website blade and click enable. 
Enabling static websites on the blob service allows you to host static content. 
In the Index document name field, provide the name for your default index page, for instance index.html. This is the page that displays when a user navigates to the root of your static website.
In the Error document path field, specify the path to a default error page of your site. This is the default error page that is displayed when a user attempts to navigate to a page that does not exist in your static website. For example, "C:\Users\HP\Documents\mywebsite\404.html" or just simply 404.html.
- Click Save. 


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

Azure portal now displays your _static website endpoint_. Also, a container named _$web_ is automatically created for you. The $web container will contain the files for your static website. 

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

- On the left pane, go to data storage. Click on  container to view the $web container that was created.  Notice it has no content. 

##### Host a Static Website 

- Launch Visual studio code to open your static website folder.  Click on the explorer and select open folder. Locate and open the folder for your site.

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

- Right-click under the folder in the explorer panel and select Deploy to Static Website via Azure Storage to deploy your website. 

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

- You will be prompted to sign in. Click sign in to Azure and select the right subscription containing the storage account for which you enabled static website hosting.

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

- You will be redirected to a browser. When you have successfully login, go back to visual studio code and select the storage account when prompted.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg2fhkfwoap3gbu7dw13.jpg)
- Visual Studio Code will upload your files to your web endpoint and show the success on the status bar. 

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

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

- Launch the website to view it in Azure. On Azure portal, copy your static website endpoint displayed when you enabled static website. Paste on a browser and launch.

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

_Congratulations!!! You've successfully hosted a static website on Azure blob storage._

 [_back to contents_](#content)