Hosting a Static Website Using Microsoft Azure Blob Storage
Tags: azure, azurestorage
Published: 2024-07-04 10:17:18

Microsoft's cloud storage solution for contemporary data storage scenarios is the Azure Storage platform. For a range of cloud-based data items, Azure Storage provides highly accessible, massively scalable, robust, and secure storage. Anywhere in the globe may access Azure Storage data objects using HTTP or HTTPS.
All kinds of data are stored in Azure storage. Its primary purpose is to provide easy access to storage for both structured and unstructured data. Your static website may be quickly uploaded to Microsoft Azure, where you can establish access control and share the URL with anybody to see your website.

In this article I will demonstrate how to setup a static website using the Azure portal. Let's dive in.

**Log in to the Azure Portal and create an Azure storage account.**
Click on the [Azure portal](www.portal.azure.com). 

**Create an Azure storage account**.

- 
Search for storage accounts and click on it.


![Storage accounts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nk79sbs2h98spc7x3ni.png)


**Create a Storage account**

![Create a storage account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvhd59tnv0nva51tbn6v.png)

**Create a Resource Group**.
Create or select an existing Resource Group. 
Give your storage account a unique name eg _webstore212_.
Click on _Review + create_.


![Create a RG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k1zg5f2jpkhbogvg6gh.png)

After the deployment is completed, click the _Go to resource_ button.

![Goto Resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxupu20jnr35ww8fmbl1.png)

**From the Storage overview page**.

- Scroll to the _Data management _ blade and select _Static website_.


![Static website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ig5yb1nmk2e7bq1tsa9.png)

- 
Enable the static websites on the blob service to host a static content.

- 
Enter the _index document name_ and the _Error document path_.

- 
Click _Save_.


![Static site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtgjme7f95i4op8yfln3.png)

- From the _Data storage_ blade, select _Containers._
(Note that a new container has been created named _web_.

- Click the _web_ container.


![data storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ithrk00sx3nuu9rmoes.png)

- In the web storage tier, upload your website files by clicking on the _upload_ button.


![web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su2tt9q45xjnsc1t3633.png)

- Browse to where you have your website file or Drag and drop your website files.


![Upload files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx5ltcpcglxorx2pubfl.png)


![files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/918yftwz2suldnixx9m4.png)


- Click on _Upload_ to complete the process.


![Upload files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33e52tpnjfn1s45a4r3h.png)

**A view of the uploaded files**.


![Uploaded files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar15grcf290dlmjh02rv.png)

- 
Navigate to the storage account and under the _Data management_ blade, select _Static website_ 

- Look for _Primary endpoint_ to the right of the page and copy the endpoint URL.


![endpoint url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sosgitvutct79toiq2e1.png)

- Paste the URL in a browser to access the webpage. 


![Web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va411zzwjzsakgfkes5b.png)

- 
The displayed website.


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