Introduction
So I wanted to host a website without paying for a web server or dealing with complex configurations. Turns out, Azure Blob Storage has a brilliant feature called Static Website Hosting that lets you serve HTML, CSS, and JavaScript files directly from a storage container — kind of like having a mini web host built into your cloud storage.
In this post, I'll walk you through exactly what I did, step by step, with screenshots. The website template I used is called Nexus Brew — a cyberpunk-themed cafe website from Tooplate.com, which offers free HTML templates.
By the end of this guide, your site will be live at a URL like this:
https://jewebs.blob.core.windows.net/$web/index.html
Let's get into it!
Step 1 — Download the Nexus Brew Template from Tooplate
Before jumping into Azure, the first thing I did was grab the website template.
I went to tooplate.com — a site that offers clean, modern, free HTML templates built with Bootstrap and CSS. They have over 80 templates for startups, small businesses, and portfolios.
I searched for and found the Nexus Brew template.
It's a dark, cyberpunk-style cafe website template with features like:
A hero banner section
A tabbed menu showcase
An about section with content and images
A contact form
Social media links
Smooth scroll navigation and hover effects
It looks super cool — very futuristic and modern. Perfect for learning!
I clicked the Download button on the template page to grab the zip file.
The downloaded file was named 2146_nexus_brew.zip and it landed in my Downloads folder.
Step 2 — Extract the Zip File
After downloading,
I extracted the zip file. Inside the 2146_nexus_brew folder, you'll find these files:
index.html — the main HTML page
tooplate-nexus-brew.css — the stylesheet
tooplate-nexus-scripts.js — the JavaScript file
ABOUT THIS TEMPLATE.txt — info about the template
images/ — a folder containing all the images used on the site
These are all the files I'll need to upload to Azure later.
Step 3 — Find Resource Groups in the Azure Portal
Now it's time to head over to portal.azure.com.
Once logged in,
I used the search bar at the top and typed "resource group". In the dropdown that appeared, I clicked on Resource groups (the one listed under Services).
What is a Resource Group?
Think of a Resource Group as a folder in Azure where you keep related things together. It helps you manage, organize, and delete resources (like storage accounts) as a unit.
Step 4 — View the Existing Resource Group Created in the Last Blog
After clicking Resource groups, I could see my existing resource group named Je-mega-soft which was created in our last blog, located in South Africa North under Azure subscription 1.
I clicked on it to open it.
Step 5 — Search for Storage Accounts
Inside the Resource Manager section, I used the search bar again and typed "storage account". From the suggestions, I clicked on Storage accounts (the one listed under Services — not the classic version).
This took me to the Storage center where I could see existing storage accounts and create new ones.
Step 6 — Create a New Storage Account
On the Storage center page, I clicked the + Create button at the top to start creating a new storage account.
On the Basics tab of the creation form, I filled in these details:
Resource group: Je-mega-soft (selected from the dropdown)
Storage account name: jewebs (this has to be globally unique — all lowercase, no special characters)
Region: (Africa) South Africa North (I chose the region closest to me)
Preferred storage type: Azure Blob Storage or Azure Data Lake Storage
Performance: Standard (recommended for most use cases)
Redundancy: Locally Redundant Storage (LRS) (the most affordable option — stores 3 copies of your data within one data center)
Why LRS? For a static website that's just for learning or low-traffic use, LRS is more than enough and the cheapest option.
Step 7 — Enable Anonymous Access in the Security Tab
After filling in the Basics, I clicked Next to navigate through the tabs until I reached the Security tab.
Here, the most important setting to enable is:
✅ Allow enabling anonymous access on individual containers
I made sure this checkbox was ticked.
The red arrow in my screenshot points directly to this option — don't miss it!
Why is this important? Without enabling anonymous access, your static website files would be private by default. No one on the internet would be able to open your website. Enabling this allows the $web container (which Azure creates for static websites) to serve files publicly.
Once done, I clicked Review + create, reviewed the settings, and clicked Create.
Step 8 — Deployment Complete! Go to Resource
After a few seconds, the deployment finished and I saw the "Your deployment is complete" message.
The notification bell at the top right also showed a green checkmark saying "Deployment succeeded" — the deployment was to resource group Je-mega-soft.
I clicked the Go to resource button (there's one in the main panel and one in the notification panel — either works) to open the newly created storage account.
Step 9 — Navigate to Static Website Settings
Now I was inside the jewebs storage account dashboard.
On the left sidebar, I scrolled down and expanded the Data management section. Inside it, I clicked on Static website.
If you don't see Data management, look for it in the left panel — it's usually collapsed. The red arrow in my screenshot points directly to it.
Step 10 — Enable the Static Website Feature
On the Static website page, by default the feature is set to Disabled.
I clicked on Enabled to turn it on.
As soon as I enabled it, two input fields appeared:
Index document name: nexus_brew.html
Error document path: ERROR-404.html
This is the page that shows when someone visits a URL that doesn't exist. You can create a simple 404 page or just use the default.
After filling these in, I clicked Save.
Step 11 — Settings Saved Successfully
A green notification appeared in the top right corner saying "Successfully updated static website settings".
On the same page, I could now see:
The static website is Enabled
A message saying: "An Azure Storage container has been created to host your static website."
A link to the container: $web
The Primary endpoint URL: https://jewebs.z1.web.core.windows.net/
What is $web? This is a special Azure container that's automatically created when you enable static website hosting. It's where you'll upload all your website files.
I clicked on $web to open that container.
Step 12 — Upload Files to the $web Container
Inside the $web container, it was empty — showing "No items found".
I clicked the Upload button at the top to open the Upload blob panel on the right side.
I then selected all the files from the extracted Nexus Brew folder:
index.html
tooplate-nexus-brew.css
tooplate-nexus-scripts.js
ABOUT THIS TEMPLATE.txt
The images folder
The upload panel showed "7 file(s) selected" (the images folder contains multiple image files, so the total count goes up).
I clicked the Upload button in the panel to start the upload.
Important tip: Make sure to upload the contents of the folder, not the folder itself. Azure Blob Storage needs the files at the root level of $web for the static website to work correctly. If you upload a folder as a subfolder, your index page won't load properly.
Step 13 — Files Successfully Uploaded
After the upload completed, the $web container now showed all my files:
NameTypeSizeimagesFolder—ABOUT THIS TEMPLATE.txtBlock blob557 Bindex.htmlBlock blob16.8 KiBtooplate-nexus-brew.cssBlock blob24.78 KiBtooplate-nexus-scripts.jsBlock blob3.52 KiB
All 5 items were now visible and available in the container — uploaded on 6/2/2026 at 10:38 PM.
Step 14 — Copy the URL of the Index File
To get the direct URL of the uploaded index.html file, I:
Clicked the three-dot menu (...) next to index.html
Selected Copy URL from the context menu
The URL I got was:
https://jewebs.blob.core.windows.net/$web/index.html
Note: There are actually two URLs you can use:
Blob URL (direct file): https://jewebs.blob.core.windows.net/$web/index.html
Static website URL (cleaner): https://jewebs.z1.web.core.windows.net/
The Website Is Live! 🎉
That's it! The Nexus Brew template is now hosted live on Azure Blob Storage as a static website.
You can visit it at:
👉 https://jewebs.blob.core.windows.net/$web/index.html
Quick Summary of All Steps
Here's a quick recap of everything we did:
- Downloaded the Nexus Brew free HTML template from tooplate.com
- Extracted the zip file and noted the files inside
- Open the Azure Portal and search for Resource groups in the Azure portal
- Opened the existing Je-mega-soft resource group which was previously showed on our last blog how to create.
- Searched for Storage accounts and clicked Create
- Configured the storage account with name jewebs, region South Africa North, Standard performance, and LRS redundancy
- In the Security tab, enabled Allow anonymous access on containers
- Deployed and clicked Go to resource
- Navigated to Data management → Static website
- Enabled static website hosting and set the index document name
- Saved settings and noted the $web container and primary endpoint URL
- Opened the $web container and uploaded all website files
- Confirmed all files were uploaded successfully
- Copied the URL and opened the live websit e
Why I Loved This Approach
Honestly, this whole setup took less than 15 minutes and didn't require me to set up a web server, configure Nginx or Apache, deal with SSL certificates manually, or pay for a VM. Azure handles everything for you and even gives you HTTPS for free through the static website endpoint.
For simple websites — portfolios, landing pages, documentation sites, or just practice — this is one of the easiest and cheapest ways to get something live on the internet.
Resources Used:
Tooplate.com — Free HTML templates
Azure Static Website Hosting Docs
Azure Account.
Top comments (0)