Host a Static Website on S3 + CloudFront

For modern single-page applications (SPAs), documentation portals, and static blogs built with React, Next.js, or Hugo, deploying to heavy virtual servers is often unnecessary and costly. The gold standard architectural pattern for static site hosting in cloud engineering combines **Amazon S3** for infinitely scalable object storage with **Amazon CloudFront** as a global Content Delivery Network (CDN).

This architecture ensures lightning-fast global load times via edge caching, robust DDoS protection through AWS Shield, and enforced HTTPS encryption via custom SSL certificates—all while costing pennies a month. This comprehensive guide walks you through setting up, securing, and deploying a static website using S3 and CloudFront.

1. Understanding the S3 + CloudFront Architecture

A common security misconfiguration in early cloud setups was making S3 buckets publicly readable. In modern AWS architectures, **S3 buckets are kept 100% private**, and traffic is securely funneled exclusively through CloudFront using **Origin Access Control (OAC)**.

Edge Caching: CloudFront caches your static assets (HTML, CSS, JS, images) across hundreds of global Edge Locations worldwide, serving users from the closest possible geographic point.
Origin Access Control (OAC): Restricts direct S3 bucket URL access so that visitors must pass through CloudFront, preventing bypassing of security and caching rules.
SSL/TLS Termination: Integrates with AWS Certificate Manager (ACM) to provide free, auto-renewing SSL certificates for custom domain names.

2. Step 1: Creating and Configuring the S3 Bucket

First, create an S3 bucket to hold your static production build files using the AWS CLI. Ensure public access is completely blocked.

              
            
C

            
            # Create an S3 bucket in us-east-1
aws s3api create-bucket \
    --bucket codecrown-static-hosting-bucket \
    --region us-east-1

# Block all public access settings
aws s3api put-public-access-block \
    --bucket codecrown-static-hosting-bucket \
    --public-access-block-configuration \
    "BlockPublicAcls=true,IgnorePublicAcls=true,BlockPublicPolicy=true,RestrictPublicBuckets=true"
          

3. Step 2: Uploading Your Static Build Files

Once your static project export (e.g., Vite, Next.js static output, or HTML bundle) is generated, sync the files directly to your S3 bucket.

              
C

            # Sync local build output folder to S3 root
aws s3 sync ./dist s3://codecrown-static-hosting-bucket --delete

4. Step 3: Setting Up CloudFront with Origin Access Control (OAC)

Create a CloudFront distribution pointing to your S3 bucket origin. Configure CloudFront OAC to automatically update your S3 bucket policy so that only CloudFront can read your files.

              
C

            # Example CloudFront OAC creation snippet via AWS CLI
aws cloudfront create-origin-access-control \
    --origin-access-control-config \
    '{"Name": "S3-OAC-Policy", "Description": "OAC for static hosting", "SigningProtocol": "sigv4", "SigningBehavior": "always", "OriginAccessControlOriginType": "s3"}'

Make sure to configure your CloudFront behavior's **Viewer Protocol Policy** to *Redirect HTTP to HTTPS*, and set your default root object to `index.html` to handle clean URL routing for single-page applications.

Conclusion

Hosting static websites on S3 fronted by CloudFront provides an invincible combination of speed, security, and virtually infinite scalability. By locking down S3 buckets with Origin Access Control and leveraging global CDN caching, developers can deploy production-ready web applications with minimal operational overhead.