Static Websites and Custom Domains Using S3 and Route 53

You have a website that needs to display a few images, as well as your content. It doesn't need to collect user data like their names, email, and password, nor does it need to upload profile images. It's simple, which is why this lab will show you how to use Amazon Simple Storage Service (S3) to host your site.

You also have a custom domain that you want to use for this website. Once we've hosted your site on S3, we'll use Amazon Route 53 to ensure that users can find it using your chosen domain.

In order to acquire these skills, we're going to build a pet adoption site that displays some text and a few images. Then we're going to route a custom domain to this website in order to make it easier for users to discover your site.

Goals to Complete
Prerequisites
Uploading Images and a Static Site Using Amazon S3
Creating an Alias Record for a Static Site Using Route 53
Completed Goals
Cleanup
Stretch Goals
Go Further

Goals to Complete

By the end of this lab, you will:

Create a bucket for storing images using Amazon S3.
Create a bucket for hosting a static website using Amazon S3.
Route a custom domain to an S3 bucket using Amazon Route 53.

Prerequisites

Before using S3 to host a static website or using Route 53 to create alias records for this site, a few steps will need to be taken:

We will be using Route 53 to create alias records that will map the S3 static website bucket to a custom domain. But if you haven't already, you'll need to register a custom domain with Route 53.
If you don't have images you can use for this lab, download one or more public domain images. You can use an app like pixabay.com to do so. Since we'll be creating a pet adoption site, you may prefer to download pics of pets or animals.

Create an HTML page. Using applications like Notepad on Windows or TextEdit on macOS, create a file called index.html. Expand the section below and paste paste the following code in that file:

Expand for index.html template

This HTML will render a basic user interface for a pet adoption static site (note that there are two IMAGE_LINK placeholders toward the bottom where we will paste image links later):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pet Adopt</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
            font-family: Arial, Helvetica, sans-serif;
        }
        .title {
            text-align: center;
        }
        .main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pet-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;

        }
        .subtitle {
            padding-bottom: 10px;
            font-size: x-large;
            font-weight: 600;
        }
        img {
            max-width: 400px;
        }

        @media screen and (min-width: 721px) {
            .main-container {
                flex-direction: row;
            }
        }
    </style>
</head>
<body>
    <h1 class="title">Adopt a Pet Today</h1>
    <div class="main-container">
        <div class="pet-container">
            <div class="subtitle">Cats</div>
            <div>
                <img src="IMAGE_LINK">
            </div>
        </div>
        <div class="pet-container">
            <div class="subtitle">Dogs</div>
            <div>
                <img src="IMAGE_LINK">
            </div>
        </div>
    </div>
</body>
</html>

This lab will also describe how to create an optional custom error page using a file called 404.html. The following HTML can be used for this page:

Expand for 404.html template

This HTML will render a basic user interface for a 404 error page:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>404</title>
     <style>
         body {
             display: flex;
             flex-direction: column;
             align-items: center;
             padding: 30px;
             font-family: Arial, Helvetica, sans-serif;
         }
         .title {
             margin-bottom: 0;
             text-align: center;
             font-size: 72px;
         }
     </style>
 </head>
 <body>
     <h1 class="title">404</h1>
     <h2>Not Found</h2>
 </body>
 </html>

Finally, small charges may be incurred for storing objects during this lab, but we will delete our work at the end (see the Cleanup section) in order to keep these charges to a few cents or less.

Now that these prerequisites have been completed, we can turn our attention to S3.

Uploading Images and a Static Site Using Amazon S3

Amazon S3 is an object storage service that offers many features. But what is an object? It's a sequence of bytes, typically in the form of a file such as images, data, backups, etc. This means we can use containers called "buckets" for storing different types of objects. In this lab, we'll use one bucket to store our images and another to host our static website.

Creating a bucket for images

Sign in to the AWS Management Console.
Go to the Amazon S3 console.
Click on the Create bucket button.
In the General configuration section, type "pet-adopt-images" in the Bucket name field. This name must be unique, so you may need to alter it until it is accepted.
We need to make it possible to allow public access, so in the Block Public Access settings for this bucket section, uncheck Block all public access. After doing this, check the box next to I acknowledge that the current settings might result in this bucket and the objects within becoming public.
The other default settings are good for our purposes, so click the Create bucket button at the bottom.
After being redirected to the General purpose buckets list, click on the name of the bucket that was just created.
To upload an image to the bucket, either click one of the Upload buttons and follow the directions, or drag and drop the image over the Objects section. Then click the Upload button at the bottom. Once these have been uploaded, click the Close button in the upper-right, which should display the bucket's main page.
Click on the Permissions tab.
In the Bucket policy section, click on the Edit button.
We want to allow everyone (i.e., the public) to get objects from this bucket, so in the Policy field, paste in the following JSON object, replacing BUCKET_NAME with the name of the bucket (e.g., pet-adopt-images):
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}
```
In a previous step, we edited the block public access settings, which made it possible to use a policy to determine who exactly could access this bucket.
Click the Save changes button at the bottom.
Go back to the Objects tab and click on the Name of the image.
In the Object overview section, copy the Object URL and paste it in a new browser tab. Your image should now display!
In the index.html file, there are two IMAGE_LINK placeholders. Replace the first one with your image's Object URL.

To upload another image, follow steps 7 and 8. And then add it to the index.html using step 15.

Creating a bucket to host a static site

If you're not already signed in to the AWS Management Console, do that now.
Go to the Amazon S3 console.
Click on the Create bucket button.
In the General configuration section, type "pet-adopt.com" in the Bucket name field. This name must be unique, so feel free to alter it until it is accepted.
We need to make it possible to allow public access, , so in the Block Public Access settings for this bucket section, uncheck the Block all public access. After doing this, check the box next to I acknowledge that the current settings might result in this bucket and the objects within becoming public.
The other default settings are good for our purposes, so click the Create bucket button at the bottom.
After being redirected to the General purpose buckets list, click on the name of the bucket that was just created.
Click on the Properties tab.
In the Static website hosting section, click on the Edit button.
Choose the Enable option.
In the Index document field, enter "index.html".

(Optional) To create a custom error page for the static site, enter "404.html" in the Error document field.
Click on the Save changes button at the bottom.
Click on the Permissions tab.
In the Bucket policy section, click on the Edit button.
We want to allow everyone (i.e., the public) to get objects from this bucket, so in the Policy field, paste in the following JSON object, replacing BUCKET_NAME with the name of the bucket (e.g., pet-adopt.com):
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}
```
In a previous step, we edited the block public access settings, which made it possible to use a policy to determine who exactly could access this bucket.
Click the Save changes button at the bottom.
Click on the Objects tab.
In the Prerequisites section above, we created an index.html file. To upload this file to the bucket, either click one of the Upload buttons and follow the directions, or drag and drop the file over the Objects section. Then click the Upload button at the bottom.

(Optional) If a custom error page was defined in step 12 above, repeat the previous step with the 404.html file.

Once the files are uploaded, click the Close button in the upper-right.
Click on the Properties tab.
In the Static website hosting section, there will be a URL that should look something like this: http://pet-adopt.com.s3-website-us-west-1.amazonaws.com. Copy it and paste it into a new browser tab. Your site should now display!

Knowledge Check

Use the following prompts to test your knowledge of the concepts covered in this lab. Expand each question for the answer.

What is the S3 container that stores objects called?

A bucket

What purpose did each of our S3 containers serve?

One bucket was used to store images. The other bucket was used to host our static site, including storing our HTML files.

What is the difference between enabling public access and adding the bucket policy we used for our S3 buckets?

Enabling public access made it possible to allow public access, but the policy actually specified who could access the bucket.

To use an analogy, enabling public access installs a locked door to the bucket. It's still locked, but at least there's the possibility of access now. The bucket policy, on the other hand, determines who is allowed to go through the door. In this case, our policy configured the bucket so that anyone could go through at any time.

Creating an Alias Record for a Static Site Using Route 53

We have our static website being served up at a URL that looks something like http://pet-adopt.com.s3-website-us-west-1.amazonaws.com. But this is not an easy address to remember. Instead, we want to provide a simpler domain that will then route to our static website bucket.

How do we do this? By using the Domain Name System (DNS) routing functionality in Route 53. The DNS is a lookup system that maps domains to IP addresses. So, in this lab, we will route a domain like pet-adopt.com to our static website's IP address.

Let's get started:

If you're not already signed in to the AWS Management Console, do that now.
Go to the Amazon Route 53 console.
In the left-hand navigation, click on Hosted zones.
In the list, click on the name of the custom domain that you registered in the Prerequisites section above (if it was not already registered).
Click the Create record button.
To the right of Quick create record, click on Switch to wizard. (If you see Switch to quick create, then you're already in the wizard.)
In the Routing policy section, choose the Simple routing option. Then click the Next button at the bottom.
In the Simple routing records to add... section, click the Define simple record button.
Leave the Record name field empty for this record.
In the Record type dropdown, choose A – Routes traffic to an IPv4 address and some AWS resources if it isn't already selected.
In the Value/Route traffic to section, use the Choose endpoint dropdown to select Alias to S3 website endpoint.
Use the Choose Region dropdown to select the same region that is associated with the static website S3 bucket.
Click inside the Enter S3 endpoint search field. Select the correct endpoint, which should display in a list below the field. It will follow a pattern like this: s3-website.us-east-1.amazonaws.com (bucket-name). So, for example, if the Region is Ohio and the bucket name is pet-adopt.com, the list should display s3-website.us-east-2.amazonaws.com (pet-adopt.com). The wizard will only find this endpoint if 1) the bucket name and the domain name are exactly the same, 2) the region of the bucket matches the region selected in the wizard, and 3) the bucket has been configured for static website hosting.
Set Evaluate target health to No.
Click the Define simple record button.
Click the Create records button.
Keep refreshing until the Status is INSYNC.
Open a new browser tab and type in your custom domain. Your domain should now display your static site!

(Optional) If you created a custom error page, add /404.html to the end of your domain and hit enter. For example, http://pet-adopt.com/404.html.

Knowledge Check

Use the following prompts to test your knowledge of the concepts covered in this lab. Expand each question for the answer.

Which Route 53 functionality did we use for our static website (excluding any steps taken in the Prerequisites section)?

We used Route 53 for Domain Name System (DNS) routing.

How does this Route 53 functionality work?

The Route 53 Domain Name System (DNS) routes a domain to an IP address.

In our lab, Route 53 is routing a domain like pet-adopt.com to our static website's IP address.

Completed Goals

Now that you've completed this lab, you have experience:

Creating a bucket for storing images using Amazon S3.
Creating a bucket for hosting a static website using Amazon S3.
Routing a custom domain to an S3 bucket using Amazon Route 53.

Cleanup

In order to avoid being charged for using these services during this lab (or at least keeping the charges to a minimum), let's delete the resources we created:

Emptying and deleting S3 buckets

If you're not already signed in to the AWS Management Console, do that now.
Go to the Amazon S3 console.
Click on Buckets in the left-hand navigation.
A bucket can only be deleted if it's empty, so select one of the buckets that you created during this lab.
Click the Empty button.
Follow the directions by typing "permanently delete" in the provided field.
Click the Empty button.
Go back to the General purpose buckets list and re-select the bucket.
Click the Delete button.
Follow the directions by typing the name of the bucket in the provided field.
Click the Delete bucket button.
Repeat these steps for each bucket that was created during this lab.

Deleting Route 53 records

If you're not already signed in to the AWS Management Console, do that now.
Go to the Amazon Route 53 console.
Click on Hosted zones in the left-hand navigation.
Click on the Hosted zone name of the domain used during this lab.
Select the records created during this lab (i.e., the records with A in the Type column).
Click the Delete record(s) button.
In the pop-up modal, click the Delete button.

Stretch Goals

If you'd like to get more practice with these services, here are a few items that can improve your static website even further:

Add more images to the image bucket and update the index.html file to display them.
Configure another bucket and another Route 53 record to redirect a subdomain (e.g., www.pet-adopt.com) to your root domain and bucket (pet-adopt.com). The idea is to create a bucket that redirects to the existing bucket and then create a record that points to this new bucket. If you get stuck, expand the instructions below.

Create an S3 Bucket that Redirects to a Static Website Bucket

Create an S3 Bucket that redirects to the static website bucket

Follow the same directions from the Creating a bucket to host a static site section. But instead of naming the bucket pet-adopt.com, include the "www" subdomain in the name (e.g., www.pet-adopt.com).

Then, after choosing Enable in the Static website hosting section, select Redirect requests for an object from the Hosting type options. In the Host name field, enter the name of the bucket that is storing the static website files (e.g., pet-adopt.com) so that this bucket can redirect to the pet-adopt.com bucket.

Otherwise, the directions for enabling public access and defining a bucket policy are the same.

Create a Route 53 record that routes to the redirect bucket

Follow the same directions from the Creating an Alias Record for a Static Site Using Route 53 section. The only difference is that, instead of leaving the Record name field empty, enter "www".

Otherwise, the configuration directions are the same.

Go Further

To make your static website more widely available and to use the https protocol, use CloudFront.

micahwierenga/static_site_s3_route_53_lab.md

Static Websites and Custom Domains Using S3 and Route 53

Contents

Goals to Complete

Prerequisites

Uploading Images and a Static Site Using Amazon S3

Creating a bucket for images

Creating a bucket to host a static site

Knowledge Check

Creating an Alias Record for a Static Site Using Route 53

Knowledge Check

Completed Goals

Cleanup

Emptying and deleting S3 buckets

Deleting Route 53 records

Stretch Goals

Create an S3 Bucket that redirects to the static website bucket

Create a Route 53 record that routes to the redirect bucket

Go Further