Creating a Static Website with S3 - Part 1

What if I told you that you could host your website in the cloud but serverless. That's right, no webserver involved! Instead, we'll use a few AWS services, namely S3 buckets, Route53, AWS Certificate Manager (ACM), and CloudFront. Sound complicated? Don't worry; I'll walk you through it step by step.

Before we dive into it, though, know that this project comes from the Cloud Resume Challenge. It involves utilizing several more AWS services and creating everything as Infrastructure as Code (IaC) with a secure CI/CD pipeline. The website is only a portion of this project, and before we can start creating everything as code (including our website), it's best to manually walk through it and understand what we're doing and why. Plus, it makes this more accessible to those unfamiliar with AWS, IaC, CI/CD, etc.

Prerequisites

• AWS account (don't forget to enable MFA)

• Registered domain (for a custom URL)

• HTML & CSS code (for our static webpage)

Step 1 - Creating an AWS S3 Bucket for Static Website Hosting

AWS S3 Buckets are a fantastic and cheap way of storing large amounts of data in the cloud. They are also a great way of hosting a static website. Let's create the first S3 bucket and name it after your domain.

Next, configure Public Access as such. Keep in mind that by default, S3 buckets are not accessible publically. This setting here is a safeguard to prevent misconfigurations. We will still need a Bucket Policy configured later to allow public access.

Scroll down and create the bucket. Next, go into your bucket and upload your HTML and CSS files.

Next, go into your bucket properties, find Static website hosting and click edit. Check your settings below and save changes.

At the bottom of your S3 Properties section, you'll find your Bucket Website Endpoint. Click this link to open your webpage. Remember how I said S3 buckets are not public by default?

Step 2 - Configuring AWS S3 Bucket Policy

Let's fix that by creating a Bucket Policy. Go back to your S3 bucket, and this time, click on Permissions. Find where it says Bucket Policy and click Edit. Your policy should be as shown, replacing the Resource arn with your own. This policy allows Effect:Allow anyone Principal:* the ability to read the contents s3:GetObject of your S3 bucket arn:aws:s3:::tylerpettycloudresumechallenge.com/*

image.png

Code sample below.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR ARN HERE/*"
        }
    ]
}

Save the policy and reload the Bucket Website Endpoint. It should be visible now.

Step 3 - Creating our AWS S3 Bucket for Redirection Requests

If you add www to the front of your endpoint URL, you'll notice that the page fails to load. To fix this, create a second bucket, adding www to your domain name. Don't worry about changing any settings as we did for the last bucket.

Now, go into the new bucket's Properties, scroll down to Static website hosting and click on Edit. Adjust your settings as such, using your domain name, and save changes. Don't worry; your website endpoint for this bucket won't work yet. We'll fix that soon with DNS.

Recap

At this point, we've configured two AWS S3 buckets. We enabled static website hosting on one and enabled redirect requests on the other. You should be able to access your webpage using the Bucket Website Endpoint of the bucket named after your domain (not the one starting with www).

Since this post is getting lengthy, I'll break it into a few different parts. Continue to Part 2, where we'll configure DNS, which allows us to access our webpage at our domain name (including using www).