Host a Production Website on Azure

Deploy a static website on Azure Storage with monitoring and error handling.

Introduction

30 Second Summary

When you visit a website that shows a helpful "page not found" message instead of a cryptic error, that is not an accident. Someone deliberately architected that experience.

In this project, you will build a portfolio-style static website on Azure and configure it with the same practices a solutions architect would apply to a production workload. You will set up resource governance, custom error handling, and traffic monitoring.

What You'll Build

Picture sharing a link with a friend and watching your own portfolio site load in their browser, complete with a custom error page for broken URLs and a monitoring dashboard showing real visitor traffic.

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

  • A live portfolio website hosted on Azure Blob Storage that you can open in any browser and share the URL with anyone.
  • A custom 404 error page that handles missing URLs gracefully instead of showing a confusing default Azure error.
  • An Azure Monitor metrics view showing real traffic to your site, giving you visibility into how your website is being used.
  • Secret Mission: Enable blob versioning and practice rolling back a bad deployment to protect your site from accidental overwrites.

Are there any prerequisites?

You need an Azure free tier account and a web browser. No CLI or SDK installation is required.

A plain text editor like Notepad (Windows) or TextEdit (macOS) is all you need to create the HTML files.

Before We Start

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

Create Your Resource Group and Storage Account

Every Azure deployment starts with a decision about where your resources live and how they are organized. In a production environment, deploying resources into a default group with no context makes them impossible to manage at scale.

In this step, you will create two foundational resources. A Resource Group acts as the container for everything in your project. A Storage Account provides the storage service that will host your website. Both get deliberate configuration choices and tags that mirror production governance practices.

In this step, get ready to:
  • Create a Resource Group with a tagging strategy.
  • Provision a Storage Account with deliberate architecture choices.
  • Verify the configuration matches production standards.
Create a Resource Group with tags

An architect never deploys resources without proper organization. Your Resource Group is the logical container that groups every resource in this project together, making it easy to manage, monitor, and delete them as a unit.

  • Open your web browser and navigate to portal.azure.com.
  • Sign in with your Azure free tier account.
  • In the search bar at the top of the page, type Resource groups.
  • Select Resource groups from the search results.
  • Click Create.

What is a Resource Group?

A Resource Group is a container that holds related resources for an Azure solution. Resources that share the same lifecycle (deployed, updated, and deleted together) belong in the same group.

When you specify a location for the Resource Group, you are choosing where its metadata is stored. Pick a region close to you for the best performance.

  • On the Basics tab, enter rg-static-website in the Resource group field.
  • In the Region dropdown, select a region close to you (for example, East US).
  • Click the Tags tab at the top of the form.
  • In the first row, enter Project as the Name and StaticWebsite as the Value.
  • In the second row, enter Environment as the Name and Learning as the Value.
  • Click Review + Create.
  • Click Create.

The portal shows a notification confirming the Resource Group has been created. Click Go to resource group in the notification to open it.

Why tag your resources?

Tags are key-value pairs that let you categorize resources for cost tracking, automation, and governance. In a production environment with hundreds of resources, tags are how teams filter billing reports and enforce policies.

Adding tags at creation time builds the habit early. Retrofitting tags across an existing environment is tedious and error-prone.

Resource Group creation failed?

Make sure your Azure free tier subscription is active. You can check this in the Azure portal under Subscriptions.

If you see a permissions error, confirm your account has Contributor or Owner access at the subscription level.

Why can't I create a Resource Group in Azure?

Create a Storage Account inside the Resource Group

Your Storage Account is the Azure service that will hold your website files. Every setting you choose here is a deliberate architecture decision, from the performance tier to the redundancy model.

  • In the search bar at the top of the Azure portal, type Storage accounts.
  • Select Storage accounts from the search results.
  • Click Create.
  • On the Basics tab under Project details, select your Resource Group rg-static-website from the Resource group dropdown.
  • Under Instance details, enter a globally unique name in the Storage account name field (for example, myportfoliosite2026). The name must be 3 to 24 characters, using only lowercase letters and numbers.
  • In the Region dropdown, select the same region you chose for your Resource Group.
  • Set Performance to Standard.
  • Set Redundancy to Locally-redundant storage (LRS).

What is a Storage Account?

An Azure Storage Account provides a unique namespace for your data in the cloud. It supports blobs, files, queues, and tables under one umbrella.

Choosing Standard performance gives you a general-purpose v2 account, which is the recommended type for most workloads. Locally-redundant storage (LRS) keeps three copies of your data within a single data center. This is the most cost-effective option and a perfect fit for a learning project.

  • Click the Tags tab at the top.
  • In the first row, enter Project as the Name and StaticWebsite as the Value.
  • In the second row, enter Environment as the Name and Learning as the Value.
  • Click Review + create.
  • Review the summary, then click Create.

Azure validates your settings and begins the deployment. After a few seconds, you see a notification confirming the deployment is complete. Click Go to resource to open your new Storage Account.

Storage Account name already taken?

Storage Account names must be globally unique across all of Azure. If you see a validation error, try a different name by appending numbers or your initials (for example, jdportfolio2026).

Make sure the name uses only lowercase letters and numbers, with no hyphens or special characters.

Help me fix a Storage Account creation error in Azure.

Verify your setup

Before you move on, think about what you expect to see on the Storage Account Overview page. Which performance tier, redundancy model, and account kind did you choose?

  • In your Storage Account, look at the Overview page on the right side. Confirm you see Standard under performance, LRS under replication, and StorageV2 (general purpose v2) under account kind.
  • Navigate back to your Resource Group by clicking rg-static-website in the breadcrumb trail at the top of the page.
  • On the Resource Group page, click Tags in the left menu. Confirm both tags appear: Project = StaticWebsite and Environment = Learning.

What should I see?

The Storage Account Overview page confirms the architecture choices you made. Standard performance means you created a general-purpose v2 account. LRS means your data is replicated three times within one data center. StorageV2 is the modern account kind that supports all storage services including static website hosting.

On the Resource Group page, your two tags prove that governance is in place from day one.

Your foundation is in place. You have a properly organized Resource Group with tags and a Storage Account configured with deliberate architecture choices. Next up, you will enable static website hosting and deploy a live portfolio page.

Deploy Your Static Website

Your Resource Group and Storage Account are set up with proper tags and configuration. Now it's time to put them to work by hosting a live website.

Azure Blob Storage can serve web pages directly from a special container. In this step, you'll enable static website hosting, create a portfolio page, upload it, and visit your live site at a public URL.

In this step, get ready to:
  • Enable static website hosting on your Storage Account.
  • Create and upload a portfolio HTML page to the $web container.
  • Visit your live website at its public Azure URL.
Enable static website hosting

When you enable static website hosting on a Storage Account, Azure creates a container called $web. Any files you upload to that container are served as a website at a public URL.

  • In the Azure portal, navigate to your Storage Account.
  • In the left menu under Data management, select Static website.
  • Set Static website to Enabled.
  • In the Index document name field, enter index.html.
  • Leave the Error document path field blank for now.
  • Click Save.

After saving, a Primary endpoint URL appears on the page. This is the public address of your website.

  • Copy the Primary endpoint URL and save it somewhere handy (a sticky note, a new browser tab, or a text file).

What is the Primary endpoint?

This is the public URL where your static website lives. It follows the format https://<storage-account-name>.z<number>.web.core.windows.net. Anyone with this link can view your site.

Don't see the Static website option?

Make sure you are looking under Data management in the left menu, not under Settings. The Static website blade is grouped with data features, not general settings.

help me find the Static website setting in my Storage Account

Create and upload your portfolio page

Your website needs an HTML file to display. You'll create a portfolio page on your computer and then upload it to the $web container in Azure.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type TextEdit (macOS) or Notepad (Windows) and press Enter to open it.

Using TextEdit on macOS?

TextEdit opens in rich text mode by default, which will corrupt your HTML. Before pasting any code, click Format in the menu bar and select Make Plain Text.

  • Start your index.html file by pasting the document head and layout styles into your text editor:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Azure Portfolio</title>
    <style>
        /* Reset default browser spacing */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        /* Base font and text color for the whole page */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        /* Blue gradient banner across the top */
        header {
            background: linear-gradient(135deg, #0078d4, #005a9e);
            color: white;
            text-align: center;
            padding: 60px 20px;
        }
        header h1 { font-size: 2.5rem; margin-bottom: 10px; }
        header p { font-size: 1.2rem; opacity: 0.9; }
        /* Centered content column */
        .content {
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
        }

What does this code do?

This sets up the HTML document and defines the visual styles for the page. The header gets a blue gradient banner. The .content class creates a centered column that keeps text readable on wide screens.

  • Continue in the same file by pasting these card and footer styles directly below what you just added:
        /* Card with left blue accent border */
        .card {
            background: #f9f9f9;
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 20px;
            border-left: 4px solid #0078d4;
        }
        .card h2 { color: #0078d4; margin-bottom: 10px; }
        /* Simple centered footer */
        footer {
            text-align: center;
            padding: 30px;
            color: #666;
            font-size: 0.9rem;
        }
    </style>
</head>

What does this code do?

The .card class gives each content section a light background with a blue left border. The footer style keeps text small and centered at the bottom of the page. The </style> and </head> tags close out the page's style definitions.

  • Save the file now so you can preview the page structure. In Notepad, press Ctrl+S. In TextEdit, press Cmd+S.
  • Name the file index.html and save it to your Desktop.

Saving as .html in TextEdit

When TextEdit asks which extension to use, click Use .html to keep the HTML file format.

  • Double-click index.html on your Desktop to open it in your browser.

Your browser tab title shows "Azure Portfolio". The page itself appears blank because the body content is not added yet. The styles are loaded and ready.

  • Switch back to your text editor and paste the page body content directly below the </head> tag:
<body>
    <!-- Blue gradient header section -->
    <header>
        <h1>My Azure Portfolio</h1>
        <p>Hosted on Azure Blob Storage</p>
    </header>
    <div class="content">
        <!-- About card -->
        <div class="card">
            <h2>About This Site</h2>
            <p>This static website is hosted on Azure Storage, demonstrating cloud architecture skills including resource organization, monitoring, and data protection.</p>
        </div>
        <!-- Architecture card -->
        <div class="card">
            <h2>Architecture Highlights</h2>
            <p>Resource Group with tagging strategy, Storage Account with LRS redundancy, static website hosting via the $web container, Azure Monitor metrics for observability, and blob versioning for deployment safety.</p>
        </div>
        <!-- Skills card -->
        <div class="card">
            <h2>Skills Demonstrated</h2>
            <p>Azure Storage, resource governance, monitoring and observability, business continuity, and cost optimization through appropriate service selection.</p>
        </div>
    </div>
    <footer>
        <p>Built as part of an Azure Solutions Architect learning project</p>
    </footer>
</body>
</html>

What does this code do?

The <header> section displays a large title with a subtitle over the blue gradient. The three .card blocks each highlight a different aspect of your portfolio: what the site is, what architecture it uses, and what skills it demonstrates.

  • Save the file (Ctrl+S on Windows, Cmd+S on macOS).
  • Switch to your browser and refresh the tab where index.html is open.

You should see the full portfolio page: a blue gradient header reading "My Azure Portfolio", three content cards with blue left borders, and a footer at the bottom.

✔️ Awesome, I've got everything!

Your index.html is ready to upload. Make sure it is saved on your Desktop.

ⓧ I'd like to double check the full code

Scroll up and confirm your file contains all three sections in order:

  • The document head with layout and header styles (the first code block you pasted).
  • The card and footer styles closing the </head> tag (the second code block).
  • The <body> with the header, three cards, and footer through </html> (the third code block).

Make sure there are no gaps or duplicated lines between sections. The file should start with <!DOCTYPE html> and end with </html>.

Now upload your file to Azure so it is served at your public URL.

  • In the Azure portal, navigate to your Storage Account.
  • In the left menu, select Containers.
  • Click the $web container to open it.
  • Click Upload.
  • Browse to your Desktop and select the index.html file you just saved.
  • Click Upload to confirm.

You should see index.html listed inside the $web container.

  • Click on the index.html blob name to open its properties.
  • Confirm the CONTENT-TYPE property shows text/html.

Why check the Content-Type?

The CONTENT-TYPE property tells browsers how to interpret the file. If it were set to application/octet-stream instead of text/html, the browser would try to download the file rather than display it. Azure automatically detects text/html for .html files.

Don't see the $web container?

The $web container is created automatically when you enable static website hosting. Go back to Data management and confirm that Static website is set to Enabled with index.html as the index document name. Click Save again if needed, then return to Containers.

help me find my $web container in Azure Storage

Visit your live website

Your file is uploaded and Azure is serving it at the Primary endpoint URL you copied earlier. Before you open it, take a moment to predict what you'll see.

  • Think about what you expect the live page to look like. Will it match the local preview you saw, or could something be different?
  • Open a new browser tab and paste the Primary endpoint URL you copied earlier.

Your portfolio page loads with the blue gradient header reading "My Azure Portfolio", three content cards, and a footer. This is the same page you previewed locally, now live on Azure and accessible to anyone with the link.

Seeing a blank page or an error?

Make sure you are using the Primary endpoint URL from the Static website settings page, not the Storage Account's general endpoint. The static website URL contains .web.core.windows.net in it.

If you see a download prompt instead of a rendered page, check that the CONTENT-TYPE on your blob is text/html, not application/octet-stream.

help me get my Azure static website loading in the browser

Your portfolio site is live and accessible to anyone with the URL. Next up, you'll test what happens when something goes wrong, and discover what your site is still missing.

Discover What Is Missing

Your portfolio page is live and accessible to anyone with the URL. That is a real accomplishment.

A solutions architect never stops at "it works." In this step, you will test two edge cases that reveal what your current setup is still missing before it can be called production-ready.

In this step, get ready to:
  • Test what happens when a visitor lands on a page that does not exist.
  • Check whether you have any visibility into your website's traffic.
Test a non-existent page

Your website currently has one page: index.html. But what happens when someone visits a URL on your site that does not exist?

Before you test this, take a guess. Do you think Azure will show your visitors a helpful error message, or something else entirely?

  • Switch to the browser tab where your portfolio site is loaded.
  • Click into the address bar and add /fakepage.html to the end of your Primary endpoint URL.
  • Press Enter to visit the page.

You see a generic default error page. This is what your visitors would see if they mistyped a URL or followed a broken link to your site.

Why did Azure show a generic error?

When you enabled static website hosting in the previous step, you left the Error document path blank. Without a custom error page to serve, Azure returns a default 404 page to the visitor.

That default page gives your visitors zero guidance on what went wrong or how to get back to your site. This is the first production gap.

Check the monitoring blind spot

Your site is serving pages to visitors. Let's find out if you have any way to track that traffic.

Before you check, do you think Azure is automatically tracking visits to your static website in a way you can see?

  • Switch back to the Azure portal.
  • In your Storage Account, select Metrics under the Monitor section in the left menu.
  • In the Metric Namespace dropdown, select Blob.
  • Select the Egress metric.
  • Set the aggregation to Sum.
  • Click Add filter.
  • Select API name as the Property.

Now look for GetWebContent in the Values list.

If your site has had very little traffic, GetWebContent may not appear in the list at all. This means you have no visibility into how your static website is being used.

What is GetWebContent?

GetWebContent is the API name that Azure Monitor logs when someone visits a page on your static website. It only appears in the filter values if that API was used within the selected time frame.

Even if it does appear after you expand the time range or visit your site more, you had to dig through several dropdowns to find it. There is no obvious dashboard telling you that your website is getting visitors.

Can't find the Metrics option?

Make sure you are inside your Storage Account, not the Resource Group. The Monitor section with Metrics is in the Storage Account's left menu, not the main Azure portal sidebar.

help me find the Metrics blade in my Storage Account

This is the second production gap. You have no easy monitoring visibility into your website's traffic.

You have now identified two gaps that a solutions architect would catch in a design review: no custom error handling for missing pages, and no monitoring visibility into website traffic.

Your site is live, but it is not production-ready. Next up, you will close both of these gaps by adding a custom 404 error page and configuring metrics to track your website traffic.

Add Error Handling and Monitoring

In the last step, you uncovered two production gaps hiding in your live site. A visitor who mistypes a URL sees a confusing default error page. You also have no way to tell whether anyone is actually visiting your site.

These are the exact gaps a solutions architect addresses before calling any deployment production-ready. In this step, you will close both of them: a custom 404 page for a polished user experience, and Azure Monitor metrics for observability into your workload.

In this step, get ready to:
  • Create and upload a custom 404 error page to your static website.
  • Configure the error document path so Azure serves your custom page for missing URLs.
  • Verify error handling and monitoring are both working for your production-ready site.
Create and upload a custom 404 page

Your site needs a friendly error page that helps visitors find their way back instead of showing a confusing default message. You will create a styled 404.html file and upload it to your $web container.

  • Open a text editor (Notepad on Windows, or any plain text editor).
  • Create a new file and paste the following page structure and error styles:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f4f4f4;
        }
        .error-container { text-align: center; padding: 40px; }
        .error-code {
            font-size: 6rem;
            font-weight: bold;
            color: #0078d4;
        }
        .error-message {
            font-size: 1.5rem;
            margin: 20px 0;
        }

What does this code do?

  • The body uses flexbox to center the error message both vertically and horizontally on a light grey background.
  • The .error-code class styles the large "404" number in Azure blue so it is the first thing visitors notice.
  • The .error-message class styles the "Page Not Found" heading below the error code.
  • Continue by pasting the remaining styles and the page content directly below what you just typed:
        .error-detail {
            color: #666;
            margin-bottom: 30px;
        }
        .home-link {
            display: inline-block;
            padding: 12px 30px;
            background: #0078d4;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1rem;
        }
        .home-link:hover { background: #005a9e; }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-code">404</div>
        <div class="error-message">Page Not Found</div>
        <p class="error-detail">The page you are looking for does not exist or has been moved.</p>
        <a href="/" class="home-link">Back to Home</a>
    </div>
</body>
</html>

What does this section add?

  • The .home-link class creates a styled blue button that links back to your portfolio's home page at /.
  • The <body> section holds the visible content: a large "404" heading, a "Page Not Found" message, an explanation line, and the "Back to Home" button.
  • Save this file as 404.html on your computer.

✔️ Awesome, I've got everything!

Great. Make sure you have saved the file as 404.html before moving on to the upload.

ⓧ I'd like to double check the full code

Scroll up and confirm both code chunks are present in your file, in order. The first chunk starts with <!DOCTYPE html> and ends with the closing brace of .error-message. The second chunk starts with .error-detail and ends with </html>. Make sure there are no blank lines or gaps between the two chunks.

Now upload the file to your $web container, the same way you uploaded index.html earlier.

  • In the Azure portal, return to your Storage Account.
  • Select Containers in the left menu.
  • Open the $web container.
  • Click Upload.
  • Select your 404.html file and click Upload.
  • Confirm that 404.html now appears alongside index.html inside the $web container.
  • Click on the 404.html blob and verify the CONTENT-TYPE property is set to text/html.

Don't see 404.html in the container?

  • Make sure you are looking inside the $web container, not a different container in your Storage Account.
  • Double check that the file was saved with the exact name 404.html (not 404.html.txt). Notepad sometimes adds a .txt extension. When saving, set the file type to All Files (*.*) to prevent this.
  • My 404 page isn't uploading to the $web container.
Configure the error document path

Uploading the file is only half the job. Azure needs to know which file to serve when a visitor requests a page that does not exist. You set this in the Static website settings.

  • In your Storage Account, go to Data management in the left menu.
  • Select Static website.
  • In the Error document path field (which you left blank earlier), enter 404.html.
  • Click Save.

Why did we leave this blank earlier?

Leaving the error document path blank was intentional. It let you experience the default 404 behavior firsthand in Step 3. Now you know exactly what gap you are filling and why it matters.

Verify the full production setup

Time to close both gaps. First, you will test that your custom error page works. Then you will check whether Azure Monitor can now show traffic to your site.

Before you visit the URL, think back to Step 3. What do you think you will see this time when you navigate to a page that does not exist?

  • Open a new browser tab and paste your Primary endpoint URL with /fakepage.html appended to the end.

Instead of the confusing default error you saw in Step 3, you should now see your styled 404 page. It displays a large blue "404" heading, a "Page Not Found" message, and a "Back to Home" link.

  • Click the Back to Home link on the 404 page.
  • Confirm it takes you back to your portfolio page with the blue header reading "My Azure Portfolio".

Still seeing the default error page?

  • Clear your browser cache or open the URL in an incognito/private window. Browsers sometimes cache the old error response.
  • Return to Data management > Static website and confirm the Error document path shows 404.html and that you clicked Save.
  • Check that the file in the $web container is named exactly 404.html (case-sensitive). File names in the $web container are case-sensitive.
  • My custom 404 page is not showing up when I visit a non-existent URL on my Azure static website.

Gap one is closed. Now check on monitoring. Visiting your pages just now generated traffic data that Azure Monitor should be able to show.

  • Return to your Storage Account in the Azure portal.
  • Under Monitor in the left menu, select Metrics.
  • In the Metric Namespace dropdown, select Blob.
  • Select the Egress metric.
  • Set the aggregation to Sum.
  • Click Add filter.
  • Choose API name as the property.
  • Look for GetWebContent in the values list and select it.

What if GetWebContent does not appear?

The portal only shows API names that were used within the selected time frame. If GetWebContent is not listed yet, visit your portfolio page and your 404 page a few more times in the browser.

Then return to the Metrics blade and expand the time range (try Last hour or Last 4 hours). GetWebContent should now appear in the filter values.

Once you select GetWebContent, the chart filters down to show only traffic from your static website pages. This is your observability into how your site is being used.

Why filter by GetWebContent?

Your Storage Account handles many types of API calls internally. GetWebContent is the specific API name Azure uses when someone requests a page from your static website. Filtering to this value isolates real visitor traffic from background storage operations.

Secret mission

Enable Blob Versioning and Roll Back a Bad Deployment

Your site is production-ready, but what happens when a bad deployment overwrites your working page? In this secret mission, you will enable blob versioning on your Storage Account, simulate a broken deployment, and practice rolling back to the previous version. This is the same business continuity skill that solutions architects use to protect real workloads.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on the Azure free tier, so there are no ongoing costs for the resources you created. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Resource Group (rg-static-website or your chosen name) with Project and Environment tags.
  • Storage Account with static website hosting and blob versioning enabled.
  • index.html and 404.html files in the $web container (plus blob version history).
  • Azure Monitor metrics configuration for static website traffic.

Keep everything running

No action needed. Choose this if you want to keep your portfolio site live and continue updating it.

  • Your static website stays live at the Primary endpoint URL you copied earlier.
  • The Azure free tier covers the storage and operations used by this project's small HTML files.
  • You can continue uploading new files to the $web container to update your site at any time.

Pause - I'll come back to this later

Take your site offline while keeping all your files and configurations in place. There is no cost saving since the free tier already covers this project, but disabling the website stops it from being publicly accessible.

  • In your Storage Account, go to Data management in the left menu and select Static website.
  • Click Disabled and then click Save.
  • Your files remain in the $web container. When you are ready to resume, return to the same page, click Enabled, re-enter index.html as the Index document name and 404.html as the Error document path, and click Save.

Delete - I don't want to use this again

Remove all project resources from your Azure account. Deleting the Resource Group removes the Storage Account, the $web container, all uploaded files, blob versions, and the metrics configuration in one action.

  • In the Azure portal, search for Resource groups in the top search bar and select it.
  • Select your Resource Group (for example, rg-static-website).
  • Click Delete resource group.
  • Type your Resource Group name to confirm, then click Delete.
  • Wait for the deletion to complete. Once finished, the Resource Group, Storage Account, and all associated resources no longer exist in your Azure account.

Nice Work!

Nice Work!

You just architected a production-ready static website on Azure. This is not just a deployed page. It is a properly governed, monitored, and protected cloud workload built with the same practices a solutions architect would apply.

You've learned how to:

  • Organize cloud resources with a tagged Resource Group and deploy a live static website on Azure Blob Storage with a deliberately configured Storage Account accessible via a public URL.
  • Discover production gaps by testing edge cases, then fix them by adding a custom 404 error page and configuring Azure Monitor metrics filtered to static website traffic.
  • Apply resource governance best practices with tagging strategies and deliberate architecture choices for performance, redundancy, and account kind.
  • Secret Mission: Enable blob versioning and practice rolling back a bad deployment, demonstrating the business continuity skills architects need.

Ready to quiz yourself?