Deploy a static website to Azure

This tutorial walks you through deploying a static website, such as an Angular or React SPA or simple HTML/CSS/JavaScript site, to Azure using Azure Storage.

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

Overview

When you are building a static website, your production website is a collection of HTML, CSS, JavaScript and other static files (images, fonts, etc.). You can host and serve these files using either App Service or Azure Storage, but we will use Azure Storage because it's a little simpler and a lot cheaper.

In this tutorial, we will deploy your static site to Azure Storage by doing the following:

  1. Get the required accounts and dependencies.
  2. Create or prepare an application for deployment.
  3. Create and configure Azure Storage for hosting.
  4. Deploy to Azure Storage using VS Code!

Prerequisites

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

Node.js - Download Node.js and npm, we recommend the LTS (long term support) version.

Note: If you already have application code, you don't need to install Node.js as this tutorial only uses it to generate a sample project.

Install the extension

The Azure Storage extension is used to deploy your website to Azure.

Install the Azure Storage extension

Sign in

Once the extension is installed, log into your Azure account - in the Activity Bar, click on the Azure logo to show the AZURE STORAGE explorer. Click Sign in to Azure... and follow the instructions.

sign in to Azure

Prerequisite check

Before we continue, ensure that you have all the prerequisites installed and configured.

  • Log in to Azure Portal to make sure your Azure Account is working.
  • From a terminal, execute:
node -v
v8.11.3

npm -v
6.3.0

to ensure that both Node.js and npm are installed.


I've installed the prerequisites