Beginner

Static Website Hosting

Host a personal portfolio or blog on AWS using S3 and CloudFront

Project Overview

Deploy a static website using Amazon S3 for storage and CloudFront for global content delivery. This is the perfect first AWS project to build your portfolio.

Difficulty: Beginner
AWS Services: S3, CloudFront, Route 53, ACM
Cost: Free Tier eligible

Prerequisites

  • AWS account (Free Tier)
  • Basic HTML/CSS knowledge
  • A domain name (optional, for custom domain)

Architecture

👤
Users
Global
→
☁
Route 53
DNS
→
🌐
CloudFront
CDN + SSL
→
📦
S3 Bucket
Static Files

ACM provides free SSL certificates for HTTPS

Step-by-Step Instructions

1

Create an S3 Bucket

  • Go to S3 in the AWS Console
  • Click "Create bucket"
  • Name it something unique (e.g., my-portfolio-site-2024)
  • Uncheck "Block all public access" (we'll use CloudFront instead)
  • Enable static website hosting in bucket properties
  • Set index.html as the index document
2

Upload Your Website Files

  • Upload your HTML, CSS, and JS files to the bucket
  • Ensure index.html is in the root of the bucket
  • Upload any images or assets to appropriate folders
3

Create a CloudFront Distribution

  • Go to CloudFront in the AWS Console
  • Click "Create distribution"
  • Select your S3 bucket as the origin
  • Enable "Origin Access Control" (OAC) for security
  • Set default root object to "index.html"
  • Enable automatic compression
4

Configure S3 Bucket Policy

  • CloudFront will provide a bucket policy
  • Copy and apply it to your S3 bucket
  • This allows only CloudFront to access your bucket
5

Set Up Custom Domain (Optional)

  • Request an SSL certificate in ACM (must be in us-east-1)
  • Validate via DNS or email
  • Add alternate domain names in CloudFront
  • Create Route 53 alias record pointing to CloudFront
6

Test and Verify

  • Access your site via the CloudFront URL
  • Test from different locations if possible
  • Verify HTTPS is working correctly
  • Test cache invalidation by updating a file

Tips

  • Use index.html as default root object - This ensures visitors see your homepage without specifying a file
  • Enable versioning for easy rollbacks - If you make a mistake, you can restore previous versions
  • Set up CloudFront error pages - Create a custom 404.html for better user experience
  • Use cache invalidation sparingly - It costs money; consider versioning your files instead

Code Examples

S3 Bucket Policy for CloudFront OAC

bucket-policy.json JSON 
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::ACCOUNT_ID:distribution/DISTRIBUTION_ID"
                }
            }
        }
    ]
}

AWS CLI Commands

Terminal Commands BASH 
# Create S3 bucket
aws s3 mb s3://my-portfolio-site-2024

# Upload website files
aws s3 sync ./website s3://my-portfolio-site-2024

# Invalidate CloudFront cache
aws cloudfront create-invalidation \
    --distribution-id E1234567890 \
    --paths "/*"

CloudFront Cache Invalidation Script

deploy.sh BASH 
#!/bin/bash
BUCKET="my-portfolio-site-2024"
DISTRIBUTION_ID="E1234567890"

# Sync files to S3
aws s3 sync ./dist s3://$BUCKET --delete

# Invalidate CloudFront cache
aws cloudfront create-invalidation \
    --distribution-id $DISTRIBUTION_ID \
    --paths "/*"

echo "Deployment complete!"

What You'll Learn

  • S3 bucket configuration for static hosting
  • CloudFront distribution setup and caching
  • SSL/TLS certificate provisioning with ACM
  • Custom domain configuration with Route 53
  • Origin Access Control for secure S3 access
← Back to Projects Next Project →