Deploy Your First Website to Azure

Deploy a personal portfolio site to Azure App Service using the CLI.

Introduction

30 Second Summary

Every developer eventually faces the same question: how do I get my website from my laptop onto the internet? Cloud platforms like Azure make it possible to share your work with anyone in the world through a single URL.

In this project, you will build a personal portfolio website and deploy it to Azure App Service. You will use the Azure CLI to push your code to the cloud, then explore the Azure Portal to understand how Azure organizes your resources behind the scenes.

What You'll Build

Picture yourself sending a friend a link and watching them load your personal portfolio page, live on the internet, hosted entirely on Azure.

By the end of this project, you'll have:

  • A live website at a public .azurewebsites.net URL that loads your personal portfolio page.
  • A resource group, App Service plan, and web app visible in the Azure Portal, showing you the structure that organizes every Azure service.
  • A working Azure CLI on your machine, authenticated and ready to deploy to Azure from your terminal in future projects.
  • Secret Mission: Stream real-time server logs and configure an App Setting through the CLI.

Do I need any prior experience?

No cloud experience is needed. You will create your Azure free account and install the Azure CLI as part of the project.

Before We Start

Before we dive in, let's get clear on what you're about to build and why it matters.

Set Up Your Azure Account and CLI

To deploy anything to the cloud, you need two things: an Azure account to create cloud resources and a command-line tool to push your code up from your machine.

In this step, you'll create a free Azure account loaded with $200 in credits, install the Azure CLI, and confirm everything is connected. Without these, nothing else in the project works.

In this step, get ready to:
  • Create your Azure free account with $200 in credits.
  • Install the Azure CLI on your machine.
  • Log in to Azure from your terminal and confirm your subscription is active.
Create your Azure free account

Azure offers a free account that gives you $200 in credit for the first 30 days, plus access to 65+ services that are always free. The portfolio website you deploy in this project runs entirely on the Free tier, so you will not spend any of that credit.

  • Open your browser and go to the Azure free account signup page:
https://azure.microsoft.com/en-us/pricing/purchase-options/azure-account
  • Click Try Azure for free.
  • Sign in with your Microsoft account.
  • Complete the phone number verification when prompted.
  • Enter your credit or debit card details for identity verification.

Why do I need a credit card?

Azure uses the card only for identity verification. You will not be charged. The Free tier resources you create in this project cost nothing, and Azure will not auto-upgrade your account to a paid plan.

You should see the Azure Portal dashboard load with a welcome message. This confirms your free account and subscription are ready.

Signup not going through?

Make sure you are using a personal Microsoft account, not a work or school account that may have restrictions. If your card is declined, try a different card. Some prepaid cards are not accepted.

Help me troubleshoot my Azure free account signup.

Install the Azure CLI

The Azure CLI is a command-line tool that lets you create, manage, and deploy Azure resources directly from your terminal. Instead of clicking through the Portal for every action, you can run a single command to deploy your website.

Not on Windows?

The install instructions below are for Windows. If you are on macOS or Linux, follow the official Azure CLI installation guide for your platform, then rejoin at the verification step below.

  • Press the Windows key to open your search bar.
  • Type PowerShell and press Enter to open it.
  • Check if the Azure CLI is already on your machine by running this command:
az version

✔️ I see version output

You should see JSON output that includes an azure-cli entry followed by a version number. The Azure CLI is already installed. Skip ahead to the next substep to log in.

ⓧ Command not found

That means the Azure CLI is not installed yet. Install it by running this command in PowerShell:

winget install -e --id Microsoft.AzureCLI

What does this command do?

winget is the Windows package manager. The -e flag ensures an exact ID match, and --id Microsoft.AzureCLI tells it exactly which package to install.

  • Wait for the installation to finish. You may see a progress bar or a prompt asking you to accept the license terms.
  • Close PowerShell completely, then reopen it using the same steps as before (press the Windows key, type PowerShell, press Enter).
  • Verify the installation succeeded by running:
az version

You should now see JSON output that includes azure-cli followed by a version number (for example, 2.89.1).

Still seeing command not found?

Make sure you closed and reopened PowerShell after the install finished. The new az command is only available in a fresh terminal session.

If reopening did not help, try restarting your computer and running az version again.

Help me troubleshoot the Azure CLI installation on Windows.

Log in to Azure from your terminal

Now that the CLI is installed, you need to connect it to your Azure account. This lets the CLI create and manage resources under your subscription.

Before you run the next command, what do you think will happen? The CLI needs to verify your identity, so how might it do that?

  • Authenticate the Azure CLI by running this command:
az login

What happens when you run this?

A browser window opens automatically and asks you to sign in with your Microsoft account. After you sign in, the browser confirms authentication is complete and you can close the browser tab.

Back in your terminal, you'll see JSON output listing your Azure subscriptions. Look for the name field (your subscription name) and the state field showing Enabled. This confirms the CLI is connected to your account.

  • Sign in with the same Microsoft account you used to create your Azure free account.
  • Return to your terminal after signing in.

You should see a JSON array in your terminal that includes your subscription name and an isDefault field set to true. This means the CLI knows which subscription to use for your commands.

Browser did not open?

If the browser did not open automatically, copy the URL shown in the terminal and paste it into your browser manually. If you see a message about no subscriptions, make sure you completed the Azure free account signup and used the same Microsoft account.

Help me troubleshoot az login.

Your Azure account is live and your CLI is authenticated. Next up, you'll build an HTML page and deploy it to Azure in a single command.

Build Your Page and Deploy to Azure

Your Azure account is active and the CLI is ready to go. Now it is time to build something and put it on the internet.

You want to see your code running live as fast as possible. In this step, you will write a simple HTML portfolio page and deploy it to Azure with a single CLI command.

In this step, get ready to:
  • Create a project folder and write an HTML portfolio page.
  • Deploy your page to Azure with a single CLI command.
  • Visit your live site at a public URL anyone can access.
Create your project folder

Every project needs a home. You will create a folder on your Desktop so you can find it easily later.

  • Press the Windows key to open your search bar.
  • Type VS Code and press Enter to open it.
  • Open the integrated terminal by pressing Ctrl+` (the backtick key, above Tab).
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder by running this command:
mkdir my-azure-site
  • Confirm the folder was created by running:
ls

You should see my-azure-site listed in the output.

Don't see the folder?

Make sure you ran cd ~/Desktop before mkdir. If the terminal shows a different path, run cd ~/Desktop again and then re-run the mkdir command.

Help me find my project folder on the Desktop.

  • Now open the folder in VS Code. Click File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the my-azure-site folder, and click Select Folder.

VS Code reloads with your empty my-azure-site folder open in the Explorer sidebar on the left.

Write your portfolio page

Your folder is ready. Time to create the HTML file that will become your live website.

  • In the Explorer sidebar, hover over MY-AZURE-SITE to reveal the action icons.
  • Click the New File icon (a page with a + sign).
  • Type index.html and press Enter.
  • Paste the following code into your new index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
</head>
<body>
    <header>
        <h1>Hi, I'm [[YOURNAME="Your Name"]]</h1>
        <p>Welcome to my portfolio on Azure</p>
    </header>
</body>
</html>

What does this code do?

  • The <head> section sets up the page title, character encoding, and responsive scaling for mobile devices.
  • The <header> section displays your name and a short tagline. Replace the placeholder with your real name.
  • Save the file by pressing Ctrl+S.
  • Right-click index.html in the Explorer sidebar and select Reveal in File Explorer.
  • Double-click index.html in File Explorer to open it in your browser.

You should see a page with your name as a heading and the tagline below it. The page looks plain for now.

Now add the main content sections. In index.html, find this line:

    </header>
  • Place your cursor at the end of the </header> line and press Enter to create a new line.
  • Paste the following code between </header> and </body>:
    <main>
        <section>
            <h2>About Me</h2>
            <p>I'm learning cloud computing with Azure. This is my first website deployed to the cloud!</p>
        </section>
        <section>
            <h2>What I'm Learning</h2>
            <ul>
                <li>Azure App Service</li>
                <li>Azure CLI</li>
                <li>Cloud resource management</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>Deployed on Azure App Service</p>
    </footer>

What does this code add?

  • The <main> section holds two content blocks: an "About Me" paragraph and a "What I'm Learning" list.
  • The <footer> adds a simple note at the bottom of the page.
  • Save index.html with Ctrl+S.
  • Switch to your browser and refresh the page.

You should now see a complete portfolio page with your name at the top, an "About Me" paragraph, a "What I'm Learning" list, and a footer.

Page not updating?

Make sure you pressed Ctrl+S to save the file. A white dot on the file tab in VS Code means unsaved changes.

Check that the new code sits between </header> and </body>. If it ended up inside the <header> or after </html>, the browser may not render it correctly.

Help me fix my HTML page layout.

✔️ Awesome, I've got everything!

Great. Make sure you have saved index.html before moving on.

ⓧ I'd like to double check the full code

Your index.html should contain two parts, in this order:

  • The document skeleton and header (the first code block you pasted): <!DOCTYPE html> through </header>.
  • The main content, footer, and closing tags (the second code block you pasted): <main> through </html>.

Scroll up to compare your file against both code blocks. Make sure the second block sits between </header> and </body> with no overlap.

Deploy your site to Azure

Your page works locally. One CLI command will push it to the cloud and make it accessible to anyone on the internet.

  • Switch back to VS Code and open the integrated terminal with Ctrl+`.
  • Make sure you are inside the my-azure-site folder by running:
pwd

The output should end with my-azure-site. If it does not, run cd ~/Desktop/my-azure-site to get there.

What is az webapp up?

The az webapp up command is a one-liner that creates everything your app needs on Azure and deploys your files in one shot. It creates a resource group, an App Service plan (the virtual server), and an App Service web app.

Your app name becomes part of your public URL, so it must be globally unique across all of Azure. Only lowercase letters (a-z), numbers (0-9), and hyphens (-) are allowed.

  • Deploy your site to Azure by running this command:
az webapp up --name [[APPNAME="your-unique-app-name"]] --sku F1 --html

What do these flags do?

  • --name sets a globally unique name for your web app. Try something like jane-portfolio-2026. If the name is taken, Azure will tell you and you can try another.
  • --sku F1 selects the Free pricing tier so you pay nothing.
  • --html tells Azure to treat this as a static HTML app rather than trying to detect a runtime like Node.js or Python.

This command takes a minute or two

Azure is creating cloud resources and uploading your files. You will see progress updates in the terminal. Wait until the command finishes and you see a JSON block with your app's URL.

Seeing a deprecation warning?

You may see a notice that az webapp up has been deprecated. The command still works. Azure recommends switching to az webapp create and az webapp deploy in future projects, but for this project az webapp up is the simplest path.

Getting an error about the app name?

The name must be unique across all of Azure. If someone else already took it, pick a different one with your name, a number, or both. For example, sarah-portfolio-42.

If you see an authentication error, run az login again to re-authenticate.

Help me fix my az webapp up deployment error.

Once the command finishes, you will see JSON output that includes a URL. It looks like this:

https:// followed by your-app-name followed by .azurewebsites.net.

Before you open the URL, what do you think you will see? Will it be a default Azure page, or your actual HTML page?

  • Copy the URL from the terminal output.
  • Open a new browser tab and paste the URL into the address bar.
  • Press Enter.

Your portfolio page is live on the internet. You should see the same page you previewed locally: your name, the "About Me" paragraph, the "What I'm Learning" list, and the footer.

What just happened behind the scenes?

That single command did a lot of work. Azure created a resource group to hold everything, an App Service plan on the Free F1 tier as the virtual server, and a web app that runs your HTML files. It also zipped up your folder and uploaded it.

Azure also saved your settings locally in a .azure/config file inside your project folder. Next time you run az webapp up from this folder, it will remember your app name, resource group, and plan. No need to type the flags again.

Your site is live and anyone with the URL can see it. Next up, you will explore the Azure Portal to understand exactly what Azure built behind the scenes.

Explore What Azure Created

Your portfolio page is live on the internet. That single az webapp up command did a lot of heavy lifting behind the scenes.

It created three separate Azure resources to make your site work. Understanding how these resources relate to each other is the most important concept in Azure. Every service you ever use follows this same structure.

In this step, get ready to:
  • Find your web app in the Azure Portal and review its status.
  • Discover the resource group that organizes all your Azure resources.
  • Explore the App Service plan and key web app settings.
Find your web app in the Azure Portal

The Azure Portal is the web-based dashboard where you manage all your Azure resources. Let's sign in and find your web app.

  • Navigate to https://portal.azure.com in your browser.
  • Sign in with the Microsoft account you used to create your Azure free account.
  • In the search bar at the top of the page, type the name of your app (the name you chose in the az webapp up command).
  • Select your web app from the search results.

The web app's Overview page opens. This is the home base for your app.

What does the Overview page show?

The Overview page gives you the key details about your web app at a glance.

  • Default domain shows the live .azurewebsites.net address where your site is running.
  • Status shows whether your app is currently running.
  • App Service plan shows the name and pricing tier (Free F1) of the plan hosting your app.
  • Region shows the Azure data center location where your app was deployed.

Don't see your web app in search results?

  • Make sure you are typing the exact app name you used in the az webapp up command.
  • Check that you are signed in with the same Microsoft account you used for az login.
  • I can't find my web app in the Azure Portal search.
Discover the resource group

Every Azure resource lives inside a container called a resource group. Your deploy command created one automatically.

  • On the web app's Overview page, find the Resource group link near the top of the page.
  • Click the Resource group link to open it.

Before you look at the resource list, think about this: how many separate resources do you think that single az webapp up command created?

You should see at least two resources listed: the App Service plan and the web app itself. You may also see an Application Insights resource that Azure created automatically for monitoring.

What is a resource group?

A resource group is a container that holds related Azure resources. Think of it like a folder on your computer, but for cloud infrastructure.

Every Azure resource must belong to a resource group. When you delete a resource group, everything inside it gets deleted too. This makes cleanup simple.

  • Record the name of your resource group from the top of the page: your resource group name.
Explore the App Service plan and web app sidebar

The App Service plan is the virtual server that powers your web app. Let's look at it, then explore the key management sections of your web app.

  • In the resource group's resource list, click on the App Service plan resource.
  • Confirm the pricing tier shows Free (F1).

What is an App Service plan?

An App Service plan defines the compute resources (CPU, memory) and pricing tier for your web apps. It is the virtual server that runs your code.

A single plan can host up to 10 apps. You could add more sites to this same plan later without creating a new one.

  • Click your browser's back button to return to the resource group page.
  • Click on your web app resource to open it again.
  • In the web app's left sidebar, click Settings and then Configuration.

The Configuration page is where you manage general settings for your app, including platform options like Always On, HTTPS redirection, and the runtime stack.

  • In the left sidebar, click Deployment Center.

The Deployment Center shows how your app receives code updates and the source of your most recent deployment.

You have now explored the three key sections of your web app. Overview shows your app's status and URL. Configuration manages hosting settings. Deployment Center manages how code gets deployed.

Why does this hierarchy matter?

Every Azure service follows this same pattern: resources live inside resource groups, and related resources share infrastructure through plans or equivalent groupings.

Once you understand this structure for App Service, you already understand how Azure organizes databases, virtual machines, storage accounts, and everything else.

Now that you understand Azure's resource hierarchy, it is time to make your site look better. In the next step, you will add CSS styling and redeploy to see the edit-deploy-verify cycle in action.

Update Your Site and Hit a Free Tier Wall

You have explored the Azure Portal and seen how Azure organizes everything into resource groups, App Service plans, and web apps.

Deploying once is satisfying, but the real workflow is a loop: edit your code, deploy to the cloud, verify the result. In this step, you will style your portfolio page, practice that deploy cycle, and bump into a concrete limitation of the Free tier that shows you why paid tiers exist.

In this step, get ready to:
  • Add a CSS stylesheet to your portfolio page and link it in your HTML.
  • Redeploy your updated site to Azure and verify the changes are live.
  • Discover Free F1 tier restrictions in the Azure Portal.
Style your portfolio page

Your live site works, but it is unstyled HTML. A CSS stylesheet gives your portfolio color, layout, and personality.

  • Switch back to VS Code where your my-azure-site folder is open.
  • In the Explorer sidebar, right-click inside the my-azure-site folder.
  • Click New File and name it styles.css.
  • Add the global reset and body styles to styles.css by pasting this code:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

What does this code do?

The * selector removes default browser margins and padding from every element, giving you a clean slate.

The body rule sets a modern system font, caps the content width at 800 pixels, and centers everything on the page with margin: 0 auto.

Now you need to tell your HTML file to load this stylesheet. Without a <link> tag, the browser does not know the CSS file exists.

  • Open index.html and find this line in the <head> section:
    <title>My Portfolio</title>
  • Add this line directly below it:
    <link rel="stylesheet" href="styles.css">
  • The <head> section should now look like this:
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
  • Save both styles.css and index.html.
  • Open index.html in your browser by right-clicking the file in the Explorer sidebar and selecting Reveal in File Explorer (Windows) or Reveal in Finder (macOS), then double-clicking index.html.

You should see your portfolio text centered on the page with a clean sans-serif font instead of the browser default.

Page still looks unstyled?

  • Make sure you saved both files. Unsaved changes in VS Code show a dot on the file tab.
  • Check that the <link> tag is inside <head>, not <body>.
  • Confirm styles.css is in the same folder as index.html. The href path is relative.
  • help me debug my stylesheet link
  • Add the header styles to styles.css below the body rule by pasting this code:
header {
    text-align: center;
    padding: 3rem 0;
    border-bottom: 2px solid #0078d4;
}

h1 {
    color: #0078d4;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

header p {
    color: #666;
    font-size: 1.2rem;
}

What does this code do?

These rules center the header text, add Azure's signature blue (#0078d4) to the heading and the bottom border, and lighten the subtitle text to a soft gray.

  • Save styles.css and refresh your browser.

Your name should now appear in large blue text with a blue line separating the header from the rest of the page.

  • Add the main content and list styles below the header rules by pasting this code:
main {
    padding: 2rem 0;
}

section {
    margin-bottom: 2rem;
}

h2 {
    color: #0078d4;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

ul {
    list-style: none;
    padding: 0;
}

What does this code do?

The main and section rules add breathing room between content areas. The h2 rule applies the same Azure blue to subheadings. The ul rule strips the default bullet points so you can add custom ones next.

  • Add the list item and footer styles below the ul rule by pasting this final block of CSS:
li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: #0078d4;
    font-weight: bold;
}

footer {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 0.9rem;
}

What does this code do?

The li::before pseudo-element places a blue > arrow in front of each list item, replacing the standard bullet. The footer gets a subtle top border and muted gray text to sit quietly at the bottom of the page.

  • Save styles.css and refresh your browser.

You should see blue > arrows next to each list item and a light gray footer at the bottom.

List items still showing default bullets?

  • Check that list-style: none appears inside your ul selector block (from the previous chunk).
  • Confirm the li::before block uses two colons (::), not one.
  • help me fix my list styling

✔️ Awesome, I've got everything!

Great. Double check you have saved both styles.css and index.html.

ⓧ I'd like to double check the full code

Your styles.css should contain four blocks of CSS in this order. Scroll up and confirm each one is present:

  • Global reset (*) and body styles.
  • Header styles (header, h1, header p).
  • Main content styles (main, section, h2, ul).
  • List item styles (li, li::before) and footer styles.

Your index.html should have this line in the <head> section, directly after the <title> tag:

    <link rel="stylesheet" href="styles.css">
Redeploy your styled site to Azure

Your styled page looks great locally, but the live site on Azure still shows the old version. Time to push the update.

Why don't you need flags this time?

When you first ran az webapp up, the CLI cached your settings (resource group, SKU, app name) in a .azure/config file inside your project folder. Every subsequent az webapp up from the same folder reuses those values automatically.

  • In the VS Code integrated terminal, make sure you are inside the my-azure-site folder.
  • Redeploy your site by running this command:
az webapp up

Before you check the result, what do you think you will see when you open your site URL? Will the styling appear?

  • Open your site URL in a browser tab. It looks like https://your-unique-app-name.azurewebsites.net.
  • If the page still shows the old unstyled version, do a hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (macOS).

You should see your fully styled portfolio page live on the internet, with the blue heading, centered layout, custom list arrows, and footer.

Styles not showing on the live site?

  • Make sure you ran az webapp up from inside the my-azure-site folder, not from a parent folder.
  • Check the terminal output for errors. If you see a permissions or authentication error, run az login again and retry.
  • Confirm that styles.css is in the same folder as index.html. The deploy command zips everything in the current directory.
  • help me troubleshoot my Azure deployment
Discover Free tier limitations in the Azure Portal

Your site is live and styled. Everything works. But the Free F1 tier locks you out of features that production apps need. Let's see exactly what is off-limits.

  • Switch back to the Azure Portal in your browser.
  • In the search bar at the top, type your app name and select your web app from the results.
  • In the left sidebar, click Settings.
  • Click Configuration.
  • Select the General settings tab.

Before you look, do you think the Free tier has any restrictions on keeping your app running around the clock?

  • Scroll down to the Platform settings section and look for the Always On setting.

The Always On setting is not available on the Free F1 tier. On paid tiers (Basic and above), Always On keeps your app loaded at all times by pinging it every five minutes.

What does this mean for your site?

Without Always On, your app is unloaded after 20 minutes of no incoming requests. The first visitor after idle time gets a slow response while the app warms up again.

Custom domains are also blocked on the Free tier. Your app allows 0 custom domains, so it can only be reached at its .azurewebsites.net address. These are real-world examples of how Azure pricing tiers gate features.

Why do pricing tiers matter?

Every App Service plan sits on a pricing tier that determines which features are available. Free (F1) is great for learning and testing. Paid tiers like Basic, Standard, and Premium unlock Always On, custom domains, SSL certificates, auto-scaling, and deployment slots.

Secret mission

Stream Logs and Configure App Settings

Your site is live, but can you see what is happening on the server? In this mission, you will stream real-time server logs from your Azure web app and configure App Settings through the CLI. These are two of the most common day-to-day operations for anyone managing Azure resources.

Clean Up Your Resources

Clean Up Your Resources

All your Azure resources run on the Free F1 tier and cost nothing. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Azure resource group (contains the App Service plan and web app).
  • Azure App Service plan on the Free F1 tier.
  • Azure web app hosting your portfolio site at its .azurewebsites.net URL.
  • Local my-azure-site folder with index.html and styles.css.

Keep everything running

No action needed. Choose this if you are still actively building on your portfolio site.

  • Your site stays live at its .azurewebsites.net URL on the Free tier at no cost.
  • The app goes to sleep after being idle but wakes up automatically when someone visits.
  • The Azure CLI remains installed on your machine, ready for future Azure projects.

Pause - I'll come back to this later

Since all your resources run on the Free F1 tier, there are no active charges to stop.

  • Your app already goes to sleep on its own after being idle. There is nothing to shut down or pause.
  • Keep your local my-azure-site folder and the Azure CLI installed so you can return to the project anytime.
  • When you are ready to delete everything, follow the instructions in the Delete tab.

Delete - I don't want to use this again

Remove all project resources and start fresh.

  • Delete your Azure resource group and everything inside it by running this command in your terminal:
az group delete --name [[RG_NAME="your resource group name"]] --yes --no-wait

What does this command do?

Deleting a resource group removes everything inside it in one go. This single command deletes your App Service plan, web app, app settings, and any related resources Azure created during the project.

  • Delete your local my-azure-site folder.

macOS

  • Run this command in your terminal:
rm -rf ~/Desktop/my-azure-site

Windows

  • Run this command in PowerShell:
Remove-Item -Path "$HOME\Desktop\my-azure-site" -Recurse -Force

That's a Wrap!

That's a Wrap!

Nice work! You just took a local HTML file and turned it into a live website on Azure App Service, accessible to anyone with the link.

You've learned how to:

  • Built and deployed a personal portfolio website to Azure App Service using a single Azure CLI command, going from local file to live public URL.
  • Explored the Azure Portal and understood the resource hierarchy that organizes every Azure service: resource groups contain App Service plans, which contain web apps.
  • Practiced the edit-deploy-verify cycle and discovered real Free F1 tier limitations like no Always On and no custom domains.
  • Secret Mission: Streamed live server logs with az webapp log tail and configured App Settings through the CLI, seeing how CLI and Portal are two windows into the same configuration.

Ready to quiz yourself?