Hosting a Static Website on Azure Blob Storage
Tags: azurestorage, cloudcomputing, staticwebsite
Published: 2024-07-02 19:02:20

Azure storage stores all types of data. It is mainly designed for storage where we can easily store both structured and unstructured data. Blob Storage is optimized for storing massive amounts of unstructured data. Unstructured data is data that doesn't adhere to a particular data model or definition, such as text or binary data. In Microsoft Azure, you can easily upload your static website and share the link anywhere and anyone can see your website. 

In Azure you can enable your static website for free, but you will pay for the storage account. Azure uses the encryption technique for storing the data. In this article, all the steps are mentioned one by one with proper screenshots. Follow all the steps and host your static website. 

**Log in to Azure**

- Click on Storage Accounts
- Click on  "Create"

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

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

**Create a Storage Account**
In the Basics tab, under Project details, make sure the correct subscription is selected and select _StorageRG_ from my resource group list you create a new resource group if you don’t want to use an existing one.
- Storage account name - Choose a unique name 
- Region -_Select_ a region
- Performance - _Select_ Standard
- Redundancy - _Select_ Geo Redundant Storage
- _Click_ the next button or configure the other sections if required, otherwise leave as default.
- _Click_ on Review + Create

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

**Validation**
Check if storage account has configured properly or not,if proper then it will show the create option otherwise you need to check all the configurations again. Then _click_ on the **Create Button**.

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

**Deployment**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9oohboehcgqdhiwga0r.png)
- Go to Resources
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sd0b0l3pbwua1454xsu8.png)

**Navigate to Static Website**
- On Data Management dropdown
- Click on Static Website

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

**Configure the Static Website**
- Enable Static Website
- Enter index document name
- Enter error document 
- Save

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

- Now you will see that azure created two links ( Primary and Secondary)end points.
- Copy the primary end point
- Azure created a storage container to host the static website **$WEB**, _Click_ on it

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

**Navigate to Containers**
- On Data storage dropdown
- _Click_ container
- _Click_ **$WEB**

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

**Uploading Files from the PC**
- click on Upload.
- Navigate to where the website folder is located on the computer.
- Drag and Drop the files from the location to the provided box.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wva998lf8o9r7sxh4h4.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4y488v2dj4ib3nw7yo6.png)

**Testing on a browser**
- When your files are successfully uploaded then paste your primary end point on your browser.


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


Thank you for sticking with this post and going through the steps, I hope you were able to use this guide to setup a static website on Azure Storage.