AWS S3 Static Website Hands-On Lab for Cloud and DevOps Engineers

📝Introduction

This post will cover the creation and configuration of a Static website using AWS S3 Bucket. We will go through configuring that static website with a custom error page.

📝Log in to the AWS Management Console

Using your credentials, make sure you're using the right Region. In my case, I chose us-east-1.

📝GitHub repository

Go to the GitHub repo to copy the code, using this link. Kindly select each one of the files in the code area, and click RAW. Then select Save Page As, and save them locally on your computer as error.html and index.html.

Note: If you are using Safari as your web browser, ensure you remove .txt from the end of the filename. Also, ensure the Format is Page Source. When asked whether you want to save the file as plain text, click Don't append.

📝Create AWS S3 Bucket

In the AWS Management Console, navigate to S3 and click Create Bucket.

Kindly set the following values:

Bucket name: Add a name for your Bucket and ensure to make it globally unique.
Region: Check if it is set to your previously selected Region
In the Block Public Access settings for this bucket section, un-check Block all public access.

Ensure all four permissions restrictions beneath it are also unchecked. Check the box to acknowledge that turning off all public access might result in the bucket and its objects becoming public.

Leave the rest of the settings as their defaults. Click Create Bucket.

Click on your Bucket name and click Upload. Then Add the 2 files previously saved from the GitHub repo.

Leave the rest of the settings as their defaults. Click Upload. Then click Close in the upper right.

📝Enable Static Website Hosting in AWS S3 Bucket

On the main page of S3 Bucket, click on the Properties tab. Then Scroll to the bottom of the screen to find the Static website hosting section.

On the right in the Static website hosting section, click Edit. On the Edit static website hosting page, set the following values:

Static website hosting: Select Enable.
Hosting type: Select Host a static website.
Index document: Enter index.html.
Error document: Enter error.html.

Click Save Changes.

In the Static website hosting section, open the listed URL in a new browser tab. Once opened, a 403 Forbidden error message must be displayed.

📝Apply AWS S3 Bucket policy

Back in S3 Bucket, click on the Permissions tab. Then in the Bucket policy section, click Edit.

Above the code entry box, copy the Bucket ARN. On the right, click Policy generator.

Select the following values:

Select Type of Policy: Select S3 Bucket Policy.
Effect: Select Allow. Principal: Enter *.
Actions: Select GetObject.
Amazon Resource Name (ARN)*: Paste the name you added earlier followed by /* so the policy applies to all objects within the bucket.
Click Add Statement > Generate Policy.

Copy the displayed policy, go back to the Bucket policy screen and add the following JSON statement (replacing <BUCKET_ARN> with your Bucket ARN):

i.e. Bucket Policy

{
    "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. Click Save Changes.

Refresh the browser tab with the Static Website (the URL you opened earlier). This time, the site should load correctly.

Add /* at the end of the URL and/or some random letters (anything that's knowingly an error). This will display your error.html page.

Note: Please, do not forget to delete all resources at the end of your Hands-On Lab.

Congratulations — you have completed this hands-on lab covering the basics of creating and configuring an AWS S3 Static Website.

Thank you for reading. I hope you were able to understand and learn something helpful from my blog.

Please follow me on Hashnode and on LinkedIn franciscojblsouza