2025-01-20
Modern Portfolio Website - Next.js & AWS Static Hosting
A modern portfolio website built with Next.js, featuring static export deployment to AWS S3 with CloudFront CDN, Route 53 DNS, and automated CI/CD through GitHub Actions.
Project Overview
This portfolio website represents a modern approach to web development and deployment, combining Next.js static export with AWS cloud services for scalable, cost-effective hosting.
The project showcases a complete DevOps workflow with automated CI/CD pipelines, from development to production deployment using AWS S3, CloudFront, and Route 53 for a globally distributed, high-performance website.
Tech Stack & Architecture
Frontend: Next.js 15 with static export, React 18, Tailwind CSS for responsive design and modern UI components.
Hosting: AWS S3 for static file hosting, CloudFront CDN for global content delivery with HTTPS.
Infrastructure: Route 53 for DNS management, AWS Certificate Manager for SSL/TLS certificates.
CI/CD: GitHub Actions for automated build and deployment pipelines, with separate dev and production environments.
Development Tools: ESLint, Next.js dev server, and optimized static export configuration.
AWS Infrastructure Setup
The website leverages AWS cloud services for a robust, scalable hosting solution:
- S3 Bucket: Static website hosting with optimized file storage and public access configuration
- CloudFront CDN: Global content delivery network with edge caching, HTTPS/SSL, and custom domain support
- Route 53: DNS management with A record aliases pointing to CloudFront distribution
- AWS Certificate Manager: Free SSL/TLS certificates for secure HTTPS connections
This architecture provides high availability, low latency globally, and cost-effective hosting for static content.
CI/CD Pipeline with GitHub Actions
Implemented automated deployment pipeline using GitHub Actions:
- Build Process: Automated Next.js static export on every push to dev/main branches
- S3 Sync: Intelligent file synchronization with optimized cache headers (1-year cache for static assets, no-cache for HTML)
- CloudFront Invalidation: Automatic cache invalidation for immediate content updates
- Environment Separation: Separate workflows for dev (dev.cristiangcastro.com) and production environments
- IAM Security: Least-privilege AWS credentials stored as GitHub secrets
This workflow enables continuous deployment with every code change, ensuring the live site is always up to date.
Static Export & Deployment Strategy
Leveraging Next.js static export for optimal performance and cost efficiency:
- Static Generation: Pre-rendered HTML, CSS, and JavaScript for blazing-fast load times
- No Server Required: Eliminates server costs and maintenance overhead
- Global Distribution: CloudFront edge locations serve content from nearest geographic location
- Multi-Environment Support: Separate dev and production deployments with distinct S3 buckets and CloudFront distributions
- Cache Optimization: Strategic cache headers for static assets (max-age=31536000) vs dynamic content (no-cache)
This serverless approach provides infinite scalability, 99.99% uptime, and dramatically reduced hosting costs compared to traditional server-based deployments.
Key Features
- Responsive design optimized for all device sizes
- Dynamic project showcase with detailed case studies
- Performance-optimized with Next.js static export and unoptimized images
- SEO-friendly with proper meta tags and structured data
- Serverless static hosting on AWS S3
- Global CDN with CloudFront edge caching
- Automated CI/CD with GitHub Actions
- Multi-environment support (dev and production)
- HTTPS/SSL with AWS Certificate Manager
- Cost-effective infrastructure (~$1-5/month)
Challenges & Solutions
Challenge: Configuring Next.js for proper static export with client-side features.
Solution: Implemented proper next.config.mjs settings including output: 'export', unoptimized images, and trailing slashes for static host compatibility.
Challenge: Optimizing CloudFront cache invalidation without excessive costs.
Solution: Strategic cache headers that cache static assets for 1 year while ensuring HTML is always fresh, minimizing invalidation frequency.
Challenge: Securing AWS credentials for GitHub Actions deployment.
Solution: Created dedicated IAM user with least-privilege permissions (S3 sync + CloudFront invalidation only) and stored credentials as GitHub secrets.
Future Enhancements
- Add production deployment workflow for main branch
- Implement AWS CloudWatch monitoring for S3 and CloudFront metrics
- Add automated Lighthouse performance testing in CI/CD pipeline
- Implement automated security scanning for dependencies
- Add staging environment between dev and production
- Integrate analytics tracking (Google Analytics or privacy-focused alternative)
- Implement automatic sitemap generation and submission