Design and Deploy a Static Website with AWS S3 and CloudFront

INTRODUCTION
In today's fast-paced digital landscape, businesses require websites that are fast, scalable, and globally accessible. AWS (Amazon Web Services) provides an excellent solution using Amazon S3 (Simple Storage Service) for static content hosting and Amazon CloudFront (Content Delivery Network) for optimized global delivery. This blog explores how to design and deploy a static website using AWS S3 and CloudFront. AWS S3 and CloudFront.

Let begin with little explain on Amazon S3 and Amazon CloudFront

What is AWS S3
Amazon S3 is an object storage service that offers industry-leading scalability, data availability, security, and performance. You can use Amazon S3 to store and retrieve any amount of data at any time, from anywhere.

What is AWS CloudFront
Amazon CloudFront is a content delivery network (CDN) service that helps you distribute your static and dynamic content quickly and reliably with high speed.

SCENARIO for the Task
A local business needed a cost-effective, highly available, and globally accessible website to showcase its services. Instead of using traditional web hosting, AWS S3 and CloudFront provided an efficient and scalable solution. This setup ensures:

• Low latency due to caching at CloudFront edge locations.
• High availability with S3 storage redundancy.
• Cost efficiency by paying only for what is used.

Architecture Overview
The Architecture shows how the Static Website is design and deploy for users in order to access it. During the deployment of the static website the CloudFront was unable to access due to internal issue on Amazon Web Service.

Steps to Deploy a Static Website on AWS S3 & CloudFront

1. Create an S3 Bucket

• Log in to AWS Console and navigate to S3.
• Create a new bucket and name it (e.g., s3-cloudfront-static-site).
• Disable Block Public Access (if not using CloudFront OAC).
• Enable Static Website Hosting and specify index.html as the default document.

2. Upload Website Files

• Upload index.html, style.css, script.js, and other necessary files.
• Ensure the files are in the root directory (not inside a subfolder).

3. Configure Bucket Policy for CloudFront

• To ensure secure access via CloudFront, update the bucket policy:

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

** 4. Create a CloudFront Distribution **

• Navigate to CloudFront in AWS.
• Click Create Distribution and set S3 bucket as the origin.
• Enable Origin Access Control (OAC) for security.
• Configure caching settings and save the distribution.
• Copy the CloudFront Domain Name (e.g., https://d123abc.cloudfront.net).

Testing the Deployment

• To test the deployment:
• Open the CloudFront URL in your browser.
• Check if the index.html page loads correctly.
• Ensure CloudFront caching is working by monitoring load speeds.

The Deployed site is working perfectly

Benefits of Using AWS S3 & CloudFront
✅ Fast global delivery using CloudFront edge locations.
✅ Highly scalable with automatic redundancy.
✅ Secure access using OAC and S3 policies.
✅ Cost-effective with pay-as-you-go pricing.

Conclusion

Deploying a static website with AWS S3 and CloudFront is an efficient and scalable way to host websites. It ensures fast content delivery, security, and high availability. By following this approach, businesses can provide an optimal user experience with minimal operational costs.

🚀 Next Steps: Try deploying your own static website using AWS and optimize it further with Route 53 for custom domains!