Hosting a static website on Azure Blob Storage
Tags: azure, container, cloudcomputing, learning
Published: 2024-07-05 22:16:53

Azure Storage is a cloud-based storage service provided by Microsoft Azure, designed to store a vast range of data types in a scalable, secure, and cost-effective manner.

Azure Blob Storage is a service for storing large amounts of unstructured data such as text, images, videos, and backup files.
Blob Storage is often used to host websites, distribute media files, and store backup data.

So how do you host a static website on an Azure Blob storage?
Here’s a step-by-step guide to help you get started:

1. Create an Azure Account
If you don’t already have an Azure account, sign up at portal.azure.com 
2. Prepare Your Website Files
Ensure you have all the static files (html, git, font, JavaScript, images, etc.) ready in a local folder.


**3. Create an Azure Storage Account**
Azure Storage provides a scalable and secure way to host static websites.

Go to the Azure Portal: Log in at Azure Portal.
Create a Storage Account:
Click on the “Create a resource” button.

Search for “Storage Account” and select it.
Click “Create”.

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

**4. Configure the Storage Account:**
Subscription: Choose your subscription.
Resource group: Select an existing group or create a new one.
Storage account name: Enter a unique name for your storage account.
Region: Choose a region close to your users.
Performance: Choose Standard.
Replication: Choose the replication option that suits your needs (e.g., LRS, GRS).
Click “Review + Create” and then “Create” after validation.

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

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

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

When deployment is done, click on go to resources.

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

**5. Navigate to Static Website**

- On Data Management dropdown
- Click on Static Website

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

**6. Configure the Static Website**

Enable Static Website
Enter index document name
Enter error document path
Then save

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vyb1rzpc013gk21y7ka.png)
Azure will create 2 links to host the static website. The primary and secondary endpoint.

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

**7. Upload Your Website Files**
Go back to the Storage Account:
Then navigate to the “Containers” section under “Data storage”.
You’ll see a new container called $web (created when you enabled static website hosting).
Upload Files:
Click on the `$web

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9og318zzpp3tb6ffs8n4.png)
**8. Upload files from the PC**
click on Upload.
Go to where the website folder is located on the computer.
Highlight all the files in the folder.
Drag and Drop the files from the location to the provided box.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prdigiqfoh3mqrdb5oj8.png)
It will upload the blob storage, it might take a while to upload all the files.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqwuphh4093iujb0e3xo.png)
**9. Testing on a browser**

When your files uploads successfully, then paste your primary end point on your browser.

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

I hope this step-by-step guide helped you host a static website on Azure Storage. Thank you.