Six Easy Steps to Deploying Static HTML on Azure

September 11, 2018 · 3 minute read

If you haven’t read my post “New Job, New Tech, New Website”, I suggest starting there.

This post will outline the following simple steps to deploy a static HTML website to an App Service on Azure.

We are taking a static HTML site built using Hugo and deploying it to a web server (app service actually) on Azure.

The static files used in this explanation are stored in one of my GitHub repositories found here:
https://github.com/jasonhand/JasonHandCom

The walk-through does not cover Hugo specific topics. For more information on using Hugo to design and build a static site, check out the “Quick Start” Guide

Once you have your static site built and stored on GitHub we can begin from within the Azure Portal.


1. Login to Azure

Login to your Azure account at : portal.azure.com .. (or create a new account).


2. Launch CloudShell

Open the Cloud Shell from within the Azure Portal

NOTE: If prompted … From within the Cloud Shell .. I choose Bash (Linux)


3. Mount (or Create) Persistent Storage

Choose a subscription to assign the storage (for Cloud Shell usage)

Once the shell / terminal is ready we’ll begin running a few commands to provision our app service


4. Install Azure Web App Extension for CloudShell

First, let’s make sure we have the az web app extension installed by running the following:

az extension add --name webapp

You should see the following once the extension has been installed:

Next, we need to create a directory to store our web app (HTML site) and change to that new directory. I’m naming mine www

mkdir www

cd www


5. Clone Repository

If you aren’t familiar with git and the basic commands (or version control concepts in general), I suggest reviewing documentation found on both Docs.Microsoft.com and Github. Understanding the basics will help you make sense of the rest of this walk-through as well as help you become a better developer for it.

Now we are going to clone the repository where my site (HTML) is stored.

git clone https://github.com/jasonhand/JasonHandCom.git


6. Deploy (HTML) Code

Next we are going to bring up the site by changing to the directory that was just cloned:

cd JasonHandCom

and running the command:

az webapp up --location centralus --name JasonHandCom

Note: The location of eastus1 was my choice. You can choose another option that makes more sense for your situation.

The name of the webapp (JasonHandCom) is also unique to me. You will name your app something else.

You should see a resource group being created as well as an app service plan while the contents of your site are deployed.

Once the action has completed, you’ll see the following:

Your site should be live now. You can view it at:

http://(your_app_service_name).azurewebsites.net

(In my case it is https://jasonhandcom/azurewebsites.net)

In my next post, we will configure the deployment options so that any time I push new code to the repository, Azure automatically deploys the changes to my live site.

Next in the series: Configure Auto Deployments