HOST A STATIC WEBSITE ON AZURE BLOB STORAGE
Tags: azure, cloudcomputing, staticwebapps, webdev
Published: 2024-07-04 18:25:07

Deploying a static website on Azure Blob Storage is a cost-effective and scalable solution for website hosting. Azure Blob Storage offers secure and scalable object storage for unstructured data and includes the capability to host static websites directly from a storage account. This blog will walk you through the process of deploying a static website to Azure Storage, enabling you to have a publicly accessible website.

**Prerequisites**

1. An active Azure account. However, if you do not have one, you sign up at [Azure](url)

**Step 1: Log in Azure**

- Go to the [Azure Portal](url) and sign in.

**Step 2: Create a storage account**

- In the middle side menu, Click on "storage account"
- Click on "Create"

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


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

**2. Configure Storage account**

**- Basics Tab:**
1. Select your subscription.
2. Choose or create a new resource group.
3. Enter a unique storage account name.
4. Select a region.
5. Choose "Standard" for performance.
6. Select "Geo-redundant storage (GRS)" for redundancy
7. Click the "Next" button and configure the remaining sections as needed, or leave the default settings in place.
- Click "Review + Create".
  

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

**Validation and Create**

- Verify that all configurations are correct.

- Click "create"

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

**Deployment complete**
- After the creation of the storage account, click on "go to Resource"


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

**Step 3: Navigate to Static website**

- In the left-hand menu, Click "Data management"

- On the data management drop down, click "Static website"

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

**Enable static website**

- Click "Enabled"
- Enter 'index.html' as the index document name.
- Enter '404.html'on the error document path
- Click "Save"

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

**Note Down the Endpoints:**

After saving, you will see primary and secondary endpoint URLs. Copy the primary endpoint URL.

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

**Step 4:Upload website files**

1.** Navigate to containers:**

 - In the left-hand menu, On "Data storage" drop down, Click on "Containers".
- Click on the '$web' container.

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

**2. Upload Files from your laptop**

- Click on "upload"
- Navigate to where 'my website' folder is saved on your PC
- Drag and drop the website files into the upload box.
- Click "Upload" to transfer your files to the $web container.


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

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

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


**Step 5: Testing your Website**

1. **Access your website**

- Open a web browser 
- Enter the primary endpoint URL copied earlier and paste on your browser.
- Your static website should now be live and accessible anywhere

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


Conclusion
Hosting a static website on Azure Blob Storage is a straightforward and efficient process. By following these steps, you can quickly deploy and share your static website. Azure’s scalability and robust security features ensure that your site performs optimally and remains secure.

Happy Hosting!!!