A comprehensive, production-ready guide for deploying static websites on AWS using S3 and CloudFront, complete with automated CI/CD pipeline and Infrastructure as Code.
This repository showcases a complete modern cloud deployment workflow featuring:
- Comprehensive Documentation - Detailed step-by-step deployment guide
- Infrastructure as Code - Terraform-managed AWS resources
- Automated Deployment - GitHub Actions CI/CD pipeline
- Global CDN Distribution - CloudFront for worldwide performance
- Production Security - SSL/TLS certificates and secure configurations
- Cost-Optimized - Efficient resource usage and caching strategies
graph TB
A[Developer] -->|git push| B[GitHub Repository]
B -->|trigger| C[GitHub Actions]
C -->|deploy| D[S3 Bucket]
D -->|origin| E[CloudFront CDN]
E -->|serve| F[Global Users]
G[Terraform Repository] -->|provisions| D
G -->|provisions| E
G -->|provisions| H[Namecheap DNS]
G -->|provisions| I[SSL Certificate]
style A fill:#e1f5fe
style F fill:#e8f5e8
style G fill:#f3e5f5
style C fill:#fff3e0
This static site is deployed live on AWS and demonstrates:
- S3 Static Website Hosting - Scalable, serverless hosting
- CloudFront CDN - Global edge locations for fast content delivery
- Custom Error Pages - Professional 404/403 error handling
- Automated Deployments - Zero-downtime CI/CD pipeline
- Infrastructure Automation - Terraform-managed resources
The AWS infrastructure for this project is fully automated using Terraform:
This companion repository provisions:
- S3 Bucket with static website hosting configuration
- CloudFront Distribution with global edge locations
- SSL/TLS Certificate via AWS Certificate Manager
- Security Policies and access controls
- Monitoring & Logging setup
aws-static-site-deploy/
├── index.html # Main documentation page
├── error.html # Custom 404/error page
├── README.md # This comprehensive guide
├── .github/
│ └── workflows/
│ └── deploy.yml # Automated deployment pipeline
└── docs/ # Additional documentation
- Step-by-step S3 bucket configuration
- CloudFront distribution setup
- Custom domain and SSL configuration
- Performance optimization techniques
- Security best practices
- Infrastructure as Code with Terraform
- CI/CD pipeline with GitHub Actions
- Automated testing and deployment
- Monitoring and error handling
- Responsive HTML5 design
- Modern CSS styling techniques
- Progressive enhancement
- Accessibility considerations
First, provision the AWS infrastructure using Terraform:
# Clone the infrastructure repository
git clone https://github.com/TanyaMushonga/terraform-s3_and_cloudfront.git
cd terraform-s3_and_cloudfront
# Initialize and apply Terraform
terraform init
terraform plan
terraform applyClone this repository and set up the deployment:
# Clone this repository
git clone https://github.com/TanyaMushonga/aws-static-site-deploy.git
cd aws-static-site-deploy
# Configure GitHub Secrets (in repository settings)
AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key
AWS_DEFAULT_REGION=us-east-1
S3_BUCKET=your-bucket-name
CLOUDFRONT_DISTRIBUTION_ID=your-distribution-idSimply push to the main branch to trigger automatic deployment:
git add .
git commit -m "Update website content"
git push origin mainThe GitHub Actions workflow will automatically:
- Deploy HTML files to S3
- Invalidate CloudFront cache
- Ensure zero-downtime deployment
| Component | Technology | Purpose |
|---|---|---|
| Frontend | HTML5, CSS3, JavaScript | Static website content |
| Hosting | AWS S3 | Scalable static website hosting |
| CDN | AWS CloudFront | Global content delivery |
| DNS | Namecheap | Domain management |
| SSL | AWS Certificate Manager | HTTPS encryption |
| Infrastructure | Terraform | Infrastructure as Code |
| CI/CD | GitHub Actions | Automated deployment |
| Version Control | Git/GitHub | Source code management |
- Modern, responsive layout
- AWS branding and color scheme
- Mobile-first design approach
- Accessibility compliant
- Interactive troubleshooting guides
- Copy-paste AWS CLI commands
- Real-time deployment status
- Comprehensive error handling
- Optimized images and assets
- Minified CSS and JavaScript
- CloudFront caching strategies
- Fast global content delivery
- HTTPS enforcement
- Security headers implementation
- Access control policies
- Vulnerability best practices
Our automated deployment process ensures:
- Code Quality - Automated checks and validation
- Fast Deployment - Only HTML files are synced
- Global Distribution - CloudFront cache invalidation
- Monitoring - Real-time deployment status
- Zero Downtime - Seamless content updates
This project is perfect for:
- Documentation Sites - Technical guides and tutorials
- Company Websites - Corporate landing pages
- Portfolio Sites - Professional portfolios
- Marketing Pages - Product landing pages
- Blogs - Static blog sites
- Educational Content - Learning resources
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- terraform-s3_and_cloudfront - Complete Terraform infrastructure code
- AWS S3 Static Website Hosting
- AWS CloudFront Developer Guide
- Terraform AWS Provider
- GitHub Actions Documentation
This project is licensed under the MIT License - see the LICENSE file for details.
Tanya Mushonga
- GitHub: @TanyaMushonga
- LinkedIn: Connect with me
- Portfolio: tanyaradzwatmushonga.me
- AWS for providing excellent cloud infrastructure
- Terraform for Infrastructure as Code capabilities
- GitHub for hosting and CI/CD platform
- The open-source community for inspiration and best practices
Star this repository if you found it helpful!
Built with ❤️ for the developer community