DEV Community

Uri Gakuru Karanja
Uri Gakuru Karanja

Posted on

# 🚀 Hosting a Static Portfolio Website on AWS with CI/CD

Welcome to my first AWS deployment project! In this case study, I walk through how I built and deployed my personal portfolio site using AWS services like S3, Route 53, CloudFront, ACM, and GitHub Actions for CI/CD.

🔗 Live Website: https://urigakuru.uriroots.com

📁 GitHub Repo: github.com/GakuruUri/portfolio

🎯 Project Goal

To build, deploy, and host a professional static portfolio website using AWS services, GitHub Actions for CI/CD, and a custom domain.

🧰 Tools & AWS Services Used

  • Frontend: HTML, CSS, JS (static site)
  • Storage: Amazon S3 (static hosting)
  • DNS: Route 53
  • CDN: CloudFront
  • SSL: AWS Certificate Manager (ACM)
  • Automation: GitHub Actions
  • Version Control: Git + GitHub

📐 Architecture Diagram

Image description

🛠️ Step-by-Step Implementation

1. Build Static Website

  • Developed my portfolio using basic HTML/CSS/JS.
  • Tested it locally before deployment.

2. Create & Configure an S3 Bucket

  • Created a bucket with the name matching my domain: urigakuru.uriroots.com.
  • Enabled static website hosting.
  • Set index to default root object index.html.

3. Configure Custom Domain with Route 53

  • Registered domain: uriroots.com.
  • Created a hosted zone and set up records to point to CloudFront.

4. Provision SSL Certificate with ACM

  • Requested a public certificate for *.uriroots.com and uriroots.com.
  • Validated it using Route 53 DNS.

5. Set Up CloudFront

  • Configured a CloudFront distribution pointing to the S3 bucket.
  • Enabled redirect HTTP to HTTPS.
  • Attached the custom SSL certificate.
  • Set the origin domain to S3 bucket endpoint, not the static website hosting URL.

6. Configure GitHub Actions for CI/CD

  • Created a .github/workflows/cicd.yml file for automated deployments.
  • Used aws-actions/configure-aws-credentials to deploy to AWS.
  • Fixed two issues:
    • ❌ SOURCE_DIR mis-indentation → ✅ Corrected line 22
    • ❌ Invalid AWS_S3_BUCKET secret reference → ✅ Used correct syntax for accessing secrets

7. Trigger Deployment

  • Pushed code to GitHub.
  • GitHub Actions triggered and deployed the site to S3.
  • Confirmed deployment worked by checking the CloudFront URL and custom domain.

⚠️ Challenges Faced

  • Misconfiguration in GitHub Actions YAML (SOURCE_DIR indentation).
  • Incorrect reference to AWS_S3_BUCKET secret in the CI/CD workflow.
  • Learning curve around setting up CloudFront properly with HTTPS.

✅ Results

  • 💻 Live Website: https://urigakuru.uriroots.com
  • 🔐 HTTPS-secured, fast-loading static portfolio site
  • 🤖 Fully automated CI/CD pipeline from GitHub to AWS

🌱 What I Learned

  • How to serve static sites on AWS using S3 and CloudFront
  • How to configure Route 53 and SSL certificates with ACM
  • GitHub Actions workflow creation and debugging
  • Importance of architecture planning and secrets management

💡 Future Improvements

  • Add a blog section (Markdown-based)
  • Integrate analytics (e.g., AWS Pinpoint or Google Analytics)
  • Implement deployment notifications via SNS
  • Extend CI/CD to include staging/preview environments

🧠 Final Thoughts

This project helped me tie together several AWS services and sharpen my DevOps skills. It’s a strong foundation for more complex cloud-native projects.

If you're a recruiter or hiring manager — I’d love to chat about cloud roles!

Top comments (0)