Hosting a Static Website on AWS Using S3, CloudFront, and Route53, with Just 7 Steps

Looking for an easy, fast, and reliable way to host your static website? Say hello👋 to AWS S3 and CloudFront, Services offered by Amazon Web Service(AWS)! And with Route53's DNS routing capabilities, directing traffic to your website has never been so smooth, with this your visitors can access your website by simply typing your domain name into their web browser, for example, olumoko.live. Now let's get started with the perfect hosting solution.

At the end of this baby steps article, You will be able to host a static website on AWS by deploying the website on Amazon S3, Serving the website contents with Amazon CloudFront to improve website speed, reliability, cost-effectiveness, security, and using Amazon Route53 to route traffic to the CloudFront distribution serving your website contents.

Prerequisites

• Have an AWS account, if you don't have one yet, register here.
• To Be familiar with DNS and how it works, click here to have a deeper knowledge of DNS and Route53.
• Have a custom domain name, for example, olumoko.online, click here to register a custom domain name in Amazon Route53 or Click here to get a custom domain name on Godaddy.
• Get your Website files (HTML) ready, If you don't have any then check here and copy one of the many examples.

What is a Static Website?
Static websites are websites that consist of fixed contents, typically HTML, CSS, and JavaScript files, that are served to all visitors exactly as stored, it does not change based on user interactions, and without any backend or database processing.

What is Amazon S3?
Amazon S3(Simple Storage Service) is a cloud-based storage service provided by AWS, it allows users to store and retrieve data over the Internet. it provides a scalable, reliable, and highly available storage infrastructure for a variety of data types, including object storage, files, documents, and multimedia content.

What is CloudFront?
CloudFront is a Content Delivery Network(CDN) service also provided by AWS, it enables users to deliver content globally with low latency, high data transfer speed, and securely delivered.
leveraging AWS edge locations around the world to cache and deliver content from the nearest location to the user, reducing latency and improving performance.
It also offers features such as SSL/TLS encryption, access controls, and real-time metrics.

What is Route53?
Route53 is a highly available and scalable cloud-based DNS service offered by AWS, It allows you to route traffic to resources such as CloudFront, EC2 instances, S3 buckets, and Elastic Load Balancers.

What is AWS Certificate Manager?
AWS Certificate Manager (ACM) is a service by AWS that makes it easy to provision, manage, and deploy SSL/TLS certificates for use with AWS services and your applications.
SSL/TLS certificates are used to establish a secure connection between a web browser and a web server, and to protect sensitive information like credentials and payment details by encrypting the data.

Now come with me and let’s get this done in 7 steps!

1. Creating an S3 Bucket for Static Website Hosting

On your AWS console, search for S3, and on the S3 dashboard "Create bucket", enter a globally unique name for the bucket as no two persons can use the same, and specify your preferred region.

then uncheck the "block all public access" and check the acknowledgment, then leave the rest of the configuration as default.

Note: I only unchecked this so we can test that our website can also be accessed just being hosted on S3, but we will turn it off as soon as confirm it works because Leaving "Block all public access" Unchecked makes your website content and data accessible to anyone on the public internet, including hackers and other malicious actors which makes it unsecured.

2. Uploading Website Content to S3

Click on your S3 bucket, click on Upload, then click on " add files", Select and upload your website files(HTML files).

3. Configuring S3 Bucket Permissions for Website Access

Click on the permission tab in your S3 bucket, click on edit permission, and paste the below Json configuration:

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

Replace the "YOUR_BUCKET_NAME" in the configuration with your bucket name and click on save.

4. Enabling Static Website Hosting on S3

Click on the propriety Tab in your S3 bucket, scroll down to locate, and click on "static hosting", by default it is disabled, click on enable static hosting, follow the configuration in the snapshot, and save.

So we have successfully hosted our website in S3 so scroll down and you would find a "Bucket website endpoint", copy it and paste it on your web browser and you can access your website.

...

I know you want to ask, “If our website works just by hosting on S3, why then do we need CloudFront?” Well, You will notice our website has a "Not Secure” tag which means even though our website is now hosted in the cloud, it's not secured, for this reason, we need CloudFront to securely serve our website content to our visitors or users.

Now that our website works, on the S3 dashboard, click on propriety and check the "block all public access", save, and then continue with the steps.

5. Creating an SSL/TLS Certificate for CloudFront

On the AWS console search for AWS Certificate Manager(ACM), click on "Request a certificate", enter your customized domain name(In my case olumoko.online), selected DNS validation, and click on request.

Click on "View certificate"

Click on the certificate ID and click on "create records in route53", click on "create records" then wait while the status change from "pending validation" to "success".

If you check your domain name in route53,
you should find a new set record name "CNAME" and you are good to go with the ACM.

6. Configuring CloudFront Distributions for Website Delivery
On the CloudFront dashboard, click on "create CloudFront distribution", and select your S3 origin domain in the "origin domain" field.

Scroll down, and enter your domain name in the "Alternate domain name(CNAME)" field then select your certificate manager in the "Custom SSL certificate" field, and the "Default root object" field, type your website HTML file (index.html) then click on "create a distribution".

...

In your distribution dashboard, click on "General", copy your CloudFront "Distribution domain name" and paste it into your web browser to access your website fully secured.

...

And now you have another question “Our website works and it’s secured, so why do we need Route53?” One out of many reasons to use Route53 is because it won't be easy for visitors to remember the CloudFront endpoint when trying to access your website, right? So using a custom domain name for your website makes it easier for your users to remember and access your website, now we can all agree "olumoko.online" is way easier to remember than a CloudFront endpoint.

7. Configuring Route53 for DNS Management
In the Route53 dashboard click on the hosted zone, click on your domain name, and "Create record".
For the record turn on your alias, set your record type, set your routing policy, and "Route traffic to" field select your CloudFront "Distribution domain name".

Once you create your records, click on View status to know when your domain name is ready to be used to access your website.

If your status is "INSYNC" means you can now access your website using your custom domain.


Hurray! Your visitors can now access your website by simply typing your custom domain name into a web browser, fast, easy and secured.

Conclusion
Easy! right? congratulations! you've successfully hosted your static website on AWS in just 7 steps, AWS S3, CloudFront, and Route53 offer a powerful combination of services for Hosting, Caching, and DNS management, making hosting your website on AWS reliable and cost-effective.
Thank you for following this guide to the end, and cheers to more hosting🥂.