# Static Site Deployment on AWS S3 & CloudFront ![Static Site Deployment Architecture](https://d1.awsstatic.com/Projects/P4105033/architecture-Diagram.427a8e0e5fe83a7a78f7e4d8c1e0b1c5e7a1a0a8.png) A complete guide and template for deploying blazing-fast static websites on AWS infrastructure using S3 for storage and CloudFront as a global CDN. ## Features - High Performance: Global content delivery via CloudFront's CDN - Cost Effective: Pay only for what you use (often <$1/month for small sites) - Secure: Free SSL certificates via AWS Certificate Manager - Scalable: Automatically handles traffic spikes - Global Availability: 200+ edge locations worldwide ## Prerequisites - AWS account (Free tier eligible) - Static website files (HTML, CSS, JS, images) - Domain name (optional but recommended) - AWS CLI installed (optional but helpful) ## Step-by-Step Deployment Guide ### 1. Prepare Your Static Site Ensure your site works locally and all links are relative (not absolute). ```bash # Example structure your-site/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── script.js └── images/ └── logo.png

1. Navigate to AWS S3 Console
2. Click "Create bucket"
3. Enter a globally unique name (e.g., www.yourdomain.com)
4. Select region closest to your users
5. Uncheck "Block all public access" and acknowledge
6. Click "Create bucket"

1. Select your bucket in S3 console
2. Go to "Properties" tab
3. Scroll to "Static website hosting"
4. Click "Edit" and select "Enable"
5. Specify index document (typically index.html)
6. Click "Save changes"

1. Go to "Permissions" tab
2. Click "Bucket Policy"
3. Add the following policy (replace bucket name):

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::www.yourdomain.com/*" } ] }

You can upload manually via the AWS Console or use AWS CLI:

# Install AWS CLI if needed aws configure # Set up your credentials # Sync local files to S3 aws s3 sync ./your-site s3://www.yourdomain.com --delete

1. Navigate to CloudFront Console
2. Click "Create distribution"
3. Under Origin, select your S3 bucket
4. Important: Select "Yes use OAI" and create new OAI
5. Under "Default cache behavior", choose "Redirect HTTP to HTTPS"
6. Under "Settings", specify your domain name (if you have one)
7. Click "Create distribution" (Deployment takes ~15 minutes)

1. Request a certificate in AWS Certificate Manager
2. Add your domain (e.g., yourdomain.com and www.yourdomain.com)
3. Verify ownership via DNS or email
4. Update your CloudFront distribution to use this certificate

For Route 53:

1. Create a new hosted zone for your domain
2. Create an A record (Alias) pointing to your CloudFront distribution
3. For www subdomain, create CNAME or another A record

For other providers:

• Create CNAME record pointing to your CloudFront domain (e.g., d123.cloudfront.net)

Set up automatic deployments when you push to GitHub:

1. Create a new IAM user with S3 and CloudFront permissions

2. Add secrets to your GitHub repo:

   • AWS_ACCESS_KEY_ID
   • AWS_SECRET_ACCESS_KEY
   • AWS_S3_BUCKET
   • AWS_CLOUDFRONT_DISTRIBUTION_ID

3. Add this GitHub Action workflow (.github/workflows/deploy.yml):

name: Deploy to AWS on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: us-east-1 - name: Deploy to S3 run: |  aws s3 sync ./ s3://${{ secrets.AWS_S3_BUCKET }} --delete    - name: Invalidate CloudFront Cache run: |  aws cloudfront create-invalidation \  --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} \  --paths "/*"

1. S3 Storage: $0.023 per GB/month (first 50TB)
2. CloudFront:
   • $0.085 per GB data transfer out (first 10TB)
   • $0.010 per 10,000 HTTPS requests
3. Free Tier:
   • 1 TB of CloudFront data transfer out
   • 2 million CloudFront requests
   • 5 GB of S3 storage

Estimated costs for small sites: <$1/month

Issue: 403 Forbidden when accessing site

• ✅ Verify bucket policy allows public read access
• ✅ Check if objects are publicly accessible in S3

Issue: Changes not appearing

• ✅ CloudFront cache takes time to invalidate (default 24h)
• ✅ Manually invalidate cache in CloudFront console

Issue: Mixed content warnings

• ✅ Ensure all resources use HTTPS URLs
• ✅ Set up proper redirects from HTTP to HTTPS

1. In S3 static hosting settings, specify error document (e.g., 404.html)
2. In CloudFront, create custom error responses

Configure CloudFront to return index.html for all paths:

1. Go to your distribution
2. Under "Error pages", create custom error response
3. HTTP error code: 403 (or 404)
4. Customize error response: Yes
5. Response page path: /index.html
6. HTTP response code: 200

MIT

 ## Key Features of This README: 1. Comprehensive Step-by-Step Guide: - From S3 bucket creation to CloudFront configuration - Includes both console and CLI methods 2. Visual Architecture Diagram: - Shows the relationship between components 3. CI/CD Automation: - Ready-to-use GitHub Actions workflow 4. Cost Optimization: - Clear pricing breakdown and free tier information 5. Troubleshooting Section: - Solutions for common issues 6. Advanced Configurations: - SPA routing, custom error pages, etc. 7. Multiple Deployment Methods: - Manual uploads and automated CI/CD 

Need a quick setup walkthrough? Follow my step-by-step guide here medium-walkthrough Don't forget to clap if you see it helpful