Azure Blob Storage for Beginners: Host Your First Website Free!

🟦 Introduction

How to Host a Static Website on Azure (Free-Tier) Using Blob Storage

As a student or beginner in web development, getting your website online can seem expensive or complex — but it doesn’t have to be. With cloud services like Microsoft Azure, you can host your static website for free using a feature called Blob Storage.

Whether you’ve built a simple HTML/CSS portfolio or a basic school project, Azure provides a straightforward and reliable way to share your website with the world — without needing a paid server or domain name.

This guide is designed especially for students and beginners. You’ll learn:

• What Azure Blob Storage is

• How to set up a free Azure account

• How to upload your website files

• How to access your live site through a public URL

By the end of this tutorial, you’ll have a working static website hosted completely for free on Microsoft Azure.

✅ Prerequisites

• An Azure account (Sign up for free)

• Azure Storage Account (Free-tier usage available)

• Basic HTML/CSS/JS files ready for upload

• Installed the following VS Code extensions:

  • 🔹 Azure Account

  • 🔹 Azure Storage (part of Azure Tools pack)

🧩 Step 1: Create a Free Azure Account

1. Go to https://azure.microsoft.com/free

2. Click on Start for free.

3. Sign in or create a Microsoft account.

4. Provide basic info: name, country, phone number, and card (for identity verification only).

5. Once done, you’ll get free access to Azure services, including free blob storage.

📦 Step 2: Create a Storage Account

A Storage Account is where your website files (HTML, CSS, JS) will be stored.

1. In the Azure Portal https://portal.azure.com, search for Storage accounts in the top search bar.

2. Click + Create.

3. Fill in these details:

   • Subscription: Select your free subscription.

   • Resource Group: Click Create new (e.g., student-web-rg).

   • Storage account name: Must be unique globally (e.g., gbayisite123).

   • Region: Choose one close to your country (e.g., West Europe or East US).

• For the Primary Service: “Click on Azure Blob Storage”

• Performance: Standard.

• Redundancy: Geo-redundant storage (GRS).

• Click on "Next: Advanced>", and scroll down to the Blob storage section.

• On the Access tier click on "hot" to frequently access your data at any time.

• On the Networking page, go to "Network connectivity" and enable public access from all networks.

  When enabled, the URL of the storage can be accessed over the internet. If it is disabled, it becomes private and accessible to you alone.

• Leave other settings as default, click Review + Create, then click Create.

🌍 Step 3: Enable Static Website Hosting

This allows your blob storage to behave like a web server.

1. After creation, click Go to resource.

   

2. In the left-hand menu, scroll to Data Management > Static website.

   

3. Click on Static website and then set it to Enabled.

4. Type:

   • Index document name: index.html

   • Error document path: error.html (optional but recommended)

5. Click Save.

   

6. Copy the Primary endpoint URL — this is your website link.

   

🧾 Step 4: Upload Your Website Files

Now let’s upload your HTML, CSS, and image files.

1. In the same Storage Account, go to Containers in the left-hand menu.

2. Click the container named $web — it was created automatically when you enabled static hosting.

   

3. Click Upload.

4. Browse and upload your:

   • index.html

   • styles.css

   • Any images or JavaScript files

5. Click Upload again.

   

⚠️ Make sure file names match exactly (e.g., Index.html ≠ index.html).

Open Your File On Visual Studio Code

🧰 Step 1: Install Required Extensions

1. Open VS Code.

2. Go to the Extensions panel (or press Ctrl+Shift+X).

3. Search for and install:

   • Azure Account

   • Azure Storage (by Microsoft)

☁️ Step 2: Sign in to Azure

1. Press Ctrl+Shift+P to open the Command Palette.

2. Type Azure: Sign In and press Enter.

3. A browser window opens — log in to your Microsoft Azure account.

4. Return to VS Code, and you should now see your subscriptions in the Azure: Storage panel (left sidebar, ☁️ icon).

📦 Step 3: Create a New Storage Account (from VS Code)

1. In the Azure: Storage panel, click the \> icon next to Storage Accounts.

   

2. You will see the storage account you created in the Azure Portal, right-click on it.

3. Click on "Deploy to the static website via Azure Storage"

4. Wait for creation to complete (shown in the Output panel).

5. You will be prompted to select your folder to deploy the static website

   

6. Wait for the deployment to be complete and click on browse static website

7. You will be redirected to your static website as shown below

   

8. On the Azure portal, go to the $web container in your storage account, you can see that all your static website data has been deployed in the container.

   

🎯 Conclusion

By using Azure Blob Storage and its built-in static website hosting feature, you can publish a fast, scalable, and free static site with just a few steps — no need for a web server or complicated backend setup.