Hosting a Static Website on S3 and Configuring DNS with Route 53
Published: 2024-01-27 23:33:27

**Introduction**
I recently completed a project to learn more about Amazon S3 for static website hosting and using Route 53 for DNS management. In this post, I'll walk through the process and share what I learned.

**Creating an S3 Bucket**
First, I created an S3 bucket called "onyiwaters.site" in the US East (Ohio) region. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0swq8mji9h1cd0jjgwqc.PNG)

To enable static website hosting, I went into the bucket properties, selected the option for static website hosting, and entered "index.html" as my index document. This configures the bucket to render index.html when requests come to the website endpoint.

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

Next, I uploaded the website files including index.html, styles.css, script.js and images by dragging and dropping them into the S3 bucket.

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

To make the contents publicly accessible, I added a bucket policy granting public read permissions:

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

This allows anyone to access the files in the bucket while keeping the bucket itself private.

At this point I had a simple static website hosted on S3 with public access configured! Next I moved on to setting up DNS routing with Route 53.

**Setting Up Route 53**
Next, I registered a domain on Route 53 and created a hosted zone for onyiwaters.site.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36dnsejr55ar68sj3dzn.PNG)

I added an A record that routes traffic for the domain to the S3 endpoint URL. This directs requests to the S3 bucket that is hosting the static website. I also created an alias record that points to the S3 website endpoint specifically. Alias records provide a few benefits over regular A records:

- They automatically route requests to the website endpoint
- Alias records are native AWS integrations
- Using the S3 website endpoint improves performance

To test things out, I accessed my domain in the browser. The A record I created routed traffic to the S3 bucket successfully. However, I noticed that the URLs still contained the S3 endpoint hostname. When I switched to using the alias record, the URLs resolved cleanly to just my domain.

So the alias record provided the optimal configuration for routing traffic to my S3-hosted static site. I learned some key differences between A records and alias records in Route 53 through this project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v1wwah5aqqgw4v5xz9q.PNG)

**Key Learnings**
Some of my biggest takeaways were:
- Learning how S3 static hosting works
- Getting hands-on with Route 53 and DNS
- Comparing A vs Alias records

**Technical Skills**
This project allowed me to apply skills like:
- S3 static website configuration
- DNS and domain management
- IAM policies
- Basic frontend development

**GitHub Repo**
View the full code and docs for this project on GitHub: [S3 Static Site Repo](https://github.com/onyidominic101/onyiwaters.site)

**Enhancements**
In the future I could expand on this project by:
- Integrating a continuous deployment pipeline. I could set up GitHub integration with AWS CodePipeline to automatically deploy code changes from GitHub to S3.
- Adding a custom domain and SSL certificate for HTTPS access. This would involve registering a domain, creating an ACM certificate, and updating the bucket policy and CloudFront distribution.