Set up a static website on AWS using S3, Route 53, CloudFront, and Certificate Manager

Here, we’ll set up a static website (think HTML and CSS and no moving parts) hosted on S3, which can be accessed by your own domain, domain.com, protected with SSL (think https:// instead of http://).

Anyone who types in domain.com on their browser will be forwarded to https://www.domain.com so that you can have that fancy “Your connection is secure” lock!

If you are completely new to AWS, I recommend you take a look at the Intro to AWS for Newbies eBook before you embark on this.  If you just want to figure out how to create that static website, read on!

We will go over setting up the website where the domain name is registered through Route 53 and where it’s registered using a 3rd party registrar like Namecheap.

Setting up Website with domain registered at Route 53

Purchase domain in question using Route 53

1. Go to Route 53 and purchase a new domain for $12 by following the prompts
2. If you are purchasing your domain from another registrar, go to “Setting up Website with External Domain Registrar” at the bottom of this page, complete the steps, and come back to continue

Request SSL certificate from AWS Certificate Manager (ACM)

1. Go to AWS Certificate Manager (ACM) and request a certificate for www.domain.com
2. Include domain.com as another domain to protect with the same certification
3. Select DNS Validation and validate via “Create record in Route 53“
4. Confirm after 30 minutes or so that validation was completed

Create the website in S3

I went over how you can upload a static website on S3 here: How to host a Static Website with S3

1. Go into S3 and create 2 buckets: domain.com and www.domain.com
2. Set domain.com S3 bucket to redirect to www.domain.com
   
   1. Protocol should be set to https
3. The website will be hosted in the www.domain.com S3 bucket
4. In the www.domain.com bucket, set Bucket Policy to THIS:
   {
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::www.domain.com/*"
]
}
]
}

Here’s AWS’s documentation on how this would work: Setting up a Static Website using Custom Domain

Create new CloudFront Distributions

1. Go to CloudFront and create a new distribution
   1. Choose “Web” for delivery method
   2. Get the Endpoint URL for domain.com S3 bucket to set as Origin Domain Name instead of the bucket from the dropdown menu
      1. Go to… S3 -> Bucket Name -> Properties -> Static website hosting
      2. Looks something like: http://xyzwxyz-12rdklfj3e-us-east-1.s3-website-us-east-1.amazonaws.com
         
         
   3. Set the SSL cert to the certificate just verified with ACM
   4. Make all HTTP redirect to HTTPS
   5. Enter domain.com as CNAME
   6. Leave everything else as default
   7. This will also take a while to go through
2. Create another CloudFront distribution for www.domain.com with same settings
   1. Enter www.domain.com as CNAME

Here’s AWS’s documentation on how to create this distribution: Speed Up Your Website with Amazon CloudFront

Create A records in Route 53

Go back to Route 53 and create A Records to point to the new CloudFront distributions.

1. Create A record for domain.com and point it to the CloudFront distribution for domain.com
2. Create A record for www.domain.com and point it to the CloudFront distribution for www.domain.com
3. Both can be found in the dropdown under “alias”

Here’s AWS’s documentation on how this works: Using Route 53 for DNS

Setting up Website with External Domain Registrar

Sometimes, the domain extension is not a TLD supported by AWS, so we register using 3rd party like Namecheap.  Or you just bought your domain at another registrar, and don’t want to transfer it over to AWS because it’s cheaper.

1. 1. Purchase domain in question at the 3rd party registrar
   2. Go to Route 53 and create a new Hosted Zone for domain.com
      1. Copy over the Name Server (NS) values (there are 4 of them) from Route 53’s Hosted Zone into the domain registrar’s DNS server settings
   3. Go back up to the previous section and pick back up at “Request SSL Certificate from ACM“

And that’s it! You can replace the S3 with an EC2 instance, and create the same set up for WordPress if you’d like!

Here’s a tutorial on how you can create a WordPress site on EC2: How to set up a WordPress site on EC2

What Does the Architecture Look Like?

I was streaming this setup on Twitch, and I realized it’ll be nice to have a diagram of the architecture of what we’re building!

We’ve set up 2 sets of CloudFront distributions and S3 buckets to route all different kinds of traffic to all eventually end up at https://www.domain.com.

Below, you can see how the redirects are working for all different ways someone might try to access your website using different combinations of www. and http:// and https://.