Step by step process of deploying a static website on azure.

📑 Table of Contents

• What is Azure Blob Static Website Hosting?
• Prerequisites
• Step 1: Upload Your Website Files in VS Code
• Step 2: Create a Storage Account
• Step 3: Enable Static Website Hosting
• Step 4: Upload Your Website Files to Azure
• Step 5: Test Your Website
• Bonus: Set a Custom Domain (Optional)
• Conclusion________________________________________ ## What is Azure Blob Static Website Hosting? Azure Blob Storage can serve static content like HTML, CSS, JS, and images directly to your users—no backend required. It’s perfect for portfolios, blogs, single-page apps, or documentation sites. ________________________________________ • ## Prerequisites
• An Azure account
• A simple static website (HTML/CSS/JS files)
• Internet access and the Azure Portal
• Visual Studio Code (VS Code)

Step 1: Upload Your Website Files in VS Code

1. Open a vs code and upload the static website file you want to deploy.
2. On the vs code, click on new terminal then proceed to click on file.
3. New folder and select the website file you want to work on and save.
4. Run without debugging to see what you have locally. and select any browser and run it. you should be able to view it on the browser.

Step 2: Create a Storage Account

1. Navigate to the Azure Portal
2. Click Create a resource → Search for Storage account
3. Click Create
4. Fill out the form: o Choose Subscription, Resource Group o Enter a globally unique name for your storage account (e.g., mystaticweb123) o Choose a region (e.g., East US) o Leave other settings as default
5. Click Review + Create → Create ________________________________________

After creation, go to resource. On the overview page, click capabilities, click on the static website to configure it.

Step 3: Enable Static Website Hosting

1. Once the deployment is complete, go to the Storage Account
2. On the overview page, click capabilities, click on the static website to configure it.
3. Set Static website to Enabled
4. Enter: o Index document name: index.html o Error document path: error.html (optional)
5. Click Save

You’ll now see a Primary endpoint URL—this is your website URL

On the static website page, you will enable the static website, write the index document name as index.html. the error document path, write error.html. if a user is browsing is browsing your page and the page is not found, it will route the user to this error.html

After saving, it will display the primary end point as seen on the below screenshot.

Copy the URL and paste on a new page. It will show the requested content does not exist and that is because we do not have a web content here yet.

So what we do at this stage is to move that our web code files to azure to render it. Below steps shows how to do it.
Step 4: Upload Your Website Files

1. In the same storage account, go to Containers
2. Click on the special container named $web
3. Click Upload
4. Upload your index.html, styles.css, and any other static files Make sure files go directly into $web and not a folder inside it.

---

resources uploaded shown below

Step 5: Test Your Website

1. Return to the Static website blade
2. Copy the primary endpoint URL
3. Paste it into your browser ## Conclusion That’s it! You've hosted a static website on Azure Blob Storage using just the Portal—no code, no command line, just a few clicks.

Conclusion

That’s it! You've hosted a static website on Azure Blob Storage using just the Portal—no code, no command line, just a few clicks.