Skip to content

Commit 494b28a

Browse files
Carolyn135Carolyn135
authored
Merge pull request #54204 from Rob-Barefoot/Module1-update
Module1 update
2 parents 3781bec + 9611d3b commit 494b28a

5 files changed

Lines changed: 45 additions & 209 deletions

File tree

‎learn-pr/wwl-azure/guided-project-deploy-static-website-blob-storage/includes/2-exercise-create-storage-enable-hosting.md‎

Lines changed: 12 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,21 @@
11
This guided project consists of the following exercises:
22

3-
- **Create storage account and enable hosting**
4-
- Upload and verify site content
5-
- Update the site content
3+
- **Exercise 1: Create storage account and enable hosting**
4+
- Exercise 2: Upload and verify site content
5+
- Exercise 3: Update the site content
6+
- Clean up resources
67

7-
In this exercise, you create a resource group, set up a storage account, and turn on the static website hosting feature. By the end, you have a public URL ready to serve web content—even though you haven't uploaded any files yet.
8+
In this exercise, you create a resource group, set up a storage account, and turn on the static website hosting feature. By the end, you have a public URL ready to serve web content.
89

9-
This exercise includes the following tasks:
10+
The exercise consists of the following tasks:
1011

11-
- Prepare the environment
12-
- Create the storage account
13-
- Enable static website hosting
12+
- Prepare the environment
13+
- Create the storage account
14+
- Enable static website hosting
1415

15-
**Outcome:** A storage account with static website hosting enabled and a public endpoint ready to serve content.
16-
17-
> [!TIP]
18-
> Pause after each major action and confirm the page status before moving on. This habit prevents compounding mistakes.
19-
20-
## Task 1: Prepare the environment
21-
22-
Set up your Azure environment before you begin. You create a resource group to organize all the resources for this project together, which makes cleanup easier when you finish.
23-
24-
> [!WARNING]
25-
> This project creates Azure resources that may incur charges. Complete the clean-up unit when you're done to avoid unintended expenses.
26-
27-
1. Sign in to the [Azure portal](https://portal.azure.com) with an account that has permissions to create storage resources.
28-
2. In the portal search bar, search for **Resource groups** and select **Resource groups**.
29-
3. Select **+ Create**. Name the resource group **rg-gp-static-website**, choose your preferred region, and select **Review + create** then **Create**.
30-
31-
## Task 2: Create the storage account
32-
33-
Create a general-purpose storage account that will host your website files. Azure Blob Storage can serve static HTML, CSS, and image files directly to browsers without requiring a web server.
34-
35-
1. In the portal search bar, search for **Storage accounts** and select **Storage accounts**.
36-
2. Select **+ Create**.
37-
3. On the Basics tab, select **rg-gp-static-website** as the resource group.
38-
4. For **Storage account name**, enter a globally unique name (for example, **stgpstaticsite** followed by your initials and a number). Storage account names must be 3-24 characters, lowercase letters and numbers only.
39-
5. For **Region**, choose the same region as the resource group.
40-
6. For **Preferred Storage Type**, select **Azure Blob Storage or Azure Data Lake Storage Gen 2**.
41-
7. For **Performance**, select **Standard**.
42-
8. For **Redundancy**, select **Locally-redundant storage (LRS)**.
43-
9. Select **Review + create** and then select **Create**.
44-
10. When deployment finishes, select **Go to resource**.
45-
46-
## Task 3: Enable static website hosting
47-
48-
Turn on the built-in static website feature. This creates a special container named **$web** where you upload your site files, and provides a public URL that serves those files to visitors.
49-
50-
1. In the storage account left menu, under **Data management**, select **Static website**.
51-
2. Set Static website to **Enabled**.
52-
3. For **Index document name**, enter **index.html**.
53-
4. For **Error document path**, enter **404.html**.
54-
5. Select **Save**.
55-
6. Note the **Primary endpoint** URL that appears after saving. This is the public URL for your website.
16+
Launch the exercise and follow the instructions. When you're done, be sure to return to this page so you can continue learning.
5617

5718
> [!NOTE]
58-
> **Validation step:** Confirm that static website hosting shows **Enabled**, and that a Primary endpoint URL is displayed.
19+
> To complete this lab you will need an [Azure subscription](https://azure.microsoft.com/pricing/purchase-options/azure-account?cid=msft_learn).
5920
60-
> [!NOTE]
61-
> Each exercise includes validation steps like this one. Track your results as you go—you'll review them all in the validation unit at the end of this module.
21+
[:::image type="content" source="../media/launch-exercise-button.png" alt-text="Button to launch exercise.":::](https://microsoftlearning.github.io/Deploy-a-static-website-with-Azure-Blob-Storage/Instructions/Labs/2-exercise-create-storage-enable-hosting.html)

‎learn-pr/wwl-azure/guided-project-deploy-static-website-blob-storage/includes/3-exercise-upload-verify-content.md‎

Lines changed: 13 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,22 @@
11
This guided project consists of the following exercises:
22

3-
- Create storage account and enable hosting
4-
- **Upload and verify site content**
5-
- Update the site content
3+
- Exercise 1: Create storage account and enable hosting
4+
- **Exercise 2: Upload and verify site content**
5+
- Exercise 3: Update the site content
6+
- Clean up resources
67

7-
In this exercise, you create an HTML page and a custom error page, upload both to the $web container, and visit your live site to confirm everything works. This is where your static website goes from an empty endpoint to a real page that anyone can visit.
8+
In this exercise, you create an HTML page and a custom error page, upload both to the $web container, and visit your live site to confirm everything works.
89

9-
This exercise includes the following tasks:
10+
The exercise consists of the following tasks:
1011

11-
- Create the HTML file locally
12-
- Upload the file to the $web container
13-
- Create and upload a custom error page
14-
- Verify the live site and error page
12+
- Create the HTML file locally
13+
- Upload the file to the $web container
14+
- Create and upload a custom error page
15+
- Verify the live site and error page
1516

16-
**Outcome:** A live public website displaying your Version 1 content.
17-
18-
## Task 1: Create the HTML file locally
19-
20-
Create a simple HTML file on your computer that will serve as the initial version of your website. This file represents the content your team wants to publish.
21-
22-
1. On your local computer, open a text editor (such as Notepad).
23-
2. Paste the following content:
24-
25-
```html
26-
<!DOCTYPE html>
27-
<html>
28-
<head><title>Product Landing Page</title></head>
29-
<body>
30-
<h1>Version 1 - Landing Page</h1>
31-
<p>Welcome to our product page. This is the initial published version.</p>
32-
</body>
33-
</html>
34-
```
35-
36-
3. Save the file as **index.html**.
37-
38-
## Task 2: Upload the file to the $web container
39-
40-
Upload your HTML file to the special **$web** container that Azure created when you enabled static website hosting. Files in this container are automatically served to visitors who browse to your site endpoint.
41-
42-
1. In the Azure portal, return to your storage account.
43-
2. In the left menu, under **Data storage**, select **Containers**.
44-
3. Select the **$web** container.
45-
4. Select **Upload**.
46-
5. Select **Browse for files**, select the **index.html** file you created, and upload it.
47-
6. Confirm that **index.html** appears in the container file list.
48-
49-
## Task 3: Create and upload a custom error page
50-
51-
Create a custom 404 error page that visitors see when they browse to a page that doesn't exist. Without this file, visitors get a generic XML error, which looks unprofessional.
52-
53-
1. On your local computer, open a text editor.
54-
2. Paste the following content:
55-
56-
```html
57-
<!DOCTYPE html>
58-
<html>
59-
<head><title>Page Not Found</title></head>
60-
<body>
61-
<h1>404 - Page Not Found</h1>
62-
<p>The page you requested does not exist. Return to the <a href="/">home page</a>.</p>
63-
</body>
64-
</html>
65-
```
66-
67-
3. Save the file as **404.html**.
68-
4. In the Azure portal, return to the **$web** container.
69-
5. Select **Upload**, select **Browse for files**, select the **404.html** file, and upload it.
70-
6. Confirm that both **index.html** and **404.html** appear in the container.
17+
Launch the exercise and follow the instructions. When you're done, be sure to return to this page so you can continue learning.
7118

7219
> [!NOTE]
73-
> **Validation step:** The **$web** container should list both **index.html** and **404.html**.
20+
> To complete this lab you will need an [Azure subscription](https://azure.microsoft.com/pricing/purchase-options/azure-account?cid=msft_learn).
7421
75-
## Task 4: Verify the live site and error page
76-
77-
Open the public endpoint in a browser to confirm your website is live, and then test the custom error page. This validates that static website hosting is correctly configured for both normal pages and missing pages.
78-
79-
1. In the Azure portal, navigate back to your storage account (use the portal search bar to search for **Storage accounts** and select your account if needed).
80-
2. In the left menu, under **Data management**, select **Static website**.
81-
3. Select the **Primary endpoint** link to open the site in a new browser tab.
82-
3. Confirm the page displays **Version 1 - Landing Page** and the welcome message.
83-
4. In the browser address bar, add **/fakepage** to the end of the URL and press Enter.
84-
5. Confirm the custom 404 page appears with the **Page Not Found** heading and a link back to the home page.
85-
6. Select the **home page** link and confirm it returns to the Version 1 landing page.
86-
87-
> [!NOTE]
88-
> **Validation step:** The landing page displays **Version 1 - Landing Page**, and browsing to a nonexistent path shows your custom **404 - Page Not Found** page.
22+
[:::image type="content" source="../media/launch-exercise-button.png" alt-text="Button to launch exercise.":::](https://microsoftlearning.github.io/Deploy-a-static-website-with-Azure-Blob-Storage/Instructions/Labs/3-exercise-upload-verify-content.html)

‎learn-pr/wwl-azure/guided-project-deploy-static-website-blob-storage/includes/4-exercise-update-site-content.md‎

Lines changed: 12 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,22 @@
11
This guided project consists of the following exercises:
22

3-
- Create storage account and enable hosting
4-
- Upload and verify site content
5-
- **Update the site content**
3+
- Exercise 1: Create storage account and enable hosting
4+
- Exercise 2: Upload and verify site content
5+
- **Exercise 3: Update the site content**
6+
- Clean up resources
67

78
In this exercise, you create an updated version of your HTML file, upload it to replace the original, and verify the change is live. You also explore blob properties like access tier and content type to understand how Azure stores your files.
89

9-
This exercise includes the following tasks:
10+
The exercise consists of the following tasks:
1011

11-
- Create the updated HTML file
12-
- Upload the updated file
13-
- Verify the updated site
14-
- Review blob properties and access tier
12+
- Create the updated HTML file
13+
- Upload the updated file
14+
- Verify the updated site
15+
- Review blob properties and access tier
1516

16-
**Outcome:** The live website displays updated Version 2 content after replacing the original file.
17-
18-
## Task 1: Create the updated HTML file
19-
20-
Prepare a new version of the page content. In a real scenario, this represents a content update from the marketing team that needs to replace the current live page.
21-
22-
1. On your local computer, open a text editor.
23-
2. Paste the following content:
24-
25-
```html
26-
<!DOCTYPE html>
27-
<html>
28-
<head><title>Product Landing Page</title></head>
29-
<body>
30-
<h1>Version 2 - Landing Page</h1>
31-
<p>Welcome to our updated product page with the latest information.</p>
32-
</body>
33-
</html>
34-
```
35-
36-
3. Save the file as **index.html** (overwriting the previous version).
37-
38-
## Task 2: Upload the updated file
39-
40-
Replace the existing file in the **$web** container with your updated version. Uploading a file with the same name overwrites the previous version, which is how you publish content updates to a static website.
41-
42-
1. In the Azure portal, navigate to your storage account.
43-
2. Under **Data storage**, select **Containers** and open the **$web** container.
44-
3. Select **Upload**.
45-
4. Select **Browse for files** and select the updated **index.html** file.
46-
5. Check the box for **Overwrite if files already exist**.
47-
6. Select **Upload**.
48-
49-
## Task 3: Verify the updated site
50-
51-
Confirm that the live website now shows the updated content. Because static website hosting serves files directly from blob storage, the change should appear immediately.
52-
53-
1. Return to the browser tab showing your static website (or open the **Primary endpoint** URL again).
54-
2. Refresh the page.
55-
3. Confirm the page now displays **Version 2 - Landing Page** and the updated message.
17+
Launch the exercise and follow the instructions. When you're done, be sure to return to this page so you can continue learning.
5618

5719
> [!NOTE]
58-
> **Validation step:** The live site now shows **Version 2 - Landing Page**, confirming the content update was published successfully.
59-
60-
## Task 4: Review blob properties and access tier
20+
> To complete this lab you will need an [Azure subscription](https://azure.microsoft.com/pricing/purchase-options/azure-account?cid=msft_learn).
6121
62-
Examine the properties of your uploaded files to understand how Azure stores them. Each blob has metadata, an access tier, and a content type that affects how browsers handle it.
63-
64-
1. In the Azure portal, navigate to the **$web** container.
65-
2. Select the **index.html** blob to open its properties.
66-
3. On the **Overview** tab, note the **URL**, **Access tier** (Hot by default), and **Content type** (text/html).
67-
4. Select **Edit** and review the raw content to confirm it matches your Version 2 HTML.
68-
5. Select **Cancel** to return without changes.
69-
6. Navigate back to the container and select **404.html** to compare its properties with index.html.
70-
71-
> [!NOTE]
72-
> **Validation step:** Both blobs show **Content type** of **text/html** and **Access tier** of **Hot**.
22+
[:::image type="content" source="../media/launch-exercise-button.png" alt-text="Button to launch exercise.":::](https://microsoftlearning.github.io/Deploy-a-static-website-with-Azure-Blob-Storage/Instructions/Labs/4-exercise-update-site-content.html)

‎learn-pr/wwl-azure/guided-project-deploy-static-website-blob-storage/includes/6-clean-up-resources.md‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
1-
Complete these steps to avoid ongoing charges from the resources you created in this project.
1+
This guided project consists of the following exercises:
22

3-
> [!WARNING]
4-
> Resource deletion is permanent. Verify that you're deleting only resources created for this guided project before you proceed.
3+
- Exercise 1: Create storage account and enable hosting
4+
- Exercise 2: Upload and verify site content
5+
- Exercise 3: Update the site content
6+
- **Clean up resources**
57

6-
## Delete the resource group
8+
Congratulations — you've completed the exercises in this project. In this final step, you remove all the resources you created. It's important to clean up to avoid unexpected charges in your Azure subscription.
79

8-
Deleting the resource group removes all resources inside it, including the storage account and the **$web** container.
10+
Launch the exercise and follow the instructions. When you're done, be sure to return to this page so you can continue learning.
911

10-
1. In the portal search bar, search for **Resource groups** and select **Resource groups**.
11-
2. Select **rg-gp-static-website** from the list.
12-
3. Select **Delete resource group** from the top menu bar.
13-
4. In the confirmation field, type **rg-gp-static-website** and select **Delete**.
14-
5. In the confirmation dialog that appears, select **Delete** again to confirm.
15-
6. Wait for the notification that confirms the resource group is deleted.
16-
17-
## Verify cleanup
18-
19-
1. In the portal search bar, search for **Resource groups** and confirm **rg-gp-static-website** no longer appears in the list.
20-
2. Try browsing to the static website Primary endpoint URL you saved earlier. Confirm it no longer resolves.
12+
[:::image type="content" source="../media/launch-exercise-button.png" alt-text="Button to launch exercise.":::](https://microsoftlearning.github.io/Deploy-a-static-website-with-Azure-Blob-Storage/Instructions/Labs/6-clean-up-resources.html)

‎learn-pr/wwl-azure/guided-project-deploy-static-website-blob-storage/media/launch-exercise-button.png‎

4.46 KB
Loading

0 commit comments

Comments
 (0)