DEV Community

Cover image for A quick and beginner-friendly guide to deploying any HTML page to Azure App Service using only the CLI
Adesola Kehinde
Adesola Kehinde

Posted on

A quick and beginner-friendly guide to deploying any HTML page to Azure App Service using only the CLI

#azure #cli #webdev #beginners

The Complete Beginner's Guide to Kubernetes and Cloud Native Architecture

🚀 How I Deployed My First HTML File on Azure (in Minutes!)

Want to see your resume or project live on the internet? This tutorial is for you!

Let’s deploy an HTML file to Azure App Service — no prior cloud experience needed. It’s fun, fast, and free.

✅ Step 1: Prerequisites

Before we dive in, make sure you have the following:

✅ Azure CLI installed 👉 Install Azure CLI

✅ An active Azure Subscription 👉 Get free credits here

✅ Your HTML file (with any supporting assets)

🔐 Step 2: Login to Azure

Open your terminal (PowerShell, CMD, or Bash) and log in to Azure:

az login
Enter fullscreen mode Exit fullscreen mode

If you have multiple subscriptions, set the one you want to use:

az account set --subscription "Your-Subscription-Name"
Enter fullscreen mode Exit fullscreen mode

This helps avoid confusion if you’re managing more than one Azure account.

📌 Step 3: Create a Resource Group

A resource group helps organize your Azure resources like a folder.

az group create --name myResourceGroup --location southafricanorth
Enter fullscreen mode Exit fullscreen mode

💡 You can change myResourceGroup to any name you prefer. For example, if you’re working on a portfolio site, something like portfolioResources works well.

💡 The location southafricanorth can be changed to any supported Azure region closer to your audience, like eastus or westeurope.

Use this command to list available regions:

az account list-locations -o table
Enter fullscreen mode Exit fullscreen mode

🌐 Step 4: Create an App Service Plan

The App Service Plan defines what kind of infrastructure (CPU, memory, etc.) your app will run on. For this project, we’ll use the free tier:

az appservice plan create   --name myAppServicePlan   --resource-group myResourceGroup   --sku FREE
Enter fullscreen mode Exit fullscreen mode

💡 You can name your App Service Plan whatever you want — for instance, htmlAppPlan.

💡 --sku FREE gives you enough compute power to host a basic HTML site — ideal for personal portfolios or testing.

🚀 Step 5: Create the Web App

Now, create the actual Web App that Azure will host:

az webapp create   --name kubernetesNotes   --resource-group myResourceGroup   --plan myAppServicePlan
Enter fullscreen mode Exit fullscreen mode

📌 Your app name (kubernetesNotes) must be **globally unique* — Azure will use it to generate a public URL like:*

https://kubernetesNotes.azurewebsites.net
Enter fullscreen mode Exit fullscreen mode

💡 If you get a naming error, try something more specific, such as myUniqueResumeApp2025.

You can replace kubernetesNotes with your own project name.

📂 Step 6: Upload and Host Your HTML File

Here’s how to replace the default hosting page with your own HTML:

✨ Option: Use Azure’s Advanced Tools (Kudu)

  1. Go to the Azure Portal
  2. Navigate to: App Services → your app name (e.g., kubernetesNotes)Image description
  3. In the left-hand menu, scroll to Advanced Tools and click "Go >"Image description
  4. This opens the Kudu console in a new tab
  5. Click the top menu: Debug Console → CMD Image description

  6. In the file explorer, navigate to:

    site > wwwroot

  7. Edit the file hostingstart.htmlImage description

  8. Drag and drop your own HTML file (e.g., index.html) into the folder

  9. Open a new browser tab and go to:

https://kubernetesNotes.azurewebsites.net
Enter fullscreen mode Exit fullscreen mode

🎉 Your website is now LIVE!

🧠 Bonus: Want to Deploy via ZIP File Instead?

If you’re comfortable using the CLI, you can zip your HTML files and deploy them in one command:

zip -r resume.zip index.html assets/

az webapp deployment source config-zip   --resource-group myResourceGroup   --name kubernetesNotes   --src resume.zip
Enter fullscreen mode Exit fullscreen mode

📦 This is useful when you’re deploying multiple files or updating them frequently.

Again, feel free to replace resume.zip and kubernetesNotes with your own zip file name and app name.

💬 Wrapping Up

You just:

  • ✅ Logged into Azure
  • ✅ Created a resource group and hosting plan
  • ✅ Deployed a web app
  • ✅ Uploaded your own HTML and went live on the internet!

All using just the CLI and Azure’s built-in tools — no servers, no frameworks, no stress. 👏

Now your resume, landing page, or mini project has a permanent home!

Top comments (0)