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. When creating the bucket, remember to uncheck the S3 Block Public Access settings. Upload the code for the static site. You will find the code (index.html and error.html) in the following GitHub repository: https://github.com/ACloudGuru-Resources/Course-Certified-Solutions-Architect-Associate/tree/master/labs/creating-a-static-website-using-amazon-s3

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.

You must ensure that the S3 Block Public Access settings are disabled on the bucket, so that the files in the bucket can be made publicly readable.

Apply Bucket Policy

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

Note that AWS will not permit you to create the policy if the S3 Block Public Access settings are still enabled on the bucket.

After disabling the 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 . You will find these files in the following GitHub repository: https://github.com/ACloudGuru-Resources/Course-Certified-Solutions-Architect-Associate/tree/master/labs/creating-a-static-website-using-amazon-s3 .

Note: When creating the bucket, uncheck all four checkboxes on step 3 — Set Permissions. If you skip this step, you will not be allowed to create the bucket policy later. 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):

{
    "Version": "2012-10-17",
    "Id": "Policy1645724938586",
    "Statement": [
        {
            "Sid": "Stmt1645724933619",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "<BUCKET_ARN>/*"
        }
    ]
}
>**Note:** Ensure the trailing `/*` is present so the policy applies to all objects within the bucket.
  1. Click Save changes.

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?