How to Host a Static Website in AWS

This article will briefly describe how to host a static website using a S3 Bucket for storage and Route 53 service for routing. I will use a domain provided by Google Domains in this example.

Prerequisites:

Purchase a domain
Setup an Amazon AWS Account

Purchase a Domain

The first step is to go to a domain provider and purchase a domain. I have chosen Google Domains because it is easy and they provide some good information on the process of choosing, buying, and setting up a domain. Otherwise, I would suggest GoDaddy as an alternative.

Setting the Static Website at AWS

1 - Create and Configure S3 Buckets

Log into the AWS Console, go to S3 Services and create two buckets. One for the your-domain.com and another for www.your-domain.com. You can find instructions to create a S3 Bucket in here.

Upload your files to the your-domain.com bucket, this will be your root domain bucket. The requests for the www.your-domain.com will be redirected to the root domain bucket.

Configure the permissions for the your-domain.com bucket where you are hosting your files. Go to the Permissions tab and inside the Bucket Policy paste the code bellow replacing the your-domain.com with your domain name. Go here for more details on how to setup your bucket policy.

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

Configure the buckets for website hosting by selecting the your-domain.com bucket. Go to properties and choose Static website hosting and mark the option “Redirect requests”, type in the name of the target bucket as your-domain.com, then Save.

Configure the website redirect by selecting the www.you-domain.com bucket. Go to properties and choose Static website hosting and mark the option “Use this bucket for host a website” then Save.

2 - Configure Route 53

In the AWS Console select Route 53 under Network and Content Delivery. Inside Route 53:

Create a Hosted Zone. Click on the blue button “Create Hosted Zone”
Inside the box, enter in your domain name without the www (e.g. your-domain.com)
Once you’ve created a Hosted Zone, you will be given default record sets (the cluster of 4 NS-type). You will need to create two additional custom record sets.
Clicking on “Create Record Set” will bring up a box on the right hand side. Inside the box, enter “www” in the Name field, select Yes for Alias, and set your Alias Target to point to your S3 bucket name (in the Endpoint url, the bucket name is the information after your domain name —something like s3.website.{{region}}.amazonaws.com)
Create another Record Set, but this time, leave the “Name” field empty so it will point to your-domain.com, not www.your-domain.com

3 - Configure the Google Domain

Log into Google Domains and click on “My domains”. Select “Use Custom Name Servers” instead of the default Google Domains. Copy and paste each Name Server (NS) from the Route 53-Record Sets panel into a new line. Google Domains will remove the ending period that is included in the Route 53 record. Save your your modifications when done.

Conclusion

In the end you will have a static website with files hosted in AWS S3 routed to Google Domain using AWS Route 53.

References

Setting up a Static Website Using a Custom Domain Date Accessed: 2017-10-14
How To: Connecting Google Domains to Amazon S3 Date Accessed: 2017-10-14

Setup a Static Website in AWS