Posts Hosting a static website in azure via portal

Hosting a static website in Azure via Portal

Html5, css3 and javascript logos followed by a horizontal arrow pointing to visual studio code logo and another horizontal arrow pointing to azure storage logo

In this article I’ll show how easy is to host and deploy a static web application (that doesn’t require server-side processing) to Azure’s infraestructure making use of Azure Storage and delivering it with Visual Studio Code


There are times when our front-end projects doesn’t require any kind of server-side processing. When that happens we can make use of completly static web applications such as SPA and MPA. With the advent of javascript frameworks such as react, angular, vue, etc… and the static website generators like gatsbyjs, jekyll, hugo, etc… static websites grown better, faster, cleaner and more able to meet most requirements of any project.

In this introductory article I’ll show how to deploy a simple tictactoe static website to Azure’s infraestructure using Azure Storage and Visual Studio Code. Let’s get to it.


Creating a Azure Storage

Azure Storage is Microsoft’s cloud solution to store objects (structured or non-structured). It encompasses several services, for different purposes:

  • Azure Blobs: A massive object store used to retain any kind of text or binary data. It also supports analytics big data through Data Lake Storage Gen2
  • Azure Files: A completely managed file share for cloud or on-premises environment
  • Azure Queues: A reliable area to store data exchange messages between applications and components
  • Azure Disks: A storage to retain volumes for Azure Virtual Machines (Azure VMs)

In this article we’ll use Azure Blobs service, that will store all our static website files.

First of all, let’s create a resource group to separate this guide’s resources from all your possible other resources. Access Microsoft Azure Portal, log in and click Resource Groups in favorites menu (left side of the screen), or use the search bar. Next click Create button:

Creating a Resource Group in Azure's PortalCreating a Resource Group in Azure’s Portal

Choose the Resource Group name and the datacenter location and click Create again:

Filling Resource Group informationFilling Resource Group information

Ensure that you are navigating inside the recently created Resource Group and click Create > Marketplace to add a resource:

Adding a resourceAdding a resource

Search for “storage” and hit enter, then select “Storage Account” from Microsoft and click Create:

Search for Azure StorageSearch for Azure Storage

Fill all the required fields as the following image and click Review + create:

Filling storage informationFilling storage information

Storage name must be globally unique (accross all storages registered in Azure), it must be 3 to 24 characters long and can contain only lowercase letters and numbers

Leave all informations with default values and click Create:

Adding the storageAdding the storage

Azure will begin the creation of the storage and when it’s ready, the following screen will be presented. Click the button Go to resource:

Storage successfully createdStorage successfully created

If everything is ok, your storage dashboard will look like this:

Storage's dashboardStorage’s dashboard

Installing Azure Storage extension

With the required infraestructure to store our static website ready, it’s time to ensure that your Visual Studio Code have the required extensions to publish your project files to the recently created Azure Storage. So, open your vscode, look for Extensions in the left side menu or simply press ctrl+shift+X and search for azure storage:

Searching for azure storage extensionSearching for azure storage extension

Or, you can click this link then click Install.

This extension will automatically install Azure Account extension, which will create Azure menu in screen’s left side. Click it and log in using your Azure email and password, follow the steps the extension show you and make sure your account is logged in and your subscriptions are showing, like this:

Azure Account logged inAzure Account logged in

Cloning and deploying the app

Now let’s get our tictactoe static website ready to deploy to Azure. In Visual Studio Code open the terminal (superior menu > terminal > new terminal or ctrl+shift+` or cmd+shift+` in mac) navigate to a directory of your preference to store the project. Then clone the project and navigate to it with:

git clone my-static-website
cd my-static-website

Now open the created directory in Visual Studio Code via File > Open Folder > ...:

Project structureProject structure

To deploy the project to the recently created Azure Storage, you simply have to right-click in the directory you wish to deploy and choose the Deploy to static Website via Azure Storage option. In this project, we’ll want to deliver all the opened files, so, let’s right-click over the empty space in the root of the files tree as following:

Click the highlighted option to deploy all filesClick the highlighted option to deploy all files

Then some options will pop-up for you to tell the extension in which Azure Storage you want to deliver the files, if you have more than one subscription, you must select the same one that you created the Storage earlier:

Select the same Storage you created earlierSelect the same Storage you created earlier

After selecting, the extension might warn you that the static website hosting is not enabled in the selected Storage and will ask you if you wish to enable. We do want that, so choose Enable website hosting option.

You will then be asked what will be the name of the html file that must be considered when your user hit the root URL of your website, leave it written index.html and hit enter. Next, you will be asked the name of the file to present when your user try to access a nonexistent document. In this project there is no page to present in this scenario so we can keep the suggested index.html, but if your project have one, fill the name correctly.

Press enter again and the deploy will begin. After it successfully ends, the following message will appear in your screen’s inferior right side:

Successfully deployedSuccessfully deployed

Navigate to the link written in the message and see your website running!

Website readyWebsite ready


In just a few minutes it’s possible to deploy a static website to Azure using Visual Studio Code. Not only easy, but also cheap. Actually I believe that the price is what’s more attractive in this hosting model.

At this moment I maintain 2 static websites in Azure with little access and I pay around $2,57/mo. But the better cost calculation is done considering bandwidth and storage size used. The best way to estimate is using Azure calculator:

I hope this guide was useful to you, thanks and see you guys soon!

This post is licensed under CC BY 4.0 by the author.