Static websites are lightweight, fast, and simple to deploy. Whether you're hosting a portfolio, documentation, or a landing page, serving your static site from the cloud is both cost-effective and scalable. One of the easiest ways to do this is using Azure Blob Storage.
Read the full blog and know how to set up a static website using Azure Blob Storage. No virtual machines, no servers—just a storage account and some HTML/CSS files. Perfect for developers who want to deploy fast and focus on the frontend.
Why Use Azure Blob Storage for Static Sites?
Azure Blob Storage is part of Microsoft’s cloud object storage service. It’s designed to store unstructured data like documents, images, and even entire websites. Low cost, High Availability, Automatic Scaling, Built-in HTTPS and No server maintenance are some of the top benefits of Azure blob storage.
Let's get started with the step-by-step tutorial.
Step 1: Create a Storage Account
Log in to the Azure Portal.
Click Create a resource > Storage > Storage account.
Fill in the basics:
Subscription and Resource group
Storage account name (must be globally unique)
Region
Under Performance, select Standard.
Under Replication, choose Locally Redundant Storage (LRS) unless you need more.
Click Review + Create, then Create.
Step 2: Enable Static Website Hosting
Once your storage account is created:
Go to your new storage account.
In the left sidebar, scroll to Data management > Static website.
Click Enable.
Specify the name of your files:
Index document name: index.html
Error document path: 404.html (optional)
Click Save.
Azure will now provide you with a primary endpoint URL (e.g., https://yourstorageaccount.z6.web.core.windows.net/) this is your website’s public address.
Step 3: Upload Your Website Files
You can upload files via the Azure Portal, Azure CLI, or Storage Explorer.
Upload via Portal:
In your storage account, go to Containers.
You’ll see a special container named $web.
Click $web, then Upload.
Select your index.html, CSS, JS, and image files.
Make sure they retain the correct folder structure (e.g., css/style.css).
Upload via Azure CLI:
You can upload files via the Azure Portal, Azure CLI, or Storage Explorer.
- In your storage account, go to Containers.
- You’ll see a special container named
$web
. - Click
$web
, then Upload. - Select your
index.html
, CSS, JS, and image files. - Make sure they retain the correct folder structure (e.g.,
css/style.css
).
Upload via Azure CLI:
az storage blob upload-batch \
--account-name yourstorageaccount \
--destination \$web \
--source ./your-website-folder
Make sure you’re authenticated with az login
first.
Step 4: Test Your Website
Once the files are uploaded, open the primary endpoint URL from the Static Website settings.
You should see your static site live and publicly accessible!
If you uploaded a 404.html
file, try accessing a non-existent path to test your error page.
Step 5: Add a Custom Domain (Optional)
Want your site to be accessible from www.yourdomain.com
?
- Purchase a domain from a registrar.
- Go to Custom domain under your Storage Account settings.
- Add a CNAME record to point your domain to the storage account’s endpoint.
- Verify the mapping in Azure.
Azure also supports Azure CDN integration for performance and HTTPS with a custom domain.
Why Developers Love Azure Blob for Static Sites
- Deploy in minutes
- No need for DevOps pipelines or CI/CD unless you want them
- Easily version and roll back files
- Integrates with VS Code and GitHub
Want to build more with Azure? Take a hands-on approach with the Microsoft Azure Developer Course by SkillTech Club. You’ll learn real-world deployments, including static sites, web apps, and cloud automation using Azure.
Final Thoughts
If you're looking for a fast, scalable, and server-free way to publish a static website, Azure Blob Storage is a fantastic choice. It’s ideal for developers who want control and simplicity without the overhead of managing infrastructure.
Does this blog meet your expectations? Let me know in the comment section.
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.