Loading....

Creating a Static Website in Azure Storage

Home / Storage / Creating a Static Website in A..../

Lab
Cloud Vendor Microsoft Azure
Proficiency Level Cloud Enthusiast
Tags Azure StorageStorage BlobWeb Server

Summary

In this lab, you will provision a Microsoft Azure Storage Account and create a static website in it. You will upload static web pages and images to the storage blob that is used for the static web site and will test that the content is served properly.

Each exercise below builds upon the previous one. You should start each new exercise from the last step of the previous exercise unless it is explicitly written otherwise.

Learning Objectives

After completion of this lab, you will be able to:

  • Provision an Azure Storage Account
  • Create a static website in the newly provisioned Azure Storage Account
  • Upload content to the static website
  • Test the static web site
  • Delete the Storage Account

Prerequisites

To complete this lab, you will need the following:

  • Reliable internet connection
  • A work, school or personal Microsoft Account used to access Microsoft Azure Management Portal
  • A subscription for Microsoft Azure

Exercise #1: Creating Azure Storage Account

In this exercise, you will provision a Microsoft Azure Storage Account.

Steps

  1. Sign into the Microsoft Azure Management Portal at http://portal.azure.com using your Microsoft Account
  2. Click on in the upper left corner right under the logo
  3. In the search box search for Storage account and press Enter
  4. Click on the button
  5. On the Basics tab in section, Project Details fill in the following information
    Subscription → <select your Microsoft Azure subscription>
    Resource group → Create new
    Resource group name (the text field in the pop up) → storagelab01-rg
  6. On the Basics tab in section, Instance Details fill in the following information
    Storage account name → [first name][last name initial]lab01str
    Region → West US 2
    Performance → Standard
    Account kind     → StorageV2 (general purpose V2)
    Replication     → Locally-redundant storage (LRS)
    Access tier     → Hot
  7. Click on the button
  8. On the Networking tab in section, Network connectivity fill in the following information
    Connectivity method → Public endpoint (all networks)
  9. Click on the button
  10. On the Advanced tab, leave everything as default
  11. Click on the button
  12. On the Tags tab, add the following tags:
    Role → static web
    Lab → storagelab01
    Owner → <your name>
    OwnerEmail → <your email>
  13. Click on the button
  14. Review the summary and click on the button
  15. Wait until the deployment is completed
  16. Once the deployment is completed, click on in the left-hand menu list
  17. Find the storagelab01-rg resource group in the list and click on it
  18.  Milestone step:  At this point, you have learned how to provision a Storage Account in Microsoft Azure. Verify that you have the following resources in your storagelab01-rg resource group:
    [first name][last name initial]lab01str Storage account

Exercise #2: Create a Static Website in Azure Storage Account

In this exercise, you will create a Storage Blob Container that you can use to host a static web site.

  1. Click on the [first name][last name initial]lab01str Storage Account resource
  2. From the Overview blade, click on the button in the left side navigation for the Storage Account
  3. On the Static website blade, change the Static website toggle button to Enabled
  4. Fill in the following information in the form that appears
    Index document name → index.html
    Error document path → error.html
  5. Click on the button
  6.  Milestone step:  At this point, you have learned how to create a static web site in your Storage Account in Microsoft Azure.
  7. Click on the button next to the Primary endpoint field
  8. Open a new browser window and paste the copied URL into the address bar
  9.  Milestone step:  At this point, you have learned how to access the static web site you created in your Storage Account by using your browser.

Exercise #3: Upload Content to the Static Website in Azure Storage Account

In this exercise, you will upload content to the static website.

  1. Create a new file on your local machine with name index.html and the following content 
    <!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Azure Storage</title>
    </head>
    <body>
        <h1>My Static Website</h1>
        <p>Hello, I am a static web site hosted in Azure Storage.</p>
    </body>
</html>
  2. Create a new file on your local machine with name error.html and the following content 
    <!DOCTYPE html>
<html>
    <head>
        <title>Ooops... error!</title>
    </head>
    <body>
        <h1>An error occured</h1>
        <p>Ooops, it seems that we encountered an error or you are trying to access the wrong page.</p>
    </body>
</html>
  3. Take a screenshot of the text editor you used to create the above two files and save it on your local machine with the following name ide-screenshot.png
  4. Click on the button in the left side navigation for the Storage Account
  5. Click on the $web container
  6. Click on the button on top of the blade
  7. Click on the button next to the Files field on the Upload blob blade
  8. Select the index.html, error.html, and ide-screenshot.png files from your local machine and click on the button
  9.  Milestone step:  At this point, you have learned how to upload content to the static web site in your Storage Account in Microsoft Azure.
  10. Click on the toddysmlab01str - Containers in the breadcrumbs on top of the page
  11. Click on the button in the left side navigation for the Storage Account
  12. Click on the button next to the Primary endpoint field
  13. Open a new browser window and paste the copied URL into the address bar
  14.  Milestone step:  At this point, you have learned how to access the home page of the static web site you created in your Storage Account by using your browser.
  15. Add the following to the end of the URL in your browser’s address bar and click Enter
    /foo
  16.  Milestone step:  At this point, you have learned how to the static web site you created in your Storage Account handles errors.
  17. Remove the /foo from the URL in your browser’s address bar and add the following
    /ide-screenshot.png
    Click Enter.
  18.  Milestone step:  At this point, you have learned how to the static web site you created in your Storage Account can handle other static content like images.

Exercise #4: Delete the Azure Storage Account

In this exercise, you will delete the Azure Storage Account to save costs.

  1. Click on the toddysmlab01str in the breadcrumbs on top of the page
  2. Click on the button on top of the page
  3. Type the name of the Storage Account in the field and click on the button
  4.  Milestone step:  At this point, you have learned how to delete your Storage Account to save cost.

Last Update: October 8, 2019  

October 8, 2019 1101 Toddy Mladenov  Storage  Azure Storage , Storage Blob , Web Server
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Related Knowledge Base Posts -

Back To Top