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.
- Login to Azure
- Launch CloudShell
- Mount (or Create) Persistent Storage
- Install Azure Web App Extension for CloudShell
- Clone Repository
- Deploy (HTML) Code
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:
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
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:
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:
(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