Creating S3 static website distributed by Cloudfront

This is one of the easiest hands on exercises in AWS. I'll be elaborating on each step right from getting a free domain to getting the website up and running.

Creating a free domain

If you are just learning and want to save few bucks, I would suggest opting for a free domain. Go to DOT TK, find yourself a free domain such as .ml, .ca, .tk etc. Once you click on checkout should auto-redirect you to Freenom, if not go to Freenom and register yourself on the site through Gmail/Facebook.
Go to the Service>Register New Domain and enter the free domain found in Dot tk site. On clicking Continue, change period from 3 Month @free to 12 Months@Free and continue to accept the Terms and Conditions & complete the order.

I have used Amazon Route 53 as a hosted zone for this domain, hence one has to create a hosted zone with the exact same name as the top level domain(TLD) e.g. example.com .This gives you the name of 4 Domain name servers provided by your Route53 .

On Freenom click on Service>My Domains> ManageDomain> Management Tools>Nameservers, select Use custom servers and enter each of the NS records given by Route53 in an order in NameServer1, NameServer2, etc and click on Change Nameservers. These changes take approx. 24hrs to reflect. Recheck the Nameservers tab post 24 hrs, you can see the Route53 NS records reflecting.

SSL certificate for domain

Go to FreeSSL, create an account, click on New Certificate, enter your TLD name e.g. example.com (this certificate will work for www version of domain as well e.g. www.example.com).
Select validity of 90 days and go for the free option in Finalise Order.

Select DNS CNAME option for verification, enter the CNAME & related details given by the sslforfree site as a record in the Route 53 hosted zone created for your TLD. Then click on verify and in few mins the verification is complete and a certificate will be issued to you.

ACM: Importing SSL certificate

In your Amazon account, go to ACM, select the region as us-east-1(Cloudfront distribution's look for certificates in us-east-1 only).
Click on import certificate, download & unzip the SSL zip file obtained from sslforfree site above. Open & copy content into the relevant fields under certificate details as mentioned below

certificate.crt -> Certificate Body
private.key -> Certificate Private Key
ca_bundle.crt -> Certificate chain

click on Next and a record will be created.

S3 bucket creation

Create 3 buckets-

1. first bucket's name = TLD e.g. example.com
2. second bucket's name = www version e.g. www.example.com
3. Bucket for capturing logs

Mark all 3 buckets as private so that the bucket as well as its contents are not accessible by the public.
Change the logging bucket ACL(Access Control List) as LogDeliveryWrite.
Enable website hosting in the first bucket and give the root and error document details. Upload the index.html & error.html post creation.
Second bucket will be used for redirection to the first bucket so that if any user types https://www.example.com he will be directed to https://example.com. Select Redirect request option and enter first bucket's name in the Host name.
Select protocol as https as we are going to use SSL certificate.

CloudFront Distribution

Create 2 CloudFront distributions for each of the two S3 buckets.

• Origin domain = bucket name
• select the "Yes Use OAI" option, create or select an existing OAI.
• select the "Yes, update the bucket policy option".
• In Settings, select the SSL certificate record from ACM as created above.
• Enable Standard Logging, enter the name of the 3rd bucket and give different log prefix if both the distribution write logs to the same logging bucket.

Note: While creating the CloudFront distribution for the 2nd bucket(redirection one) remember to manually enter the domain name exactly same as the website endpoint of the bucket(found under Properties->Static website hosting-> bucket website endpoint of the bucket) as the default S3 bucket selection does not provide the correct name which leads to AccessDenied error.

Route53 records

Similar to the 2 buckets, create two Alias records in hosted zone

1. TLD record -> points to the cloud front distribution for the origin domain same as the TLD S3 bucket.
2. www record -> CloudFront distribution for the origin domain same as www domain S3 bucket.

This ensures that when user hits https://example.com on the browser, Route 53 routes the call to the corresponding CloudFront distribution which in turn invokes the S3 bucket configured and shows the static website hosted. This image is what my website looks like:

Once done & if no longer needed, please clean up/delete all the resources created above. Route 53 will incur charges on a monthly basis for the new hosted zone , so delete unwanted zones and records.