Hosting a Static Website on AWS Using S3, CloudFront, and Route53, with Just 7 Steps
Tags: aws, html, s3, route53
Published: 2023-05-08 22:48:38

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_.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pwkubkcplpi7p0bindu.png)
**Prerequisites**
* Have an AWS account, if you don't have one yet, register [here](https://portal.aws.amazon.com/billing/signup?nc2=h_ct&src=header_signup&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email).
* To Be familiar with DNS and how it works, click [here](https://dev.to/aws-builders/understanding-dns-and-amazons-route-53-cloud-service-a-beginners-introduction-4jkc) to have a deeper knowledge of DNS and Route53.
* Have a custom domain name, for example, **olumoko.online**, click [here](https://aws.amazon.com/getting-started/hands-on/get-a-domain/) to register a custom domain name in Amazon Route53 or Click [here](https://www.godaddy.com/en-uk/domains) to get a custom domain name on Godaddy.
* Get your Website files (HTML) ready, If you don't have any then check [here](https://www.w3schools.com/html/html_basic.asp) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q88xpwkbs4mtcqu3ay6.png)
then uncheck the "block all public access" and check the acknowledgment, then leave the rest of the configuration as default.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyziry6s2sz9utexa2je.png)
**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).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f36mbhpz2ndcsqsvhgwo.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/446kt9zx6prtjai299m7.png)
_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._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1czvmtodofcztt0zskn.png)
...
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnl6rtm9t2r8i48lbo3b.png)
**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62jlegkf60joit74mf72.png) 
Click on "View certificate" 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3eu08g4ttmsinsev809q.png)
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". 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sappauhu6hytdjirteh1.png)
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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvbwk41dahgo3xg8ubzk.png)
**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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3t9wix3h9fig9rw8smp.png)
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"**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkos3n2971rsoqe273iq.png)
...
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek6e7mwsx18rvr6ergxf.png)

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swd3jdmj5791mmem4l32.png)
...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y66p8cbfmarajh0rk835.png)
**_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".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rubgv1jwxfsab99qor9.png)
Once you create your records, click on View status to know when your domain name is ready to be used to access your website.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm35pndbye8t65la5gys.png)
If your status is "INSYNC" means you can now access your website using your custom domain.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if2lonktff54xfqq0eao.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fncxmxidmah8ctplgsbl.png)
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🥂.