DEV Community

kristarking
kristarking

Posted on

How to Host a Static Website on Azure Storage

Introduction
Want to host a website without managing servers? Azure Storage Static Website Hosting is an easy, fast, and cost-effective way to deploy a website without worrying about infrastructure.

In this step-by-step guide, I’ll show you how to:
Create an Azure Storage Account
✅ Enable Static Website Hosting
✅ Upload your website files
✅ Access your live website

By the end, you’ll have a fully functional static website running on Azure!

Table of Contents
1 Prerequisites
2 Step 1: Create an Azure Storage Account
3 Step 2: Enable Static Website Hosting
4 Step 3: Upload Website Files to Azure Storage
5 Step 4: Access Your Website
6 Conclusion

Prerequisites
Before starting, make sure you have:

✅ An Azure account (Sign up here if you don’t have one).
✅ A simple static website (at least an index.html file).

Create an Azure Storage Account
1.1 – Log in to Azure Portal
Visit the Azure Portal.
Sign in with your Microsoft account.
1.2 – Create a Storage Account
Click "Create a resource".
Search for "Storage Account" and select "Create".

Azure storage creation

1.3 –** Configure Storage Account Settings**
Fill in these details:

Subscription: Select your active subscription.
Resource Group: Choose an existing one or create a new one.
Storage Account Name: Enter a unique name (e.g., mystaticweb).
Region: Choose a data center close to your audience.
Performance: Select Standard.

Image Screenshot

Image description

You can leave anonymous access as it is, cause I will show you how to fix it

Anonymous access image

Review & Create
Click "Review + Create".
Click "Create" and wait for deployment.

Azure Sreenshot

Image description

Once done, click "Go to resource".

Image description
Your Azure Storage Account is now set up!

Create a container, give it a name, then click on "Create"

Image description

click on the container name you just created, then click on "upload"
3.2 – Upload Your Files
Click "Upload".
Select your HTML, CSS, JavaScript, and image files.
Click "Upload" to confirm.
✅ Your website files are now hosted on Azure!

Azure storage image

Azure storage image

Azure storage image

Azure storage image

Step 4: Access Your Website
After uploading your website files, click on the container name you created, then you will have URL to your website, copy the URL

Azure storage image

ERROR!
Access denied issue, do not worry, I will show you how to access it

AzureImage

To fix this, under "overview" scroll, click on "Configuration" Enable "Allow Blob anonymous access" then click on save

Azure storage access

Go back to the container you created, click on the three dots (...) change the access level

Image description

Image description

Refresh the website URL

Image description

Image description

Your website should now be visible!

Your static website is now live!

If your website doesn’t load:

Ensure index.html is uploaded correctly.
Clear browser cache or open in Incognito Mode.

Conclusion
Congratulations! 🎉 You’ve successfully hosted a static website on Azure Storage in just a few steps.

What We Achieved:
✅ Created an Azure Storage Account.
✅ Enabled Static Website Hosting.
✅ Uploaded our website files.
✅ Accessed the website via Azure’s public URL.

Top comments (0)