Deploy Your Resume to Azure App Service
Deploy a responsive HTML/CSS resume website to a live Azure App Service URL.
Introduction
30 Second Summary
Your resume lives as a file on your computer, but what if it were a live website anyone could visit from a single link? Deploying a personal site to the cloud is one of the most practical skills you can build.
In this project, you will build a professional resume website with HTML and CSS, then deploy it to Azure App Service so it's accessible at a public URL.
What You'll Build
A responsive resume website deployed to Azure App Service, live on the internet at a URL anyone can visit.
By the end of this project, you'll have:
- A professional resume website built with HTML and CSS that showcases your experience, skills, and contact information.
- An Azure App Service resource running on the Free (F1) tier, created and managed through the Azure CLI.
- A live public URL at <your-app-name>.azurewebsites.net that anyone on the internet can visit.
- Secret Mission: Add a downloadable PDF version of your resume and a dark mode toggle to your site.
Are there any prerequisites?
No prior experience is needed. This project includes full setup instructions for every tool you'll use, including the Azure CLI and a free Azure account.
Set Up Your Tools
To deploy your resume to the cloud, you need a way to talk to Azure from your terminal. The Azure CLI is a command-line tool that lets you create and manage Azure resources without clicking through the portal.
In this step, you will install the Azure CLI, sign in to your Azure account, and create a project folder to hold your resume files.
In this step, get ready to:
- Install the Azure CLI and sign in to Azure.
- Create an Azure free account (if you do not have one).
- Set up your project folder and open it in your text editor.
Install the Azure CLI
The Azure CLI is how you will create cloud resources and deploy your website in later steps. First, you need to install it on your machine.
macOS
- Open your terminal by pressing Cmd+Space and typing Terminal, then pressing Enter.
- Install the Azure CLI by running this command:
brew update && brew install azure-cliWhat does this command do?
`brew update` refreshes Homebrew's list of available packages so you get the latest version. `brew install azure-cli` downloads and installs the Azure CLI on your Mac.
Homebrew not installed?
If you see a "command not found" error for brew, you need to install Homebrew first. Visit https://brew.sh and follow the one-line install command on that page.
Windows
- Open PowerShell by pressing the Windows key, typing PowerShell, and pressing Enter.
- Install the Azure CLI using WinGet by running this command:
winget install --exact --id Microsoft.AzureCLIWhat does this command do?
WinGet is Windows' built-in package manager. The --exact flag ensures you get the official Azure CLI package. After the install finishes, close and reopen your PowerShell window so it can find the new az command.
- Close and reopen your PowerShell window after the installation completes.
- Verify the installation by running this command:
az version✔️ I see a version number
You should see JSON output showing your Azure CLI version. The Azure CLI is installed and ready to go.
ⓧ Command not found
If you see a "command not found" error, the installation did not complete successfully.
- On macOS, try running brew update && brew install azure-cli again.
- On Windows, close your terminal completely and open a new one. WinGet installs require a fresh terminal session.
- If the issue persists, visit the official Azure CLI install guide for alternative installation methods.
help me troubleshoot my Azure CLI installation
- Sign in to your Azure account by running:
az loginWhat happens when you run this?
Running az login opens your default web browser and asks you to sign in with your Microsoft account. After you sign in, the browser page confirms the login and your terminal displays your subscription details.
You should see JSON output in your terminal listing your Azure subscription name and ID. This confirms you are signed in.
Browser did not open?
If the browser did not open automatically, look in your terminal output for a URL and a device code. Copy the URL into your browser manually and enter the code to complete the sign-in.
help me sign in to the Azure CLI
Create an Azure free account
If you already have an Azure account, skip ahead to the next substep. If you do not have one yet, you can create a free account that includes $200 in credits for 30 days and 12 months of free services.
- Open https://azure.microsoft.com/free in your browser.
- Click Start free.
- Sign in with your Microsoft account (or create one).
- Follow the prompts to complete the sign-up process. You will need to provide a phone number and a credit card for identity verification, but you will not be charged.
Why do I need a credit card?
Azure uses it for identity verification only. You will not be charged unless you manually upgrade to a paid plan. This project uses the Free (F1) tier, which costs nothing.
- Once your account is created, return to your terminal and run az login again if you were not already signed in.
Set up your project folder
You need a dedicated folder to hold your resume's HTML and CSS files. Creating it on your Desktop makes it easy to find later.
- Move to your Desktop by running this command:
cd ~/Desktop- Create your project folder and move into it by running these commands:
mkdir resume-site
cd resume-site- Confirm the folder was created by running:
pwdYou should see a path ending in resume-site, confirming you are inside your new project folder.
- Open the resume-site folder in VS Code (or your preferred text editor).
- Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
- Type VS Code and press Enter to open it.
- In VS Code, click File in the top menu bar.
- Click Open Folder.
- Navigate to your Desktop and select the resume-site folder, then click Open.
Don't see the folder?
Make sure you ran the mkdir resume-site command while you were on the Desktop. If you are unsure, open Finder (macOS) or File Explorer (Windows) and check your Desktop for a folder called resume-site.
help me find my project folder
Your tools are ready and your project folder is open. Next up, you will build the HTML and CSS for your resume website.
Build Your Resume Website
Your tools are ready and your project folder is open. Now it is time to build the actual resume website that you will deploy to Azure.
You will create two files: an HTML file for the resume content and structure, and a CSS file to make it look polished and professional.
In this step, get ready to:
- Create the HTML structure for your resume with sections for your name, experience, skills, and education.
- Style the resume with modern CSS for a clean, responsive layout.
- Preview your resume locally in a browser to confirm it looks good.
Create the HTML structure
HTML defines the content and structure of a web page. Your resume needs sections for your header, professional summary, work experience, skills, and education.
- In the VS Code Explorer sidebar, right-click inside your project folder.
- Select New File.
- Name the file index.html and press Enter.
- Copy the following code into index.html to build the document structure and header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Resume</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>Your Name</h1>
<p class="subtitle">Your Job Title</p>
<div class="contact-info">
<span>your.email@example.com</span>
<span>|</span>
<span>City, State</span>
<span>|</span>
<span>linkedin.com/in/yourname</span>
</div>
</header>What does this code do?
The head section sets up the page metadata and links your stylesheet. The body starts with a container div that centers and constrains the page width.
The header element holds your name, job title, and contact details. Each contact item uses a span so they display inline, separated by pipe characters.
- Below the closing </header> tag, add the resume content sections:
<section class="section">
<h2>Professional Summary</h2>
<p>A brief 2-3 sentence summary of your professional background, key strengths, and career goals. Tailor this to the type of role you are seeking.</p>
</section>
<section class="section">
<h2>Work Experience</h2>
<div class="experience-item">
<div class="experience-header">
<h3>Job Title</h3>
<span class="date">Jan 2023 - Present</span>
</div>
<p class="company">Company Name - City, State</p>
<ul>
<li>Accomplishment or responsibility demonstrating impact and skills</li>
<li>Another key achievement with measurable results where possible</li>
<li>Third bullet point highlighting relevant experience</li>
</ul>
</div>
<div class="experience-item">
<div class="experience-header">
<h3>Previous Job Title</h3>
<span class="date">Jun 2021 - Dec 2022</span>
</div>
<p class="company">Previous Company - City, State</p>
<ul>
<li>Key responsibility or accomplishment from this role</li>
<li>Another achievement demonstrating your growth and skills</li>
</ul>
</div>
</section>
<section class="section">
<h2>Skills</h2>
<div class="skills-grid">
<span class="skill-tag">Skill One</span>
<span class="skill-tag">Skill Two</span>
<span class="skill-tag">Skill Three</span>
<span class="skill-tag">Skill Four</span>
<span class="skill-tag">Skill Five</span>
<span class="skill-tag">Skill Six</span>
<span class="skill-tag">Skill Seven</span>
<span class="skill-tag">Skill Eight</span>
</div>
</section>
<section class="section">
<h2>Education</h2>
<div class="experience-item">
<div class="experience-header">
<h3>Degree Name</h3>
<span class="date">Graduation Year</span>
</div>
<p class="company">University Name - City, State</p>
</div>
</section>
</div>
</body>
</html>What does this code do?
Each section uses the class section for consistent styling. The Work Experience section contains two experience-item blocks, each with a flex-based header that places the job title and dates side by side.
The Skills section uses a skills-grid container with individual skill-tag spans that will wrap into rows. Replace the placeholder text with your own details later.
- Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
Customize the placeholder content
The template uses generic text like "Your Name" and "Skill One". Feel free to replace these with your real information now or after deploying. Either way works.
✔️ Awesome, I've got everything!
Great. Make sure you have saved your file before moving on to the stylesheet.
ⓧ I'd like to double check the full code
Here is the complete index.html file. Make sure yours matches:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Resume</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>Your Name</h1>
<p class="subtitle">Your Job Title</p>
<div class="contact-info">
<span>your.email@example.com</span>
<span>|</span>
<span>City, State</span>
<span>|</span>
<span>linkedin.com/in/yourname</span>
</div>
</header>
<section class="section">
<h2>Professional Summary</h2>
<p>A brief 2-3 sentence summary of your professional background, key strengths, and career goals. Tailor this to the type of role you are seeking.</p>
</section>
<section class="section">
<h2>Work Experience</h2>
<div class="experience-item">
<div class="experience-header">
<h3>Job Title</h3>
<span class="date">Jan 2023 - Present</span>
</div>
<p class="company">Company Name - City, State</p>
<ul>
<li>Accomplishment or responsibility demonstrating impact and skills</li>
<li>Another key achievement with measurable results where possible</li>
<li>Third bullet point highlighting relevant experience</li>
</ul>
</div>
<div class="experience-item">
<div class="experience-header">
<h3>Previous Job Title</h3>
<span class="date">Jun 2021 - Dec 2022</span>
</div>
<p class="company">Previous Company - City, State</p>
<ul>
<li>Key responsibility or accomplishment from this role</li>
<li>Another achievement demonstrating your growth and skills</li>
</ul>
</div>
</section>
<section class="section">
<h2>Skills</h2>
<div class="skills-grid">
<span class="skill-tag">Skill One</span>
<span class="skill-tag">Skill Two</span>
<span class="skill-tag">Skill Three</span>
<span class="skill-tag">Skill Four</span>
<span class="skill-tag">Skill Five</span>
<span class="skill-tag">Skill Six</span>
<span class="skill-tag">Skill Seven</span>
<span class="skill-tag">Skill Eight</span>
</div>
</section>
<section class="section">
<h2>Education</h2>
<div class="experience-item">
<div class="experience-header">
<h3>Degree Name</h3>
<span class="date">Graduation Year</span>
</div>
<p class="company">University Name - City, State</p>
</div>
</section>
</div>
</body>
</html>Style your resume with CSS
Without styling, your HTML will render as plain text with default browser formatting. CSS gives your resume its professional, polished appearance.
- In the VS Code Explorer sidebar, right-click inside your project folder.
- Select New File.
- Name the file style.css and press Enter.
- Copy the following code into style.css to set up the page layout and header styles:
/* Reset default browser margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Page background and base typography */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
padding: 2rem;
}
/* Centered card container for the resume */
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 3rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Header area with name and contact info */
.header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid #2563eb;
}
.header h1 {
font-size: 2.2rem;
color: #1a1a1a;
margin-bottom: 0.3rem;
}
.subtitle {
font-size: 1.2rem;
color: #555;
margin-bottom: 0.8rem;
}
/* Flexbox row for contact details */
.contact-info {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.9rem;
color: #666;
}What does this code do?
The * reset removes default browser spacing so your layout starts from a clean slate. The body sets a system font stack that looks native on every operating system.
The .container class creates a centered white card with a subtle shadow. The .contact-info uses Flexbox to arrange contact items in a horizontal row that wraps on small screens.
- Below the .contact-info block, add the styles for the content sections, experience items, skills grid, and responsive layout:
/* Resume sections with consistent spacing */
.section {
margin-bottom: 2rem;
}
/* Section headings styled as uppercase labels */
.section h2 {
font-size: 1.3rem;
color: #2563eb;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid #e5e7eb;
}
/* Individual job or education entry */
.experience-item {
margin-bottom: 1.5rem;
}
/* Job title and date on one line */
.experience-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
.experience-header h3 {
font-size: 1.1rem;
color: #1a1a1a;
}
.date {
font-size: 0.9rem;
color: #666;
}
.company {
font-size: 0.95rem;
color: #555;
margin-bottom: 0.5rem;
}
.experience-item ul {
list-style-position: inside;
padding-left: 0.5rem;
}
.experience-item li {
margin-bottom: 0.3rem;
font-size: 0.95rem;
}
/* Wrapping grid of skill tags */
.skills-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.skill-tag {
background-color: #eff6ff;
color: #2563eb;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-size: 0.9rem;
}
/* Stack layout on small screens */
@media (max-width: 600px) {
body {
padding: 1rem;
}
.container {
padding: 1.5rem;
}
.header h1 {
font-size: 1.8rem;
}
.experience-header {
flex-direction: column;
}
}What does this code do?
The .experience-header uses Flexbox to place the job title and date on the same line, with space-between pushing them to opposite edges.
The .skills-grid creates a wrapping row of styled tags. The @media query at the bottom switches the layout to a single-column stack on screens narrower than 600px, making your resume mobile-friendly.
- Save style.css by pressing Cmd+S (macOS) or Ctrl+S (Windows).
Not seeing two files in your folder?
Make sure both index.html and style.css are in the same folder. If they are in different folders, the HTML file will not find the stylesheet.
Check the VS Code Explorer sidebar. Both files should appear at the same level with no nested folders between them.
Help me figure out why my CSS file is not linking correctly.
✔️ Awesome, I've got everything!
Great. Make sure you have saved your file before previewing.
ⓧ I'd like to double check the full code
Here is the complete style.css file. Make sure yours matches:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
padding: 2rem;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 3rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid #2563eb;
}
.header h1 {
font-size: 2.2rem;
color: #1a1a1a;
margin-bottom: 0.3rem;
}
.subtitle {
font-size: 1.2rem;
color: #555;
margin-bottom: 0.8rem;
}
.contact-info {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.9rem;
color: #666;
}
.section {
margin-bottom: 2rem;
}
.section h2 {
font-size: 1.3rem;
color: #2563eb;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid #e5e7eb;
}
.experience-item {
margin-bottom: 1.5rem;
}
.experience-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
.experience-header h3 {
font-size: 1.1rem;
color: #1a1a1a;
}
.date {
font-size: 0.9rem;
color: #666;
}
.company {
font-size: 0.95rem;
color: #555;
margin-bottom: 0.5rem;
}
.experience-item ul {
list-style-position: inside;
padding-left: 0.5rem;
}
.experience-item li {
margin-bottom: 0.3rem;
font-size: 0.95rem;
}
.skills-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.skill-tag {
background-color: #eff6ff;
color: #2563eb;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-size: 0.9rem;
}
@media (max-width: 600px) {
body {
padding: 1rem;
}
.container {
padding: 1.5rem;
}
.header h1 {
font-size: 1.8rem;
}
.experience-header {
flex-direction: column;
}
}Preview your resume in the browser
Before deploying to Azure, you should check that your resume renders correctly on your own machine. Opening the HTML file directly in a browser is the fastest way to verify.
- Open Finder (macOS) or File Explorer (Windows) and navigate to your project folder.
- Double-click index.html to open it in your default browser.
You should see a centered white card on a light gray background. Your name appears at the top in large text with a blue underline, followed by sections for Summary, Experience, Skills (as colored tags), and Education.
What should I see?
Your resume should look like a polished document with blue accent colors, clear section headings, and skill tags displayed as rounded pills. If you see plain unstyled text, the browser could not find style.css. Make sure both files are in the same folder.
Seeing unstyled plain text?
Confirm that style.css is in the exact same folder as index.html. The link tag in your HTML references style.css by filename only, so they must be side by side.
Also check for typos in the filename. The file must be named exactly style.css (not styles.css or Style.css).
Help me debug why my CSS is not showing up in the browser.
Your resume website is built and looking sharp. Next up, you will create the Azure cloud resources needed to host it on the internet.
Create Your Azure App Service
Your resume looks great locally. Now it is time to set up the cloud infrastructure that will host it on the internet.
In this step, you will use the Azure CLI to create three resources: a Resource Group to organize everything, an App Service Plan to define the hosting tier, and a Web App to actually serve your site.
In this step, get ready to:
- Create a Resource Group to hold your Azure resources.
- Create an App Service Plan on the Free (F1) tier.
- Create a Web App with a public URL for your resume.
Create a Resource Group
A Resource Group is a logical container that holds related Azure resources together. It makes it easy to manage and delete everything at once when you are done.
- Create a new Resource Group by running this command in your terminal:
az group create --name resume-site-rg --location eastusWhat does this command do?
- az group create tells the Azure CLI to create a new Resource Group.
- --name resume-site-rg sets the name of your group. All your project resources will live inside it.
- --location eastus picks the East US datacenter region to host your resources.
- Look at the JSON output in your terminal. You should see "provisioningState": "Succeeded" confirming the group was created.
Seeing an authorization error?
Make sure you are signed in to the Azure CLI. Run az login to re-authenticate, then try the command again.
If your free account was just created, wait a minute for permissions to propagate, then retry.
help me fix an authorization error when running az group create
Create an App Service Plan
An App Service Plan defines the compute resources (CPU, memory, pricing tier) that your web app runs on. The Free F1 tier costs nothing, which is perfect for a personal resume site.
- Create a Free tier App Service Plan by running this command:
az appservice plan create --name resume-plan --resource-group resume-site-rg --sku F1 --is-linuxWhat does this command do?
- --name resume-plan names your plan so you can reference it later when creating the web app.
- --resource-group resume-site-rg places the plan inside the Resource Group you just created.
- --sku F1 selects the Free tier. No charges will appear on your account.
- --is-linux tells Azure to use a Linux host, which is what we need to serve static files with Node.js.
- Check the JSON output. You should see your plan name and "provisioningState": "Succeeded" in the response.
Getting a 'resource group not found' error?
Double check that the --resource-group value matches the exact name you used in the previous command: resume-site-rg. Names are case-sensitive.
help me fix a resource group not found error in Azure CLI
Create the Web App
The Web App is the actual resource that will serve your resume to the internet. Each web app gets a unique public URL at <your-app-name>.azurewebsites.net.
How do I choose my app name?
Your app name must be globally unique across all of Azure. It can contain only alphanumeric characters and hyphens, cannot start or end with a hyphen, and must be less than 64 characters.
A good pattern is your name followed by a keyword, like jane-resume or alex-portfolio-2026.
- Create your Web App by running this command (replace the app name with your own unique name):
az webapp create --resource-group resume-site-rg --plan resume-plan --name [[APPNAME="your-unique-app-name"]] --runtime "NODE:20-lts"What does this command do?
- --plan resume-plan attaches your web app to the Free tier plan you just created.
- --name sets your globally unique app name. This becomes part of your public URL.
- --runtime "NODE:20-lts" tells Azure to use a Node.js 20 LTS environment. This is needed to serve static HTML on a Linux App Service.
Why Node.js for a static HTML site?
Azure App Service on Linux needs a runtime to serve files. By choosing Node.js, you can use the pm2 process manager (built into Node images) to serve your static HTML and CSS. You will configure this in the next step.
- Check the JSON output for "state": "Running" and a "defaultHostName" field showing your URL.
Name already taken?
If you see an error saying the name is already in use, pick a more unique name. Try adding numbers or extra words to make it distinct.
help me pick a unique Azure web app name that isn't taken
Your cloud infrastructure is ready. Next up, you will deploy your resume files to this Web App and see your site live on the internet.
Deploy Your Resume to Azure
Your Azure infrastructure is ready. You have a Resource Group, an App Service Plan, and a Web App all waiting for content.
Now it is time to push your resume files to the cloud. You will package your HTML and CSS into a zip archive, upload it to Azure, and configure the app to serve your static files.
In this step, get ready to:
- Package your project files into a zip archive.
- Deploy the zip to Azure App Service.
- Configure the startup command so Azure serves your static site.
Zip your project files
Azure App Service accepts zip archives for deployment. You need to bundle your index.html and style.css into a single file that the CLI can upload.
- Make sure your terminal is in your project folder (the folder containing index.html and style.css).
- Create a zip archive of your project files by running this command:
zip -r resume.zip .What does this command do?
The zip -r command creates a compressed archive. The -r flag means recursive, so it includes all files in the current directory.
The . at the end tells zip to include everything in the current folder. The result is a resume.zip file containing your index.html and style.css.
- Confirm the zip file was created by running:
ls- You should see resume.zip listed alongside index.html and style.css.
Don't see resume.zip?
Make sure you are in the correct folder. Run pwd to check your current directory. It should be the folder that contains index.html and style.css.
If you get a "command not found" error, the zip utility may not be installed. On macOS it comes pre-installed. Help me fix the zip command not being found.
Deploy with Azure CLI
With your zip file ready, you can push it to Azure App Service in a single command. The CLI uploads the archive and unpacks it to your app's file system at /home/site/wwwroot.
- Deploy your zip file to Azure by running this command:
az webapp deploy --resource-group resume-site-rg --name [[APPNAME="your-unique-app-name"]] --src-path resume.zip --type zipWhat does this command do?
- The --resource-group and --name flags tell Azure which web app to deploy to.
- The --src-path resume.zip points to the zip file you just created.
- The --type zip tells Azure to unpack the contents into your app's web root directory.
- Azure restarts the app automatically after deployment completes.
This command may take 30-60 seconds to complete. Wait until your terminal shows the JSON output confirming the deployment.
Seeing a deployment error?
Double check that the --name value matches the exact app name you created in the previous step. App names are case-sensitive.
If you see a timeout error, try running the command again. The Free tier can be slow to respond on first deployment.
Help me troubleshoot my Azure deployment error.
Set the startup command
Your files are on Azure, but the app does not know how to serve static HTML yet. Linux App Service uses a Node.js runtime, so you need to tell it to serve your files using pm2 (a process manager included in the container).
- Configure the startup command by running:
az webapp config set --resource-group resume-site-rg --name [[APPNAME="your-unique-app-name"]] --startup-file "pm2 serve /home/site/wwwroot --no-daemon --spa"Why do you need a startup command?
By default, a Node.js App Service looks for a package.json or a main entry point to start your app. Since you are serving plain HTML and CSS (no Node.js application), you need to explicitly tell the container to act as a static file server.
The pm2 serve /home/site/wwwroot --no-daemon --spa command tells pm2 to serve all files from the deployment directory. The --no-daemon flag keeps the process in the foreground so App Service can monitor it. The --spa flag ensures all routes fall back to index.html.
- Wait for the command to return JSON output confirming the configuration was applied.
Command returned an error?
Make sure the --startup-file value is wrapped in quotes. The entire pm2 command is a single string argument.
Verify your app name matches exactly. You can run az webapp list --resource-group resume-site-rg --output table to check.
Help me fix the startup command configuration.
Your resume is now deployed to Azure. Next up, you will visit your live URL and practice updating your site.
Verify and Update Your Live Site
Your resume is deployed and Azure is serving it to the world. Now it's time to see the result with your own eyes.
Being able to quickly edit and redeploy is a core cloud workflow. In this step, you'll visit your live URL and practice pushing an update to your site.
In this step, get ready to:
- Visit your live resume at its public Azure URL.
- Make a content change and redeploy to practice the update workflow.
Visit your live site
Your resume is live on the internet right now. Anyone with the URL can see it.
- Open your web browser (Chrome, Firefox, Safari, or Edge).
- In the address bar, navigate to your site's URL:
https://[[APPNAME="your-unique-app-name"]].azurewebsites.net- You should see your resume displayed with the header, professional summary, work experience, skills, and education sections all styled with the blue accent color and clean layout.
What is a cold start?
On the Free (F1) tier, your app may experience a slight delay on the first visit after a period of inactivity. This is called a cold start. Azure stops the app after extended idle time to save resources, then restarts it when the next request arrives.
If your page takes a few seconds to load the first time, just wait. Subsequent visits will load much faster.
Seeing a default Azure page or an error?
- Double-check that the URL matches the app name you chose exactly. The format is https://<your-app-name>.azurewebsites.net.
- Make sure the startup command was set correctly in the previous step. You can re-run the az webapp config set command from Step 4.
- Wait 1-2 minutes after deploying. The Free tier can take a moment to start up.
My resume site isn't loading. Help me troubleshoot what might be wrong with my Azure App Service deployment.
Make an update and redeploy
A live site is never truly finished. Practicing the edit-and-redeploy cycle now means you can confidently push changes whenever you need to.
- Switch back to VS Code where your project is open.
- Open index.html.
- Make a visible change to your resume content. For example, find the skills-grid section and add a new skill tag:
<span class="skill-tag">Cloud Computing</span>What should I change?
You can make any change you like. Add a skill tag, update your Professional Summary text, or change a job title. The goal is to make a change that you'll be able to spot on the live site after redeploying.
- Save index.html.
- Remove the old zip and create a fresh one by running these commands in your terminal:
rm resume.zip
zip -r resume.zip .Why remove the old zip first?
The zip command updates an existing archive rather than replacing it. Removing the old file first guarantees you get a clean zip with only your current index.html and style.css.
- Redeploy your updated zip to Azure by running:
az webapp deploy --resource-group resume-site-rg --name [[APPNAME="your-unique-app-name"]] --src-path resume.zip --type zipWhat does this command do?
This is the same deploy command you ran in the previous step. It pushes your updated resume.zip to Azure App Service, which extracts the files and serves them immediately. No server restart needed.
- Wait for the command to complete. You should see a JSON response in your terminal confirming the deployment succeeded.
- Switch back to your browser and refresh your site at https://<your-app-name>.azurewebsites.net.
- You should see your change reflected on the live site (for example, the new skill tag appearing in the skills grid).
Don't see your changes?
- Try a hard refresh in your browser: Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows). Your browser may be showing a cached version.
- Confirm you saved index.html before re-zipping. Unsaved changes won't be included in the zip.
- Make sure you ran rm resume.zip before creating the new zip. Otherwise the old archive may have been reused.
I redeployed my site but my changes are not showing. Help me figure out why.
Secret mission
Add a PDF Download Button and Dark Mode Toggle
Your resume site is live, but what if a recruiter wants to save a copy? And what about visitors who prefer a darker interface? In this secret mission, you will add a downloadable PDF button and a fully functional dark mode toggle that remembers the visitor's preference.
Clean Up Your Resources
Clean Up Your Resources
Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project uses the Azure App Service Free (F1) tier, so there are no ongoing costs for keeping your site live.
Resources you used:
- Azure Resource Group (resume-site-rg) containing your App Service Plan and Web App.
- Local project files (index.html, style.css, resume.pdf, resume.zip).
Keep everything running
No action needed. Choose this if you are still actively building or want your resume to stay live.
- Your resume site stays accessible at its .azurewebsites.net URL.
- The Free (F1) tier costs nothing, so your site can remain live indefinitely.
- Free tier apps may experience cold starts (a slight delay on the first visit after a period of inactivity).
Pause - I'll come back to this later
There is nothing to pause for this project. The Free (F1) tier has no cost whether your app is running or idle.
- Your Azure resources will not generate any charges.
- Your local project files remain on your Desktop for when you return.
Delete - I don't want to use this again
Remove all project resources and start fresh. This deletes your live resume site and all associated Azure resources permanently.
- Delete all Azure resources (Resource Group, App Service Plan, and Web App) by running this command in your terminal:
az group delete --name resume-site-rg --yes --no-waitWhat does this command do?
Deleting the Resource Group automatically deletes everything inside it, including the App Service Plan and Web App. The --no-wait flag lets the command return immediately while Azure handles the deletion in the background.
- Delete your local project folder by running this command (macOS/Linux):
rm -rf ~/Desktop/resume-site- On Windows, run this instead:
rmdir /s /q %USERPROFILE%\Desktop\resume-siteIf your project folder has a different name, replace resume-site with the actual folder name you used.
Nice Work!
Nice Work!
Nice work! You just built a professional resume website and deployed it to the cloud. Your resume is now live at a public URL that anyone can visit.
You learned how to:
- Built a responsive resume website with HTML and CSS, then deployed it to a live public URL.
- Created and managed Azure cloud resources (Resource Group, App Service Plan, and Web App) using the Azure CLI.
- Practiced the full deployment workflow by packaging your files into a zip and pushing them to Azure App Service.
- Added a PDF download button and a dark mode toggle with localStorage persistence to your resume site.
Ready to quiz yourself?