Hosting a Static Website on Azure Blob Storage Using VS Code

Azure Blob Storage is a great way to host static websites (HTML, CSS, JS, and images) at a low cost. In this guide, I'll show you how to deploy a static website from Visual Studio Code (VS Code) to Azure Blob Storage efficiently.

Requirement.

Before we begin, ensure you have:

1. An Azure account (Free tier available)

2. VS Code installed (Download here)

3. Azure Storage Account (We’ll create one)

4. Static website files (HTML, CSS, JS, images)

Step 1: Install Required VS Code Extensions

To work with Azure in VS Code, install these extensions:

• Azure Storage (for managing Blob Storage)

• Azure Account (for authentication)

  Open VS code go to Extensions, search for and install both extension

  

  Step 2: Create an Azure Storage Account

  Option A: Using Azure Portal

  1. Go to Azure Portal and Create a Storage Account.

     By Now you should know how to create an Azure Storage Account, if not you can visit my post on how to create an Azure Storage Account.

  2. Once created, enable Static Website Hosting:

     • Go to Storage Account > Static Website > Enable.

     • Set index.html as the Index document name.

     • Set error.html as the Error document path.

       

       Next is to create your container [optional]

       1. 

          Step 3: Using VS Code

     • Note: for the sake of our practice, I downloaded a static website[ceevee] and extracted it so I can be able to work with it cause it was downloaded in a zip format.

     • Open a VS code

     • On the left hand side open click on file an d select Open folder

       

       It takes you to file Explorer, i went to my download selected the Ceevee i downloaded and clicked on select folder

       

       It takes you back to VS code in the form below after accepting to trust the author.

       

       At this point you can view the index.html and error.html code by clicking on it and also you can make any necessary corrections.

     • NOTE make sure to save any corrections made using ctrl s.

       

       Then after saving the corrections if their is any, On the left hand side below the extension symbol you will see the Azure sign click on it and click to sign in to Azure

       

       After clicking on sign in to Azure a warning sign comes up asking for your permission to allow the Extension to sign in using Microsoft.

       

       Once allowed you will need to provide the email you use to create you AZURE account.

       

       After providing your login email at the resources two options will display, select the view account and tenant and on the Account and Tenants tick your Azure account name under default directory after your email. A warning sign comes up again click on allow.

       

       After successful signing in your should see Concierge subscription or Azure subscription one.

       

       Click on the Concierge Subscription drop down and select Storage Account

       

       Right click the storage account you created and select from the options Deploy Static Website Via Azure Storage.

       

       Click on the path that showed up

       

       Deploying starts immediately the path is clicked

       

       To Check if our Deployment was successful, Move to Azure Account click on the container that was created by default that’s the $web to see the Details of the Deployment.

       

       Step4: HOW TO ACCESS THE WEBSITE

       Click on the Overview move down to Data Management and select Static Website, Copy the Primary End Point to a new tap and search.

       

       ERROR.HTML

     • To create the Error.html code click on the Explorer on the VS code select a new file and name it Error.html. Get your Error Message. Note you can get that online by googling about it .Paste the code under the error.html file created.

     • DEPLOYING.

     • Follow Same process by clicking on the Azure sign and click on the drop down of the concierge select the storage account and double click on the create storage account, select the Deploy to Static Website via Azure a path displaces select it and Deploying with start immediately.

     • After Deployment move back to the Data Management click on it and select the static website, Copy it to a new tap and add few law that’ to say add some few letters or numbers after pasting the Primary end point. When you search it will come up with error message and also give you options to take you back to the landing page that’s the homepage.

       

       Conclusion

       We’ve successfully deployed a static website to Azure Blob Storage using VS Code! This setup is:
       Cost-effective, Scalable and Serverless.