How to Host a Static Website on Azure Blob Storage Using Visual Studio Code
Tags: azureblobstorage, staticwebsite, visualstudiocode, cloudcomputing
Published: 2024-07-07 01:26:41


Hosting a static website on Azure Blob Storage is a straightforward and cost-effective solution for deploying your site. Using Visual Studio Code (VS Code) can streamline this process by allowing you to manage your website files and [Azure](https://dev.to/florence_8042063da11e29d1/core-architectural-components-of-azure-all-you-need-to-know-2n5k) resources directly from your development environment. This guide will walk you through the steps required to host your static website on Azure Blob Storage using VS Code.


Before you start, ensure you have the following:

An Azure account: If you don't have one, you can create a free account.
Basic understanding of Azure Portal.

Install Visual Studio Code 
Install Azure Storage extension for VS Code from the Extensions view in VS Code.

###Step 1: Set Up Your Project in VS Code###

Open VS Code: Launch Visual Studio Code on your computer.

**Create or open your website project**:
If you already have a project, open it by clicking on "File" > "Open Folder" and selecting your project folder.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f8xrdq8j1yta5qcwm4b.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f4c7u30ijyl6r9keqst.png)


###Step 2: Create a Storage Account in Azure###
Log in to Azure:
Follow the prompts to sign in to your Azure account.

**Create a new storage account**:
Click on **Storage account**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3itkeh7knwb908ma082.png)

Click on **Create**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9ourmji00wy1dmdytxg.png)

**Select**:
**Subscription**
Create new **Resource group**
**Storage account name**
**Region**
**Performance**
**Redundancy**

Click on **Review and create**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vutkv3oj0v7a69w4lmnk.png)


**Deployment in progress**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m9yq7rzozkwsz3dksth.png)



When **Your deployment is complete**, click on **Go to resource**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s634bkjqxzc6w8frjpx.png)

###Step 3: Configure static website settings##:
Go to your storage account in the Azure Portal.
Under **Settings** select Click on **Static website**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zlevnavwfrcq6h0mtu4.png)

Click on the **Enabled** button
Specify the index document name (e.g., index.html) and the error document path (e.g., 404.html).

Click "Save." This will generate a primary endpoint URL for your static website.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h465b1r68bx31hyzh9q5.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbnfmn1w1kg3llg968ys.png)

Click on **Data storage** select **Container** and click on **$web**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55gyvtu7pvsrc9kglrth.png)

Click on **Upload**. Choose the files of your static website (HTML, CSS, JavaScript, images, etc.) 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w90b25stryazhibqjfov.png)

**Uploads**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnsl22g86mdjhakzcl0i.png)

###Step 4: Go to VS Code###

Right click then select **Deploy to static website via Azure Storage**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa2scmvkrnug2lj90kxf.png)

**Sign into your Azure account**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k70qyilk6yzpc4rs6m9y.png)

**Deploying**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1worh5boq8dfwxyymgr9.png)

My **Static website**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpteybs3nv4b6xievasf.png)


Another way without using **Visual Studio Code** is to copy the primary endpoint URL.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ica8felb35c8upnhrzp.png)

Paste the URL into your browser to view your hosted static website.

Conclusion
Hosting a static website on Azure Blob Storage using Visual Studio Code is an efficient and cost-effective way to deploy and manage your site. Integrating VS Code into your workflow allows you to seamlessly handle your website files and Azure resources from a single development environment. Azure Blob Storage provides high availability and scalability, making it an ideal choice for hosting static content.