🚀 Introduction
In this blog, I will walk you through the journey of how I used a robust and feature-rich Content Delivery Network (CDN) by Amazon CloudFront to improve the performance and reliability of a static website hosted on an S3 bucket. With the integration of CloudFront, it was possible to deliver content much faster to users around the world while ensuring low latency, high availability, and enhanced security. Whether you’re just starting with AWS or looking to optimize your existing setup, this blog will provide insights, practical tips, and lessons learned from my experience.
🔸What is Cloudfront
AWS CloudFront is a CDN(Content Delivery Network) which is a system of distributed servers. It is used to deliver web content like videos, applications, and APIs to users based on their geographical location with low latency and high transfer speeds. There are various examples of CDNs like Akamai, Cloudflare, AWS CloudFront, etc.
Amazon CloudFront is a content delivery network (CDN) service. It speeds up the delivery of your website’s content (like images, videos, or web pages) to users around the world.
🔸How it works:
Distributed Servers: CloudFront uses a network of servers located globally (called edge locations).
Content Delivery: When a user requests your content, CloudFront delivers it from the nearest edge location, reducing the delay.
Caching: It stores copies of your content at these edge locations to ensure faster delivery for future requests.
Example:
Imagine you have a website hosted in the USA. If someone in India visits your site, CloudFront fetches the content from a nearby edge location in India instead of the USA server. This improves speed and performance.
Create S3 Bucket after creating S3 bucket upload your code.
Remember block public access.
Enable Bucket Versioning. Bucket versioning keeps multiple versions of an object (file) in a bucket. This helps you track changes, recover previous versions, and protect against accidental deletions.
After creating bucket click on bucket name that you have created and go into properties scroll down at the bottom there is option named as Static Websiet Hosting, click on edit and enable it and also select host a static website under hosting type. After that write your file name ex- index.html and save changes.
After that comeback In objects and upload your code (file).
Copy that URL and paste it on google it will show error because we have kept block public access on (1st picture).
Now go in CloudFront and Create Distribution.
In origin choose select your S3 bucket that you have created.
Follow exactly the same as shown in the picture provided below.
Select Legacy access identities.
Create new OAI.
Select Yes, update the bucket policy under bucket policy. (After selecting this option you don’t need to write bucket policy it will update automatically)
Since we are doing a practical and not a real project, we will select the second option because if we select the other option, a bill will be generated. Select north America and Europe.
In Last modified, it will show Deploying. Have a patience it take some time to deploy. And after that copy the Distribution domain name URL and paste it on google.
🚀 Conclusion
In this blog, we explored how to host a static website on S3 and deliver it using CloudFront. With step-by-step guidance and images, we demonstrated the setup process—from creating an S3 bucket to configuring CloudFront for global content delivery. This approach ensures your website is highly available, secure, and performs efficiently across the globe. By following these steps, you can easily leverage the power of AWS for your static website hosting needs.
Thanks for reading to the end; I hope you gained some knowledge.❤️🙌