Deploy a static site to Azure App Service

This project focuses on deploying a static website to Azure App Service. Azure App Service is a fully managed platform-as-a-service (PaaS) offering that allows you to quickly build, deploy, and scale web apps without worrying about server infrastructure.

Why is it useful?

• Scalability: Automatically scale your site based on demand.

• Cost-effective: Azure App Service provides a free tier that allows you to host your site at zero cost.

• Simplicity: You upload your static files and let Azure handle the rest.

• Azure Account (Free Tier) Sign up at https://azure.microsoft.com/free. Make sure you choose the free tier to avoid charges.

• Azure CLI Installed Install from https://docs.microsoft.com/cli/azure/install-azure-cli. Confirm it’s working: az version.

• Azure Subscription Permissions You should have at least Contributor or Owner rights.

• Static Website Files HTML, CSS, JavaScript, and possibly images. Ready to be deployed in a folder. Example: index.html, styles.css, etc.

• App Service Plan For the free tier, select F1 (Free) or D1 (Shared) during creation.

Each sub-step below combinesConsole (GUI) and Terminal (CLI) instructions.

Create a Resource Group

Purpose: A Resource Group is a logical container for your Azure resources.

Console (GUI) & Terminal (CLI) Steps

In the Portal Go to Azure Portal. Click Resource groups on the left sidebar. Click + Create. Fill in: Subscription: Your free tier subscription. Resource group: e.g. StaticSiteRG. Region: e.g. East US. Click Review + Create, then Create. Screenshot: Take a screenshot just before clicking Create, showing your resource group details.

In the Terminal

Purpose: An App Service Plan defines the underlying compute resources; the Web App is the site you’ll deploy to.

Console (GUI) & Terminal (CLI) Steps

In the Portal Navigate to App Services on the left menu. Click + Create → Web App. Basics: Subscription: Same free tier subscription. Resource Group: StaticSiteRG. Name: e.g. my-static-site-123 (must be globally unique). Publish: Choose Code (since this is a static site). Runtime stack: Static site doesn’t need a runtime; you can pick any or “.NET 6” (the choice won’t matter much for purely static content). Region: East US (or same region used before). App Service Plan: Choose Create new or use an existing plan. Name: e.g. MyFreePlan. Click Change size → select Dev/Test → choose F1 (Free). Click Review + Create, then Create. Screenshot: Right before clicking Create, capture the final summary page listing your Web App name, plan, region, etc.

In the Terminal

# 1) Create an App Service Plan (Free tier)

Explanation:

• az appservice plan create: Creates a plan named MyFreePlan on the FREE tier.

• az webapp create: Creates a new Web App named my-static-site-123 under that plan.

Purpose: Upload your static files (HTML, CSS, JS) to the newly created Web App.

Console (GUI) & Terminal (CLI) Steps

In the Portal Go to App Services → select your app my-static-site-123. On the left pane, look for Deployment Center (or Deployment → Deployment Center). Choose Manual Deployment or Local Git or GitHub Actions (if you have a repo). The simplest for small static sites is Zip Deploy. Click the Zip Deploy or Upload option (depending on the interface). Upload a .zip file containing your site’s files (index.html, styles.css, etc.).

In the Terminal Option A: ZIP Deploy using Azure CLI

Build a ZIP of your static files

Explanation:

• We create a ZIP of all files in the current directory.

• az webapp deploy: Deploys that ZIP to the specified Web App.

Option B: Local Git (only if you prefer Git push):

Enable local Git

Explanation:

• az webapp deployment source config-local-git: Enables local Git deployment on your Web App.

• git push azure main: Pushes your local repository to Azure, which triggers an automatic deploy.

Purpose: Confirm the deployment is successful and your static site is live.

Console (GUI) & Terminal (CLI) Steps

In the Portal Go to your Web App’s Overview blade. You’ll see a URL field (e.g. https://my-static-site-123.azurewebsites.net). Click that URL to open your deployed site in a new browser tab.

In the Terminal

Query your app's default URL

Explanation:

• az webapp show retrieves details about the Web App.

• --query defaultHostName filters to show only the domain.

• --output tsv outputs it in plain text.

• Open the URL in your browser. If the homepage (index.html) displays, your deployment succeeded.

• Check Logs: In the Portal, under Monitoring or App Service logs, you can see if the deployment or runtime had issues.

• CLI Validation: Run az webapp browse --name my-static-site-123 --resource-group StaticSiteRG to open your site from the CLI.