This portfolio website is implemented using the CI/CD pipeline described in this project. Built with Next.js 15 and React 19, the site showcases technical projects through interactive documentation, code examples, and visual diagrams. The application uses Tailwind CSS for responsive styling and leverages static site generation for optimal performance and SEO.
The portfolio demonstrates modern web development practices with client-side components, custom hooks, and modular architecture. Key features include Mermaid diagram rendering, syntax-highlighted code blocks, and responsive design across all devices. The site is hosted on AWS S3 with CloudFront CDN for global content delivery, making it the perfect candidate to showcase the automated deployment pipeline that builds, optimizes, and deploys every code change automatically through GitHub Actions.
Repository: https://github.com/samuelincoln1/portfolio
This project transforms a manual deployment process into a fully automated GitHub Actions workflow that builds, tests, and deploys to AWS S3 + CloudFront on every code push. What makes this implementation particularly interesting is that it serves both as a functional solution and a live demonstration of DevOps best practices.
The Challenge: Setting up a robust CI/CD pipeline that handles dependency management, build optimization, AWS credentials security, and automated deployments while ensuring reliable delivery and proper cache invalidation across the CloudFront distribution.
Live Result: This very page you're reading was deployed automatically through the implemented pipeline, demonstrating the system in action.
The CodeFlow pipeline implements a complete automated deployment workflow that triggers on every push to the main branch. The architecture follows modern DevOps practices with clear separation of concerns and security best practices.
Loading diagram...
Diagram generated using Mermaid.
Security is a fundamental aspect of the CI/CD implementation, with particular attention to credential management, access control, and secure deployment practices. The pipeline ensures that sensitive information never appears in code or logs while maintaining operational transparency.
The pipeline uses GitHub Actions secrets to securely store AWS credentials. These secrets are only available to the pipeline and are never exposed in the code or logs. The workflow leverages GitHub's encrypted secrets feature to securely store and access AWS credentials. All sensitive data is encrypted at rest and only decrypted during workflow execution, ensuring that credentials remain protected throughout the entire CI/CD process.
The implementation follows the principle of least privilege by creating a dedicated IAM user specifically for CI/CD operations. This user has only the minimum permissions required for successful deployment.
permissions-policy.json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "S3BucketAccess",
"Effect": "Allow",
"Action": [
"s3:DeleteObject",
"s3:GetObject",
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": "arn:aws:s3:::samuellincoln.com/*"
},
{
"Sid": "S3BucketList",
"Effect": "Allow",
"Action": [
"s3:ListBucket"
],
"Resource": "arn:aws:s3:::samuellincoln.com"
},
{
"Sid": "CloudFrontInvalidation",
"Effect": "Allow",
"Action": [
"cloudfront:CreateInvalidation"
],
"Resource": "arn:aws:cloudfront::*:distribution/E1D7FI62EWQMM"
}
]
}GitHub Actions provides a powerful CI/CD platform that automates the entire deployment pipeline directly within the GitHub ecosystem. This implementation leverages Actions' event-driven architecture to trigger automated deployments on every code push, ensuring rapid and consistent delivery of portfolio updates without manual intervention.
The deployment workflow is defined in .github/workflows/deploy.yml and configured to trigger on pushes to the main branch and pull request events. This approach ensures that both production deployments and preview builds are handled automatically, providing immediate feedback on code changes.
The workflow consists of several key steps:
.github/workflows/deploy.yml
name: Deploy to AWS S3 and CloudFront
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '18'
cache: 'npm'
- name: Install Dependencies
run: npm ci
- name: Build Project
run: npm run build
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
- name: Deploy to S3
run: |
aws s3 sync out/ s3://${{ secrets.S3_BUCKET_NAME }}/ --delete --cache-control max-age=31536000,public
aws s3 cp out/index.html s3://${{ secrets.S3_BUCKET_NAME }}/index.html --cache-control max-age=0,no-cache,no-store,must-revalidate
- name: Invalidate CloudFront Cache
run: |
aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*" The result of this implementation is this very portfolio website you're currently viewing - a highly available, automatically deployed web application that demonstrates enterprise-grade DevOps practices in action. The site achieves 99.9% uptime through AWS infrastructure, global performance via CloudFront edge locations, and zero-downtime deployments through the automated CI/CD pipeline. Every code change triggers an immediate, secure deployment process that maintains strict security standards through encrypted secrets management and least-privilege IAM policies, while delivering sub-second response times worldwide. This portfolio not only showcases technical projects but serves as a living demonstration of modern cloud architecture, automated deployment strategies, and professional software development practices.