Deploy a static website to Azure from Visual Studio Code

In this tutorial, you create and deploy a static website to Azure using Azure Storage. A static website is composed of HTML, CSS, JavaScript, and other static files such as images or fonts. A static site is typically a single-page application (or SPA) written with Angular, React or Vue. However you design the app, you host and serve these files directly from storage rather than using a web server. Hosting in storage is simpler and less expensive than maintaining a web server.

Note

If you have your own server code, such as a Node.js/Express app, follow the App Service tutorial instead.

Prerequisites

Install the Azure Storage extension

Azure subscription

If you don't have an Azure subscription, sign up now for a free account with $200 in Azure credits to try out any combination of services.

Sign in to Azure

Once you've installed the Azure extension, sign into your Azure account by navigating to the Azure explorer, select Sign in to Azure, and follow the prompts. (If you have multiple Azure extensions installed, select the one for the area in which you're working, such as App Service, Functions, etc.)

Sign in to Azure through VS Code

After signing in, verify that the email address of your Azure account (or "Signed In") appears in the Status Bar and your subscription(s) appears in the Azure explorer:

VS Code status bar showing Azure account

VS Code Azure explorer showing subscriptions

Note

If you see the error "Cannot find subscription with name [subscription ID]", this may be because you are behind a proxy and unable to reach the Azure API. Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal:

# macOS/Linux
export HTTPS_PROXY=https://username:password@proxy:8080
export HTTP_PROXY=http://username:password@proxy:8080
# Windows
set HTTPS_PROXY=https://username:password@proxy:8080
set HTTP_PROXY=http://username:password@proxy:8080