Loading....

Creating a Static Website in Amazon S3

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

Lab
Cloud Vendor Amazon AWS
Proficiency Level Cloud Enthusiast
Tags AWSS3Web Server

Summary

In this lab, you will provision an Amazon S3 Bucket and create a static website in it. You will upload static web pages and images to the bucket 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 Amazon S3 Bucket
  • Create a static website in the newly provisioned Amazon S3 Bucket
  • Upload content to the static website
  • Test the static web site
  • Delete the Amazon S3 Bucket

Prerequisites

To complete this lab, you will need the following:

  • Reliable internet connection
  • A free AWS Account used to access the AWS Management Console

Exercise #1: Creating Azure Storage Account

In this exercise, you will create an Amazon S3 bucket that you will use to host your static web site.

Steps

  1. Sign into the AWS Management Console at https://aws.amazon.com/console/ using your AWS credentials
  2. In the Find Services search box, type S3, and press Enter
  3. On the S3 buckets page, click on the button
  4. Fill in the following information in the Create bucket → Name and region tab form:
    Bucket name → [first name][last name initial]s3lab01bkt
    Region → US West (Oregon)
  5. Click on the button
  6. On the Configure options tab, add the following tags for the bucket:
    Role → static web
    Lab → s3storagelab01
    Owner → <your name>
    OwnerEmail → <your email>
  7. On the Set permissions tab, clear the Block all public access checkbox and click on the button
  8. On the Review tab, review your entries and click on the button
  9.  Milestone step:  At this point, you have learned how to create an Amazon S3 bucket. Verify that you have the following resources in the buckets list:
    [first name][last name initial]s3lab01bkt

Exercise #2: Enable Static Website in Amazon S3 Bucket

In this exercise, you will enable the hosting of a static website in the Amazon S3 bucket.

Steps

  1. Clik on the [first name][last name initial]s3lab01bkt bucket from the list
  2. On the next screen, change to the tab
  3. Click on the Static website hosting tile
  4. Change the radio button selection to Use this bucket to host a website
  5. Fill in the following information in the form that appears
    Index document → index.html
    Error document → error.html
  6. Copy the Endpoint URL for your web site
  7. Click on the button
  8.  Milestone step:  At this point, you have learned how to create a static web site in your Amazon S3 Bucket.
  9. Open a new browser window and paste the copied URL into the address bar
  10.  Milestone step:  At this point, you have learned how to access the static web site you created in your Amazon S3 Bucket by using your browser.

Exercise #3: Upload Content to the Static Website in Amazon S3

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 Amazon S3</title>
    </head>
    <body>
        <h1>My Static Website</h1>
        <p>Hello, I am a static web site hosted in Amazon S3 Bucket.</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 tab for your Amazon S3 Bucket
  5. Click on the button
  6. On the Select files tab, click on the button
  7. Select the files from your local machine and click on the button
  8. On the Set permissions tab, select the following in the Manage public permissions section:
    Grant public read access to this object(s)
  9. Click on the button
  10. On the Set permissions tab, leave everything by default and click on the button
  11. On the Review tab, review your entries and click on the button
  12. Open a new browser window and paste the copied URL into the address bar
  13.  Milestone step:  At this point, you have learned how to access the home page of the static web site you created in your S3 Bucket.
  14. Add the following to the end of the URL in your browser’s address bar and click Enter
    /foo
  15.  Milestone step:  At this point, you have learned how to the static web site you created in your S3 Bucket handles errors.
  16. Remove the /foo from the URL in your browser’s address bar and add the following
    /ide-screenshot.png
    Click Enter.
  17.  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 Amazon S3 Bucket

In this exercise, you will delete the Amazon S3 Bucket to save costs.

  1. Click on Amazon S3 in the breadcrumbs on top of the page
  2. Select the [first name][last name initial]s3lab01bkt bucket from the list
  3. Click on the button above the list
  4. Type the name of the bucket and click on the button
  5.  Milestone step:  At this point, you have learned how to delete your Amazon S3 Bucket to save cost.

Last Update: October 8, 2019  

October 8, 2019   719   Toddy Mladenov    Storage    AWS , S3 , 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