Deploy a Static Website to Azure Storage from VSCode

In this guide, I will take you through how to Deploy a Static Website to Azure Storage from VSCode. Visual Studio Code, popularly known as VSCode, is an open-source Integrated Development Environment (IDE) by Microsoft. VSCode is one of the most widely used IDEs by developers around the world. Please see Azure Storage: How to create Blob Storage and upload files, Hosting Static Website and Versioning on AWS S3, and Hosting Static Website and Versioning on AWS S3.

Azure storage serves as versatile storage for various data types, including structured and unstructured content. With Azure Blob Storage, you can easily deploy your static website and share the link anywhere, and anyone can see your website. You can manage your access control.

Learn how to create an Azure Container instance to deploy your image to Azure using Azure CLI. Microsoft Azure is one of the leading public clouds that comes with a pay-as-you-go subscription, spot instance, savings plan, and reserved instance.

Therefore, the need to keep costs under control is important. See how to control cloud costs using an Azure VM. You may also be interested in deploying a Linux virtual machine (VM) on Azure using the Azure CLI.

Azure Storage offers highly available, massively scalable, durable, and secure storage for a variety of data objects in the cloud. Azure Storage data objects are accessible from anywhere in the world over HTTP or HTTPS via a REST API. 

Host a static website on Azure Storage

To host a static website on Azure Storage, you need to use the Azure Storage Blob Service.

A massively scalable object store for text and binary data. It is used to store both structured and unstructured data type.

With the Azure Blob Storage service, you can serve static content such as HTML, CSS, JavaScript, and image files from a storage container usually named $web. Azure Storage Blob Container supports the uploading of batch files.

Azure offers a free option to activate static websites, with costs incurred solely by the storage account. Both data in transit and data at rest in the Azure Storage account are encrypted.

Hosting static websites on Azure Blob Storage doesn’t support configuring headers. It requires additional resources, such as the Azure Content Delivery Network (Azure CDN), for configuring headers.

Prerequisites to Deploy a Static Website to Azure Storage Blob Storage

To deploy a static website to Azure Blob Storage, you’re required to have the following:

1. An Active Azure Subscription: If you don’t have an active subscription. Sign up for free for 30 days.
2. Azure Storage account and Visual Studio Code IDE installed on your system.
3. Azure account with the right privilege to create a storage account.

If you have all the above, proceed to the next section of this guide to learn how to deploy a static website to Azure Blob Storage.

Deploying a Static Website to Azure Blob Storage

To deploy a static website to Azure Blob Storage, we need to first create an Azure Storage account and enable the static website feature for it.

See how to Set a Static IP Address in Windows 11, and how to configure static page in Microsoft Edge browser via Local Group Policy on Windows.

Step 1: Create an Azure Storage Account

To create an Azure Storage Account, sign into the Azure Portal. When in the Azure Portal, search for storage accounts using the horizontal search bar at the top of your browser’s screen.

When the Storage Accounts dashboard opens up, click on “Create” to create a storage account.

On the basic tab of the Storage Account Creation page, specify the subscription, resource group, storage account name, region, performance, and replication type.

Click on "Review" and then "Create" on the next screen.

Please, see Download and update Synology DiskStation NAS to DSM 7.3. Here is how to patch Veeam Backup and replication 12.3.2.3617 to 12.3.2.4165.

Step 2: Enabling Storage Account for Static Website

To enable a storage account for a static website, click on "Go to resource" to navigate to the newly created storage account.

From, the overview page of the storage account, locate and click on "Static Website" under Data Management tab. Then, toggle the button to Enabled and click on Save.

Noticed from the above, I have specified the index document name and the error document path as index.html and 404.html respectively

Once you enable the storage account for hosting a static website, the $web default container and the primary endpoint will be created, as shown below.

Step 3: Download the template and prepare your code in the VSCode environment.

The next thing to do is to head to Themezy, download the template of your choice, extract it, and then add and open it with the Visual Studio Code application on your local system.

After adding the website files to VSCode, take time to inspect them and make changes to them as you would prefer.

Step 4: Deploy a static website to Azure Blob Storage Container

Let’s inspect the $web container and the storage blob endpoint to see what they look like.

As we can see from the screenshots above, the $web container is empty, and the endpoint is reporting that “The requested content does not exist.”

Now, let's proceed to deploy the static website from VSCode. 

To do so, right-click on the folder holding your static website content from the VSCode screen and click on "Deploy to Static Website Via Azure Storage".

Select your subscription.

Note, that the subscription selected here must be the same as the one you used while creating the storage account 

Next, select the storage account you created previously and click on it.

After deploying the website, you will receive a prompt at the bottom left of the VSCode notifying you that the deployment is complete and pointing you to the primary endpoint.

Step 5: Browse to the primary endpoint

To test the deployment, browse to the primary endpoint. In this case, my primary endpoint is https://staticwebsitetechdirect.z13.web.core.windows.net/

Step 6: Verify the website files in $web Container

Navigate to the Azure Portal and click on “Containers” under the Data Storage tab.

Next, double-click the $web container to see the static web files, as shown below:

We have successfully deployed a static website via Azure Storage. You can go ahead to modify the website contents and redeploy the updated content to replace the default web page.

Next Steps [Deploying a Static Website to Azure Storage from VSCode]…

There are a few things I didn’t do. This is because I have already added the Azure Storage extension to my VSCode and authenticated it with my login credentials to Azure.

Note: If you're just getting started with the deployment or just working with Azure Storage directly from Visual Studio Code, you're required to install the Azure Storage Extention and authenticate your credentials to Azure. 

Cleanup Resources

When you are done deploying, don’t forget to clean up resources by deleting the resource group where you deployed the Azure Storage Account.

This helps prevent the charges from Azure. Use the Azure CLI command below to delete the resource group:

az group delete --name <resourceGrouupName> --no-wait

In this post, you have learned how to deploy a static website on Azure Storage directly from your Visual Studio code. In the course of reading this article, you have also learned how to create an Azure Storage account and enable the static website feature for it.

I hope you found the post on how to deploy a static website to Azure storage from VSCode useful. Please feel free to leave a comment below.