How to Host a Static Site on AWS S3 with CloudFront Integration

One of my developers created a website for our company's landing page. After finishing it, he asked me how to host the website on AWS. I decided to help him with the hosting process. Since our company website is a static site, I chose to host it on S3 and integrate it with CloudFront for CDN and caching.

Why use S3 with CloudFront?

Let me explain. S3 is used to store static website files such as HTML, CSS, JS, images, and fonts. Another important factor to consider is the cost. S3 is cost-effective because you only pay for storage and requests. I used CloudFront in front of S3 for CDN (Content Delivery Network) and caching. In this setup, I used AWS Certificate Manager for my domain's SSL. ACM provides a free SSL certificate for your domain, and it doesn't require manual renewal. It also offers easy validation with Route 53 or Cloudflare domains.

Phase 1 ( Create S3 for store static data )

Phase 2 ( Create ACM for SSL/TLS )

I request for

Phase 3 ( DNS validation with Cloudflare domain )

Phase 4 ( Configure CloudFront for CDN and caching )

I linked the CNAME record to CloudFront's distribution domain name in Cloudflare.

After linking the domain, I uploaded the static website data to S3.

You can see that the SSL certificate is valid for one year and is issued by Amazon.

After completing this lab, remember to delete these cloud resources.

I hope you learn how to host a static website on S3 and integrate it with CloudFront and SSL using the AWS ACM service. And you will learn how to connect a domain in the Cloudflare dashboard. Thank you for taking the time to read this article. Stay tuned and learn together. If you find my article useful, please kindly like and share it.