How to host a static site in an S3 bucket with a custom Domain

Pre-requisites:

1. Have a static site made with pure HTML/CSS/JS or a framework like Bootsrap4.

*If you don’t have a static site you can download this template to get started quickly.

*There are great bootstrap resources around GetBoostrap StartBootstrap Bootsnipp

2. Own a domain You can buy one directly from AWS or from other Domain Registrars such as Namecheap or Godaddy.

6 STEPS

1. Change your DNS service to AWS Route53
2. Create a Public S3 Bucket to Host your Static Site
3. Create an A Alias record for your root bucket
4. Create another bucket to reroute requests from www to your root domain
5. Create another alias record for your www subdomain
6. Upload your site to the s3 bucket

STEP 1 Change your DNS service to AWS Route53

*If you purchased your domain in AWS you can skip this step.

Go to the AWS management console Services -> route53 https://console.aws.amazon.com/route53

Click on hosted zones

Click on create Hosted Zone

Enter the name of your root domain and an optional description — type: public hosted zone

Namecheap

In your domain list, go to your domain list, look for your domain and click on manage.

On the domain on options, you’ll see the NAMESERVERS section, click on the dropdown and change it from Namecheap BasicDNS to Custom DNS.

Copy the 4 name server names

GoDaddy

In your products page go to your domain list, look for your domain and click on DNS. Scroll down to Nameservers, click on choose your new nameserver type and click custom. Copy the 4 domains. Remember to eliminate the dot at the end of name server.

STEP 2. Create a Public S3 Bucket to Host your Static Site

Create an S3 bucket with the name of your root domain (example.com)

Once inside your bucket, click on permission -> Public access settings

On the table at the bottom, click Edit at the top right

Uncheck all the boxes and click save.

In the modal, type confirm and click confirm.

Now click on the Bucket Policy button, and paste the following for the bucket policy: please change ‘your-domain’ for your actual domain name and click save.

{
 “Version”: “2012–10–17”,
 “Statement”: [
 {
 “Sid”: “PublicReadGetObject”,
 “Effect”: “Allow”,
 “Principal”: “*”,
 “Action”: “s3:GetObject”,
 “Resource”: “arn:aws:s3:::your-domain.com/*”
 }
 ]
}

Still in permissions, go to CORS configuration and paste the following for your CORS configuration:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>Content-Length</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Now go to the properties tab and click on the tab that says static website hosting and select Use this bucket to host a website. Type in the names for your index and error documents (usually index.html and error.html).

Click save

STEP 3 Create an A Alias record for your root bucket

Go to route 53 -> hosted zones and click on your newly created hosted zone

Click on create Record Set

Leave name blank and leave type as A- IPv4

In Alias: Check the Yes radio button

For Alias Target: you should see the newly created bucket show up as the only option. Select it.

Click create.

STEP 4 Create another bucket to reroute requests from www to your root domain

Create an S3 bucket like you did in the first place and give it add a www to the domain name (www.example.com).

Go to your newly create bucket and click on properties -> static website hosting

Check the redirect requests radio button

Under target bucket or domain enter the name of your root domain (example.com)

Click save

STEP 5 Create another alias record for your www subdomain

go back to route53, click on the hosted zone you created earlier.

Click on create Record Set

In Name: enter www

In Alias: Check the Yes radio button

For Alias Target: you should see the newly created www bucket show up as the only option, select it and click create.

STEP 6 Upload your site to the s3 bucket

Go to your S3 main bucket, click on upload button on the top left, drag and drop your folders and files and click upload on bottom left.

Select all files inside the project folder and drag and drop these (without the main project folder) your index.html file should be in the root of your s3 bucket.

P.S. folders will get created with an annoying unnecessary DS_Store file. Feel free to Delete this XD

You are done! Now you should be able to access your public website