Hosting a static website on S3 and using CloudFront to serve it.

In this blog, we will be setting up a Static Website on S3 and using CloudFront to serve the website across different regions and try to get some practical experience for S3 and AWS CloudFront

The blog is divided into three parts

Hosting a Static site on Amazon S3
Creating a domain Name in route53 (Optional- Step)
Using Cloudfront and Route53 for adding distribution network

In addition to this, we will also see how to use AWS Certificate Manager (ACM) to get an HTTPS SSL certificate for the site. So, let's get started

Hosting a Static site on Amazon S3

Create an s3 bucket with the same name as you want your resume/website to be say - testResume.com

Go to Properties of the s3 bucket scroll to the bottom-most part and edit the Static Website Hosting part to enable.

Unblock all public access under the permissions tab, this will allow the website to be accessed.

Upload the contents, index.html, error.html, etc

Go to permission and update the bucketLevel permission as below

{
    "Version":"2012-10-17",
    "Statement":[
      {
        "Sid":"PublicRead",
        "Effect":"Allow",
        "Principal": "*",
        "Action":["s3:GetObject"],
        "Resource":["arn:aws:s3:::examplebucket/*"]
      }
    ]
  }

Navigate to the link for static website under properties in the bucket click on it to see it opens in a new tab

Creating a DomainName on Route 53

If you want to host the site and have a proper domain name such as example.com you can use Route 53 for this. Any other domain name provider also can be used. Please do note that this is a paid service, in order to register your domain you need to pay based on the domain purchased and the other services used by Route 53. Details for the same can be found here.

Route 53 Pricing

You can follow the steps mentioned in this link to Register a new Domain using Route53 official documentation here Registering a new domain

Using Cloudfront for adding distribution network and HTTPS certificate for the static Site

Navigate to Cloudfront -> Create Distribution

Provide the domain name (let say example.com)

Fill in the details (mostly default values would do)
In the section Custom SSL certificate - optional- click on Request Certificate

Now once in ACM -> Certificate Screen -> Click on Request Public Certificate and click on Next

Enter the domain name
Select the DNS validation option(this is the best case if you use Route53 for the domain name)
Click on Request

Click on the certificate and Click on Create Record in route 53-> a cname record will be created in route53
Navigate to Route53 -> Hosted Zone
Click on Create Record ->Simple Routing

Provide the static site name, select record type as A,
Value route to, Select Alias to CloudFront distribution
Click on Choose Distribution and select the above-created distribution

Resources

docs.aws.amazon.com/AmazonS3/latest/usergui.. aws.amazon.com/cloudfront aws.amazon.com/premiumsupport/knowledge-cen..

anirban majumdar's blog