How to Host a Static Website on AWS S3

What You'll Learn

• Setting up an S3 bucket for static website hosting
• Configuring bucket permissions and policies
• Enabling HTTPS with CloudFront
• Setting up custom domains with Route 53
• Implementing security best practices
• Optimizing performance and costs
• Troubleshooting common issues

Prerequisites

Required Tools and Services

Website Files Preparation

Step 1: Create and Configure S3 Bucket

Using AWS CLI

# Create S3 bucket
aws s3api create-bucket \
    --bucket your-website-bucket \
    --region us-east-1

# Enable website hosting
aws s3api put-bucket-website \
    --bucket your-website-bucket \
    --website-configuration file://website-config.json

Website Configuration (website-config.json)

{
    "IndexDocument": {
        "Suffix": "index.html"
    },
    "ErrorDocument": {
        "Key": "error.html"
    }
}

Bucket Policy Configuration

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::your-website-bucket/*"
        }
    ]
}

CORS Configuration (if needed)

{
    "CORSRules": [
        {
            "AllowedOrigins": ["*"],
            "AllowedMethods": ["GET"],
            "MaxAgeSeconds": 3000,
            "AllowedHeaders": ["Authorization", "Content-Length"]
        }
    ]
}

Step 2: Upload Website Content

File Organization

your-website/
├── index.html
├── error.html
├── assets/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── main.js
│   └── images/
│       └── logo.png
├── blog/
│   └── index.html
└── about/
    └── index.html

Upload Commands

# Upload all files with proper content types
aws s3 sync . s3://your-website-bucket \
    --exclude "*.DS_Store" \
    --exclude "node_modules/*" \
    --include "*.html" \
    --include "*.css" \
    --include "*.js" \
    --include "*.jpg" \
    --include "*.png" \
    --cache-control "max-age=86400"

Content Type Mapping

Step 3: CloudFront Configuration

Distribution Settings

Function Associations

Step 4: Custom Domain Configuration

ACM Certificate Request

# Request certificate
aws acm request-certificate \
    --domain-name example.com \
    --validation-method DNS \
    --subject-alternative-names www.example.com

Route 53 Configuration

Advanced Configuration

Security Headers

{
    "Strict-Transport-Security": "max-age=31536000; includeSubdomains; preload",
    "Content-Security-Policy": "default-src 'self'",
    "X-Content-Type-Options": "nosniff",
    "X-Frame-Options": "DENY",
    "X-XSS-Protection": "1; mode=block",
    "Referrer-Policy": "strict-origin-when-cross-origin"
}

Error Page Configuration

{
    "ErrorDocument": {
        "Key": "error.html"
    },
    "RoutingRules": [
        {
            "Condition": {
                "HttpErrorCodeReturnedEquals": "404"
            },
            "Redirect": {
                "HostName": "example.com",
                "ReplaceKeyWith": "404.html"
            }
        }
    ]
}

Performance Optimization

CloudFront Cache Behaviors

Image Optimization

Monitoring and Analytics

CloudWatch Metrics

Cost Management

Cost Optimization Strategies

1. Storage Optimization

   • Enable lifecycle policies
   • Remove unused files
   • Use appropriate storage class

2. CloudFront Optimization

   • Choose appropriate price class
   • Optimize cache hit ratio
   • Monitor data transfer

3. Request Optimization

   • Bundle and minify assets
   • Use appropriate cache settings
   • Implement lazy loading

Monthly Cost Estimation

Maintenance and Updates

Regular Tasks

1. Weekly

   • Monitor error rates
   • Check access logs
   • Review security findings

2. Monthly

   • Update content
   • Review metrics
   • Cost analysis

3. Quarterly

   • Security assessment
   • Performance optimization
   • Infrastructure review

Troubleshooting Guide

Common Issues and Solutions

Conclusion

Hosting a static website on AWS S3 with CloudFront provides a scalable, secure, and cost-effective solution. By following this comprehensive guide and implementing the best practices, you can create a high-performance website with global reach.

Additional Resources

1. AWS S3 Documentation
2. CloudFront Developer Guide
3. AWS Pricing Calculator
4. AWS Well-Architected Framework
5. Static Website Security Guide