Skip to main content

Creating a Static Website Using Amazon S3

Hands-On Lab

 

Photo of Mark Richman

Mark Richman

AWS Training Architect II in Content

Length

01:00:00

Difficulty

Intermediate

In this live AWS hands-on lab, we will create and configure a simple static website. We will go through configuring that static website with a custom error page. This will demonstrate how to create a very cost-efficient website hosting for sites that consist of files like HTML, CSS, JavaScript, fonts, and images.

What are Hands-On Labs?

Hands-On Labs are scenario-based learning environments where learners can practice without consequences. Don't compromise a system or waste money on expensive downloads. Practice real-world skills without the real-world risk, no assembly required.

Creating a Static Website Using Amazon S3

Introduction

In this hands-on lab, we will create and configure a simple static website.

Solution

Log in to the live AWS environment using the credentials provided. Make sure you're in the N. Virginia (us-east-1) region throughout the lab.

The code for the static site is here.

Create S3 Bucket

  1. Navigate to S3.
  2. Click Create bucket, and give it a globally unique name (e.g., "my-bucket-" with a series of random numbers at the end, like "8675309").
  3. Select the US East (N. Virginia) region.
  4. Click Next.
  5. Leave the options on the next screen as their defaults, and click Next.
  6. Under permissions, uncheck all four permissions restrictions. (If you skip this step, the bucket policy will have no effect.)
  7. Click Next.
  8. Click Create bucket.
  9. Select bucket name.
  10. Click Upload.
  11. Click Add files, and upload your own or those from the sample website.
  12. Click Upload.

Enable Static Website Hosting

  1. Click the bucket name.
  2. Navigate to Properties > Static website hosting.
  3. Select Use this bucket to host a website.
  4. For Index document, enter index.html.
  5. For Error document, enter error.html.
  6. Click Save.

Apply Bucket Policy

  1. Navigate to Permissions > Bucket policy.
  2. Add the following JSON statement (replacing <my-bucket> with your bucket name):

    {
     "Version":"2012-10-17",
     "Statement":[{
        "Sid":"PublicReadGetObject",
        "Effect":"Allow",
        "Principal": "*",
        "Action":["s3:GetObject"],
        "Resource":["arn:aws:s3:::<my-bucket>/*"]
      }]
    }

    Ensure the trailing /* is present so that the policy applies to all objects within the bucket.

Conclusion

Congratulations on completing this hands-on lab!