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

Websites are key to modern day businesses' success. While they are essential, the cost of keeping one up and running can be daunting and this is greatly felt by small business. Seeing as hosting companies charge an arm and a leg for simple static sites, by utilising tools from cloud services like AWS we can achieve highly available and low latency static websites which are easily accessible round the world all at the fraction of the cost, and let’s face it, those hosting companies web load speeds kind of suck.
 
Let’s begin with a brief intro to each service used and then we proceed to build out the architecture.
 

What is S3?

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. Customers of all sizes and industries can use Amazon S3 to store and protect any amount of data for a range of use cases. Amazon S3 provides management features so that you can optimise, organise, and configure access to your data to meet your specific business, organisational, and compliance requirements.
In essence, think of S3 as a massive hard drive in the cloud with unlimited storage space which you can put stuff in and only pay for what you use. You can read more about S3.
 

What is Route 53?

Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service. Route 53 connects user requests to internet applications running on AWS or on-premises. In essence a DNS turns domain names into IP addresses, which allow browsers to get to websites and other internet resources. You can read more about Route 53.
 

What is AWS Certificate Manager?

We use AWS Certificate Manager (ACM) to provision, manage, and deploy public and private SSL/TLS certificates for use with AWS services and your internal connected resources. ACM removes the time-consuming manual process of purchasing, uploading, and renewing SSL/TLS certificates. In essence these certificates ensure that the traffic and from your applications (websites) are secure. More about certificate manager.
 

What is CloudFront?

Amazon CloudFront is a content delivery network (CDN) service built for high performance, security, and developer convenience. It works by storing a copy of your application content at edge locations so it’s faster for your users to download and access them. This significantly speeds up application load time, more about cloudfront.
 
Now that we know about these services, let’s move on to utilising them in creating a highly available and low latency website.
 

Before we proceed, here are basic assumptions i have:

1. You have a copy of your website file (HTML, CSS, JS and their respective artefacts).
2. You have a working AWS Account.
3. You have registered a domain name with AWS Route 53 or have utilised the hosted zone feature to connect your domain to Route 53. If not learn how to register one on aws and i covered how you can connect an existing domain  

Alright let’s get started…
 

Image of the static website architecture
 

Creating the static website with S3

Step 1: You navigate to the search bar on the AWS console and search for S3. Click on it to move to S3 Console. Click on create bucket next.

 
Step 2: Input the name of the bucket and ensure it’s the same as the domain name you purchase so example.com domain should be represented as example.com bucket name. Select a region you prefer. Since we would be using cloudfront you can pick anyone. Leave all the defaults and proceed to create the bucket.
 
Step 3: Click the name of the bucket to navigate into it and click upload to upload the static website files from the folder they are stored. Don’t upload the folder, only the files in the folder. You can also drag and drop the files into s3. Wait for the upload to complete and navigate back to the bucket.


 
Step 4: We will then need to configure our bucket so it is publicly available for our CloudFront to access. We can do this by making the bucket publicy accessible and pasting a policy statement into the Bucket Policy.
 
To do that we go to permissions, click edit on Block public access (bucket settings) uncheck the checkbox and click save changes.

 
Next you scroll to bucket policy and click edit. We then paste the policy below.

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

Make sure to edit the bucket name to match your bucket name.
 
You can make use of aws policy generator to generate your's.
 
We now have a publicly accessible bucket. And it should be indicated at the top of the bucket name.
 
Step 5: We’ll also need to enable static website hosting under properties section, scroll to the bottom and select Static website hosting, click on edit, select enable.

 
You will be presented with the option to input your index file and error file. Do so and ensure they are correctly spelt. Click save changes and a static site url would automatically be generated for you.

 
Yay! You now have a fully functioning static website on AWS. But we are not stopping there right.

Creating a Certificate

Navigate to certificates manager from the AWS search bar.

 
Click request certificate

 
Provide the details for the domain name and make sure to leave DNS validation on.

 
You get a screen like this, showing pending validation.

 
Click into it and you should see the CNAME name and CNAME values you need to validate with Route 53.

 
Navigate to the hosted zone of your domain in Route 53 and click add records to your domain. Ensure the value is type of CNAME then copy the CNAME name into the subdomain removing the .yourwebsite.com. Also copy the CNAME value into the values box. It should look like this.

 
Give it a few minutes and the certificate would be issued.

 
Our next step is to make the website globally distributed with CloudFront.

Set up Cloudfront Distribution

Navigate to cloudfront from AWS search bar.

 
Click create a cloudfront distribution

 
Provide details for the origin by selecting your S3 bucket

 
Change viewer protocol policy to Redirect HTTP to HTTPS

 
Select your SSL certificate from the dropdown list and click create distribution

 
Give it a few minutes and your distribution should be created. You can verify by copying the link and testing out.

Point Domain to our CloudFront distribution

Navigate back Route53 and select your hosted zone for your domain.
 
Then click on add record.
 
This time we are creating an A record, make sure the alias is checked on. Then select your cloudfront distribution and hit save.
 
Give it a few minutes and you should have a working website that is secure and globally accessible.
 
Yay!! You did it and i'll see you around..