Deploy Your Static Website on AWS S3 with CloudFront CDN: An Illustrated Guide

Deploy globally distributed static websites with blazing fast performance using AWS S3 and CloudFront

---

Introduction

Deploying static websites with optimal performance across the globe can be challenging without proper infrastructure. With Amazon Web Services (AWS) S3 and CloudFront, you can host static websites with enterprise-grade reliability, lightning-fast load times, and automatic scaling. In this comprehensive guide, we'll walk through the entire process of deploying a professional static website on S3 with CloudFront CDN for global content delivery.

Complete project repository: Ahsan-bashir/AWS/tree/main/AWS-Website

---

Prerequisites

Before we begin, ensure you have:

• AWS account with appropriate IAM permissions

• Static website files ready for deployment (HTML, CSS, JS, images)

• Basic understanding of DNS and web hosting concepts

• AWS CLI installed (optional but recommended)

• Text editor for configuration files

---

Architecture Overview

Our deployment architecture follows AWS best practices for static website hosting:

Key Components:

• Amazon S3: Origin storage for website files

• CloudFront: Global CDN with 400+ edge locations

• Route 53: DNS management (optional)

Step 1: Setting Up AWS S3 Bucket

Launch S3 Configuration

1. Access AWS Management Console

   • Navigate to S3 service

     

   • Click "Create bucket"

2. Configure Bucket Settings

   

3. Enable Static Website Hosting

Configuring Bucket Permissions

Security configuration is critical for public website access while maintaining protection:

1. Disable Block Public Access

   

2. Create Bucket Policy

    # Navigate to: Bucket → Permissions → Bucket policy
    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
      ]
    }
   

Step 2: Preparing Your Website Files

Website Structure Implementation

Create a professional website structure that demonstrates various content types:

website/
├── index.html                 # Main homepage
├── about.html                 # Secondary pages
├── error.html                 # Custom 404 page
├── css/
│   └── style.css             # Responsive styling
├── js/
│   └── script.js             # Interactive functionality
├── images/
│   ├── banner.jpg            # Visual assets
│   └── logo.png              # Branding elements
└── documents/
    └── sample.pdf            # Downloadable content

Complete website source code with responsive design and interactive features: Available at: Ahsan-bashir/AWS/tree/main/AWS-Website

Uploading Files to S3

Method 1: AWS Console Upload

1. Select your S3 bucket
2. Click "Upload"
3. Add files and folders maintaining directory structure
4. Set permissions: "Grant public-read access" for each upload
5. Click "Upload

Testing S3 Website

Visit your S3 website endpoint to verify deployment:

You should see your website loading. Note the performance from your current location - we'll improve this significantly with CloudFront.

Step 3: Setting Up CloudFront Distribution

Create CloudFront Distribution

1. Navigate to CloudFront Console

   

2. Configure Origin Settings

    Origin Configuration:
    - Origin Domain: your-bucket-name.s3-website-us-east-1.amazonaws.com
    - Protocol: HTTP only (for S3 website endpoint)
    - Origin Path: Leave blank
    - Name: S3-website-origin
   

   

Configure Custom Error Pages

CloudFront Console → Your Distribution → Error Pages
Create Custom Error Response:
- HTTP Error Code: 404
- Response Page Path: /error.html
- HTTP Response Code: 404
- Error Caching Minimum TTL: 300

---

Step 4: Testing and Verification

Performance Validation

1. Test CloudFront Distribution

   

2. Performance Comparison

   as already saw in above images that Cloudfront is faster as compared to S3

3. Global Performance Testing (optional)

   Use these tools to test from multiple locations:

   • GTmetrix: Performance analysis

   • WebPageTest: Global load time testing

   • Pingdom: Uptime monitoring

Verify All Functionality

✅Website loads via CloudFront URL

✅All pages navigate correctly (index.html, about.html)

✅Images display properly

✅CSS styles applied

✅JavaScript functionality works

✅PDF downloads successfully

✅Custom 404 page displays for invalid URLs

Performance Results

Achieved Improvements

Load Time Comparison:

• S3 Direct Access: ~4.30 seconds (global average)

• CloudFront Distribution: ~1.58 seconds (global average)

• Performance Improvement: 75% faster loading

Conclusion

Congratulations! You've successfully deployed a high-performance static website using AWS S3 and CloudFront. This setup provides:

Technical Achievements:

• Global content delivery with <1 second load times

• 99.99% uptime SLA with automatic failover

• Intelligent caching optimization

• Cost-effective scaling within free tier limits

Production Benefits:

• Enterprise-grade reliability

• Global edge network coverage

• Zero infrastructure maintenance

• Seamless traffic scaling