Hands-On LabBeginnerFree

Deploy Your First Website to Azure with Static Web Apps

Customize and deploy a personal portfolio website to Azure Static Web Apps using the Azure CLI

Browse all labs
90 minEstimated time
4Guided steps
AutoVerification
IsolatedSandbox
Deploy Your First Website to Azure with Static Web Apps

Lab overview

Azure Static Web Apps is Microsoft's purpose-built service for hosting static websites. It provides a global CDN, free SSL certificates, custom domains, and built-in authentication — all on the Free tier at $0/month. With a couple of Azure CLI commands, you can go from HTML files on your machine to a live website distributed globally.

In this lab, you will customize a pre-loaded HTML/CSS portfolio website template in the Code-IDE, create an Azure Static Web App resource using the Azure CLI, deploy your site using the SWA CLI with a deployment token, and visit your live site at its public URL. You will then make changes and redeploy to experience the iterative development-to-deployment workflow. By the end, you will understand how Azure Static Web Apps delivers your content through a global CDN with zero server configuration.

Objectives

Upon completing this beginner level lab, you will be able to:

  • Edit an HTML/CSS portfolio website template to personalize it with your own content
  • Create an Azure Static Web App resource using the Azure CLI
  • Deploy a static website using the SWA CLI and a deployment token
  • Visit a live site at its public URL and verify the deployment
  • Make changes and redeploy to understand the iterative development-to-deployment workflow
  • Understand what Azure Static Web Apps provides — global CDN, free SSL, and managed hosting with zero server configuration

Who is this lab for?

This lab is designed for:

  • Complete beginners with no prior cloud or coding experience who want their first hands-on Azure experience
  • University students looking to understand cloud computing through a practical, tangible project
  • Career changers exploring cloud engineering who want to see Azure in action before committing to deeper study

No prerequisites beyond being able to use a web browser and a text editor.

Verified against your live environment

An automated validation engine inspects your actual resources and configurations as you work. Completion means the task was performed — not multiple choice, real-world proficiency.

[CHECK] validation_activelive
Inspecting deployed resources...
Verifying configuration state...
✓ Step requirements satisfied

More labs like this

1 hour

Deploy Azure Container Apps with Terraform

Use Terraform to define and deploy an Azure Container App with ingress, secrets, environment variables, and scaling rules.

1 hour

Creating a Web App on Azure App Service using Azure Portal

Learn how to create, configure, and deploy a web application using Azure App Service through the Azure Portal's interface.

1 hour

Securing Azure Web Apps with Managed Identity and Key Vault

Store application secrets in Azure Key Vault and configure Managed Identity to securely retrieve them from App Service without exposing credentials.

Related reading

Azure Compute Services Compared — VMs vs. App Service vs. Functions vs. Container AppsA practical comparison of Azure VMs, App Service, Functions, and Container Apps — what each does, what it costs, and when to use it.Azure AI Services Explained: A Beginner's Map to Vision, Speech, Language, and OpenAIA beginner's map to Azure AI Services. What Vision, Speech, Language, Content Safety, and Azure OpenAI each do, when to use them, and a week-by-week path with hands-on labs to start building today.How to Configure Private Network Access for Your Azure Web ApplicationsConfigure private endpoints and VNet integration for Azure Web Apps to secure your applications from public internet access and comply with enterprise security requirements.
FreeNo credit card required
Duration
90 min
Steps
4

Environment

Browser Code IDELive Cloud Environment

Every lab includes

  • Real environment, pre-credentialed
  • Automated checks on every step
  • Isolated sandbox, auto cleanup
  • AI-recommended next steps

Lab curriculum

  1. 01

    Logging into Azure CLI

  2. 02

    Explore and Customize the Portfolio Template

  3. 03

    Create a Static Web App and Deploy Your Site

    1 automated check

  4. 04

    Make Changes and Redeploy to See the Update Go Live

    2 automated checks

Skills validated

Azure CLIAzure Static Web App

Not the lab you were looking for?

Browse 150+ hands-on labs across AWS, Azure, Kubernetes, Docker, and cloud security.

Explore the catalog