Create Static Website on S3

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!

SSL Certification

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,” complete the steps, and come back

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
  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:::example-bucket/*"
    ]
    }
    ]
    }

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

Create a new CloudFront Distribution

  1. Go to CloudFront and create a new distribution
  2. Get the Endpoint URL from S3 as Origin Domain Name instead of the bucket from the dropdown menu
  3. Set the SSL cert to the certificate just verified with ACM
  4. This will also take a while to go through

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 distribution.

  1. Create A record for domain.com and point it to the S3 bucket for domain.com
  2. Create A record for www.domain.com and point it to the www.website.com CloudFront distribution you just created
  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. 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 EC2How to set up a WordPress site on EC2

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.