Create a Static Website Using Amazon S3

30 minutes
  • 3 Learning Objectives

About this Hands-on Lab

In this 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 cost-efficient website hosting for sites that consist of files like HTML, CSS, JavaScript, fonts, and images.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Create S3 Bucket

Create an S3 bucket that begins with the name my-bucket (e.g., my-bucket-<ACCOUNT ID>) in the us-east-1 region, and upload the code for the static site.

Enable Static Website Hosting

You can use Amazon S3 to host a static website. On a static website, individual web pages include static content. They might also contain client-side scripts.

To host a static website on Amazon S3, configure an Amazon S3 bucket for website hosting, and then upload your website content to the bucket.

When you configure a bucket as a static website, you must enable website hosting, set permissions, and create and add an index document.

Apply Bucket Policy

To make objects in your bucket publicly readable, write a bucket policy that grants everyone s3:GetObject permission.

After you edit S3 Block Public Access settings, you can add a bucket policy to grant public read access to your bucket. When you grant public read access, anyone on the internet can access your bucket.

Additional Resources

Make sure you are in us-east-1 (N. Virginia) for the lab environment.

The 2 HTML files required from this lab can be downloaded by Saving As these 2 files: index.html and error.html .

Note: When creating the bucket, uncheck all four checkboxes on step 3 — Set Permissions. If you skip this step, the bucket policy will have no effect. If you made a mistake and created the bucket without unchecking the checkboxes, you may go to Bucket > Permissions > Public access settings > Edit, and uncheck all four restrictions. Then add a bucket policy, go to Bucket > Permissions > Bucket Policy, and add the following JSON statement (replacing <MY_BUCKET> with your bucket name):

     "Principal": "*",

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

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?