Deploying a Static Site to AWS S3
Host a production-ready static site on S3 + CloudFront with a custom domain and HTTPS.
What You'll Learn
- Create and configure an S3 bucket for static hosting
- Set up a CloudFront distribution for global CDN delivery
- Configure HTTPS with AWS Certificate Manager
- Point a custom domain via Route 53
- Automate deployments with AWS CLI
Prerequisites
- An AWS account (free tier works)
- Basic terminal / CLI knowledge
- A built static site (HTML/CSS/JS or React build output)
Step-by-Step Guide
Step 1
1. Create & Configure Your S3 Bucket
Go to S3 → Create Bucket. Uncheck 'Block all public access'. Enable 'Static website hosting' under Properties and set index.html as the index document. Attach a bucket policy that grants s3:GetObject to everyone ('Principal': '*'). Upload your build files using the AWS console or: aws s3 sync ./dist s3://your-bucket-name --delete
Step 2
2. Request an SSL Certificate with ACM
Navigate to AWS Certificate Manager in the us-east-1 region (required for CloudFront). Request a public certificate for your domain (e.g., yourdomain.com and *.yourdomain.com). Validate ownership via DNS by adding the CNAME record ACM provides. Certificate issuance takes 5–30 minutes.
Step 3
3. Create a CloudFront Distribution
Create a CloudFront distribution. Set the Origin Domain to your S3 website endpoint (not the bucket ARN). Under Viewer Protocol Policy, select 'Redirect HTTP to HTTPS'. Attach the ACM certificate. Set Default Root Object to index.html. Deploy takes ~15 minutes globally.
Step 4
4. Connect Your Domain in Route 53
In Route 53, select your hosted zone. Create an A record (Alias) pointing to your CloudFront distribution domain (e.g., d1234abcd.cloudfront.net). DNS propagation takes up to 48 hours but is usually live within minutes. Test with curl -I https://yourdomain.com to verify HTTPS.
Step 5
5. Automate Future Deployments
Add a deploy script to your package.json: 'deploy': 'npm run build && aws s3 sync ./dist s3://your-bucket --delete && aws cloudfront create-invalidation --distribution-id YOUR_ID --paths /*'. The CloudFront invalidation clears cached files so visitors always get fresh content. Budget ~$0.50/month for this setup.
Further Reading & Resources
Ready to put this into practice?
Apply for a real Cloud AWS internship and ship production projects with mentorship.