Theory & Background

Create S3 bucket (name must match domain: catb.in). Enable Static Website Hosting: index document = index.html, error document = 404.html. Upload site files. S3 bucket policy: allow public read on all objects. Cache headers via metadata: HTML files (Cache-Control: no-cache), CSS/JS/images (Cache-Control: max-age=31536000 for 1 year, immutable). File naming strategy: hashed filenames (bundle.abc123.js) for versioned assets with long cache.

Components & Requirements

10 components required for this project.

#	Component	Purpose	Qty
1	AWS S3 bucket	Static file storage	x1
2	AWS CloudFront	Global CDN distribution	x1
3	Route 53	DNS management	x1
4	AWS Certificate Manager	Free TLS certificates	x1
5	GitHub Actions	CI/CD for automatic deployment	x1
6	AWS CLI	Deployment automation	x1
7	s3cmd or aws-cli v2	S3 sync with cache headers	x1
8	Lambda@Edge	Request/response manipulation at edge	x1
9	WebPageTest	Performance testing from global locations	x1
10	Lighthouse CLI	Core Web Vitals performance audit	x1

Step-by-Step Implementation

Follow these 3 steps carefully.

1

S3 Static Website Hosting

Create S3 bucket (name must match domain: catb.in). Enable Static Website Hosting: index document = index.html, error document = 404.html. Upload site files. S3 bucket policy: allow public read on all objects. Cache headers via metadata: HTML files (Cache-Control: no-cache), CSS/JS/images (Cache-Control: max-age=31536000 for 1 year, immutable). File naming strategy: hashed filenames (bundle.abc123.js) for versioned assets with long cache.

2

CloudFront Distribution Configuration

Create CloudFront distribution. Origin: S3 website endpoint (not bucket directly — enables proper error handling). Cache behaviors: default (/): forward no headers/cookies, compress (gzip/brotli auto). TTL: 86400 (24h for HTML — short for updates), 31536000 (1 year for versioned assets). Error pages: 404 → /404.html. Price class: all edge locations (global) or US+Europe (cost savings). Custom domain: add catb.in and www.catb.in. ACM certificate for HTTPS. CNAME record to CloudFront domain.

3

Lambda@Edge for Security Headers

Lambda@Edge runs your code at 400+ CloudFront edge locations. Use case: add security headers to all responses without modifying origin server. Create Lambda function with origin-response trigger. Add headers: Strict-Transport-Security: max-age=31536000; includeSubDomains, Content-Security-Policy, X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Referrer-Policy: no-referrer, Permissions-Policy. Deploy to Lambda@Edge (us-east-1 only, replicated globally). Google Lighthouse Security score: 100/100 with proper headers.

Code & Implementation

Core code for deploy_cdn.sh:

deploy_cdn.sh
  Shell

#!/bin/bash # CATB.in CDN Deployment Script  BUCKET="catb.in" DISTRIBUTION_ID="E1234567890ABC" BUILD_DIR="./dist"  echo "Building site..." # npm run build  # Your build command  echo "Deploying to S3..." # HTML files: no-cache (short TTL) aws s3 sync $BUILD_DIR s3://$BUCKET --delete \   --exclude "*" --include "*.html" \   --cache-control "no-cache, no-store, must-revalidate" \   --content-type "text/html; charset=utf-8"  # Assets with hash in filename: 1 year immutable cache aws s3 sync $BUILD_DIR s3://$BUCKET --delete \   --exclude "*.html" \   --cache-control "public, max-age=31536000, immutable"  echo "Invalidating CloudFront cache for HTML files..." aws cloudfront create-invalidation \   --distribution-id $DISTRIBUTION_ID \   --paths "/*.html" "/index.html"  echo "Waiting for invalidation..." INVALIDATION_ID=$(aws cloudfront create-invalidation \   --distribution-id $DISTRIBUTION_ID \   --paths "/*" \   --query 'Invalidation.Id' --output text) aws cloudfront wait invalidation-completed \   --distribution-id $DISTRIBUTION_ID \   --id $INVALIDATION_ID  echo "Deployment complete!" echo "Testing performance..." curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\\nTotal: %{time_total}s\\n" https://catb.in/

Testing & Troubleshooting

Test CDN and Static Site Deployment by verifying each subsystem individually before full integration.

!

Troubleshooting Tips

Verify power voltages, check ground connections, use serial monitor for debug.

Real-World Applications

*Static website global distribution

*Software download distribution

*Video streaming delivery

*Game asset delivery

*API response caching at edge

*Mobile app binary distribution

*Documentation and knowledge base

*E-commerce product image delivery

Extensions & Next Steps

Implement image optimization at edge using Lambda@Edge or Cloudflare Workers
Build real-user monitoring (RUM) for Core Web Vitals collection
Add A/B testing at CDN edge without backend changes
Implement edge side includes (ESI) for partial page caching
Build a multi-CDN strategy for maximum availability

Interactive Playground

Coming Soon

An interactive simulator will be available here — simulate circuits and run code in-browser without hardware.

Frequently Asked Questions

What is the difference between a CDN and a web server?

Web server: serves content from a single location (data center). User in Australia accessing a New York server: 150–300ms latency due to distance. CDN (Content Delivery Network): copies content to 400+ PoPs (Points of Presence) globally. User in Australia served from Sydney PoP: 5–20ms latency. CDN also handles: DDoS absorption (distributed capacity), TCP optimization (persistent connections to origin, pre-warmed TCP), and automatic compression. CDN is ideal for static content (HTML, CSS, JS, images, videos). Dynamic content (personalized, real-time) requires origin server.

Introduction