If you're hosting a static website in an S3 bucket and it's your first time buying a domain name, this simple guide is for you.

Summary - What You Need

Amazon S3

  • Have an S3 bucket with the same name as your domain name
  • Upload your website's code
  • Allow public access
  • Add a policy to enable S3 GetObject
  • Enable static website hosting

Domain Name provider

  • In your domain name's DNS Zone settings, delete all A records
  • In DNS Zone settings, add www to subdomain and the S3 endpoint in hostname for CNAME records

Let's go through these steps one by one.

Step 1: Create an S3 bucket

Create an S3 bucket to host your files for your website

First you need to create a bucket for your website. The name for your bucket must be the same as your domain name. Let's say we bought the domain name www.clarkngo.net. Then my S3 bucket's name should be www.clarkngo.net as well.

After configuration, my endpoint should look similar to this:

http://www.clarkngo.net.s3-website-us-west-2.amazonaws.com

Go to your AWS console and login. Choose S3.

  1. Click Buckets
  2. Click Create bucket
image-119

3. Add your domain name in the bucket name

4. You may choose any Region

Creating the S3 bucket and general configuration

image-118

Follow the checkboxes below and click Create Bucket.

Only tick the following:

  • Block public access to bucket and objects granted through new access control lists (ACLs)
  • Block public access to bucket and objects granted through any access control lists (ACLs)
image-120

Uploading files to the S3 Bucket

1. Click Overview and Upload.

image-121

2. Upload your website files in Select Files

image-122

3. For Set permissions, hit Next.

4. For Set properties, hit Next. (The default is Standard S3.)

5. For Review, hit Upload.

Editing the Bucket Policy

1. Click Permissions, then Bucket Policy.

image-123

2. Add the policy. (Note: For your website you'll change arn:aws::s3:::www.clarkngo.net/*)

image-124
{
    "Version": "2012-10-17",
    "Id": "Policy1548223592786",
    "Statement": [
        {
            "Sid": "Stmt1548223591553",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.clarkngo.net/*"
        }
    ]
}

3. Hit Save.

Static website hosting

1. Click Properties, then Static website hosting.

image-125

2. Choose Use this bucket to host a website.

3. For Index document, type index.html.

4. For Error document, type index.html.

5. Hit Save.

image-126

Step 2: Add the S3 Endpoint to your Domain

Editing your DNS Zone

  1. Login to your domain provider.
  2. In this example, choose Name Servers/DNS, then Modify DNS Zone (or the equivalent).
image-127

3. Remove all A records in your domain. Usually it will have a default IP address for a 404 Not Found page.

image-128

4. Add a CNAME to point to the S3 Bucket:

  • add www for the Subdomain.
  • add www.clarkngo.net.s3-website-us-west-2.amazonaws.com (the S3 Endpoint) to the Hostname.
image-129

And you're done! Note that it might take a while for your new settings take effect.

Connect with me in LinkedIn here.

image-133