Deploying a Static Website on Azure Using Blob Storage

This guide walks through the full deployment of a static web application using Azure Blob Storage Static Website Hosting.

The goal of this deployment is to demonstrate how Azure Storage can be used to host front-end applications without provisioning servers, virtual machines, or container infrastructure.

In this guide we will deploy the Mini Finance application, a static website composed of HTML, CSS, and image assets, and make it publicly accessible through an Azure-generated endpoint.

The deployment will cover the full process, including resource creation, configuration, file upload, and verification.

Resource Type	Resource Name	Purpose
Resource Group	mini-finance-rg	Logical container for all resources
Storage Account	minifinancedemo01	Stores and serves website files
Blob Container	$web	Hosts static website content
Static Website Endpoint	View Site	Public access URL

---

Architecture Overview

This deployment follows a simple static hosting architecture.

User requests are sent to the Azure static website endpoint, which retrieves files from the $web container inside the storage account.

This architecture removes the need for:

• Virtual machines
• Web servers (Apache or Nginx)
• Load balancers
• Container services

Azure Storage serves the application directly.

---

Step 1 — Download the Mini Finance Application

Before creating any Azure resources, we first download the application that will be deployed.

The Mini Finance project is hosted on GitHub and contains the static files required to run the application.

Steps

1. Navigate to the Mini Finance GitHub repository
2. Click Code
3. Select Download ZIP
4. Extract the archive locally

After extraction, the project directory should contain files similar to:

mini-finance/
├── index.html
├── style.css
├── images/
└── assets/

These files will later be uploaded to Azure Blob Storage.

Step 2 — Create the Resource Group

A Resource Group is used to organize and manage all resources related to the deployment.

Configuration

Property	Value
Resource Group Name	mini-finance-demo-rg
Region	Spain Central

Steps

1. Open the Azure Portal
2. Search for Resource Groups
3. Click Create
4. Enter the configuration above
5. Click Review + Create
6. Click Create

The resource group now acts as the container for all resources used in the deployment

Step 3 — Create the Storage Account

Basics

The Basics tab defines the core properties of the storage account.

Setting	Value	Explanation
Subscription	Your Azure subscription	Billing account that owns the resource
Resource Group	mini-finance-demo-rg	Groups related resources together
Storage Account Name	minifinancedemo01	Globally unique name used in the endpoint URL
Region	Spain Central	Determines where data is stored
Performance	Standard	Suitable for static website hosting
Redundancy	LRS	Keeps three copies of the data in one datacenter

Advanced

The Advanced tab controls compatibility and security features.

Recommended configuration:

Setting	Value	Explanation
Secure transfer required	Enabled	Ensures HTTPS connections
Allow Blob public access	Enabled	Required for static website hosting
Minimum TLS version	TLS 1.2	Ensures secure connections

Leave other settings as default.

Networking

The Networking tab controls how the storage account can be accessed.

For this demo we allow public access so users can reach the website.

Setting	Value	Explanation
Public network access	Enable	Allows internet access
Access scope	Enable from all networks	Makes the site globally accessible

---

Data Protection

Backup and recovery options are configured here.

For this demo leave defaults.

Setting	Value
Soft delete for blobs	Disabled
Soft delete for containers	Disabled
Versioning	Disabled

---

Encryption

Azure automatically encrypts stored data.

Setting	Value
Encryption type	Microsoft-managed keys

No changes are required.

---

Tags (Optional)

Tags help organize resources in larger environments.

Example:

Name	Value
project	mini-finance
environment	demo

---

Review + Create

Azure validates the configuration.

Click:

Review + Create → Create

Deployment usually completes within 30–60 seconds.

After deployment click Go to Resource.

---

Step 4 — Enable Static Website Hosting

1. Open the storage account minifinancedemo01
2. Navigate to: Data Management → Static website

Enable Static Website and configure:

Setting	Value
Static Website	Enabled
Index Document Name	index.html
Error Document Path	index.html

Azure automatically creates a container named: $web

---

Step 5 — Upload the Website Files

Navigate to:

Data Storage → Containers → $web

Upload:

index.html
css/
images/
js/

Step 6 — Verify the Deployment

Open the endpoint: go back to static web site and copy the endpoint

https://minifinancedemo01.z43.web.core.windows.net/ (available temporarily for this demo)

open it in a new browser:

Expected result:

• Homepage loads
• Styles apply correctly
• Images render
• Navigation works

Deployment Summary

Resource	Name
Resource Group	mini-finance-demo-rg
Storage Account	minifinancedemo01
Blob Container	$web
Static Website Endpoint	Azure Generated

Infrastructure used:

• 1 Resource Group
• 1 Storage Account
• 1 Blob Container

No compute resources required.

---

Key Takeaways

• Azure Blob Storage can host static websites
• No servers or infrastructure management required
• $web container stores website assets
• Azure automatically provides a public endpoint

---

Final Thoughts

Static website hosting on Azure is one of the simplest ways to deploy front-end applications.

Instead of managing servers and web servers, you can deploy an entire site using only storage.

With a few configuration steps and a folder of files, your application becomes publicly accessible across the internet.