☁️ AWS Static Portfolio Website

Production-grade static site on AWS with fully automated CI/CD

📋 Table of Contents

Overview
Architecture
AWS Resources
CI/CD Pipeline
Security
Observability
Cost
Deployment
Repository Structure
Lessons Learned

🔎 Overview

A personal cloud engineering portfolio hosted on AWS using a production-style architecture — private S3 origin, global CDN delivery via CloudFront, custom domain with TLS, fully automated deployments on every git push, and operational monitoring with alerting.

🎯 Goals

Goal	Implementation
⚡ Global performance	CloudFront CDN with edge caching
🔒 HTTPS everywhere	ACM TLS certificate, HTTP → HTTPS redirect
🚫 No public S3	Private bucket, Origin Access Control (OAC)
🔄 Zero-touch deploys	`git push` → CodePipeline → CodeBuild → live
📊 Operational visibility	CloudWatch alarms, CloudFront access logs

🛠 Tech Stack

Layer	Service	Purpose
🗄️ Origin	Amazon S3	Private static file storage
🌐 CDN	Amazon CloudFront	Global edge delivery + HTTPS termination
📍 DNS	Amazon Route 53	Custom domain resolution
🔐 TLS	AWS Certificate Manager	Free public TLS certificate
🔄 CI/CD	CodePipeline + CodeBuild	Automated build and deploy
📊 Monitoring	CloudWatch + SNS	5xx alerting and metrics
📝 Logging	CloudFront Access Logs	Traffic analysis and debugging

🏗 Architecture

📐 Request Flow

flowchart LR
    subgraph DEV["<b>🧑‍💻 Developer</b>"]
        A["<b>git push</b><br>main branch"]
    end

    subgraph CICD["<b>🔄 CI / CD</b>"]
        B["<b>📥 GitHub</b><br>Webhook Trigger"]
        C["<b>⚙️ CodePipeline</b><br>Orchestration"]
        D["<b>🔨 CodeBuild</b><br>buildspec.yml"]
    end

    subgraph INFRA["<b>☁️ AWS Infrastructure</b>"]
        E["<b>🗄️ S3</b><br>Private Origin"]
        F["<b>🌐 CloudFront</b><br>Edge CDN + TLS"]
        G["<b>📍 Route 53</b><br>DNS Resolution"]
        H["<b>🔐 ACM</b><br>TLS Certificate"]
    end

    subgraph CLIENT["<b>👤 End User</b>"]
        I["<b>🌍 Browser</b><br>HTTPS Request"]
    end

    A -- "push event" --> B
    B --> C
    C --> D
    D -- "aws s3 sync" --> E
    D -- "cache invalidation" --> F

    I -- "shaunvividszportfolio.com" --> G
    G -- "A Record (Alias)" --> F
    H -. "TLS termination" .-> F
    F -- "OAC fetch" --> E
    F -- "cached response" --> I

    style DEV fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
    style CICD fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
    style INFRA fill:#fef9c3,stroke:#ca8a04,stroke-width:2px,color:#713f12
    style CLIENT fill:#f3e8ff,stroke:#7c3aed,stroke-width:2px,color:#581c87
    style A fill:#bfdbfe,stroke:#3b82f6,stroke-width:1px,color:#1e3a5f
    style B fill:#bbf7d0,stroke:#22c55e,stroke-width:1px,color:#14532d
    style C fill:#bbf7d0,stroke:#22c55e,stroke-width:1px,color:#14532d
    style D fill:#bbf7d0,stroke:#22c55e,stroke-width:1px,color:#14532d
    style E fill:#fef08a,stroke:#eab308,stroke-width:1px,color:#713f12
    style F fill:#fef08a,stroke:#eab308,stroke-width:1px,color:#713f12
    style G fill:#fef08a,stroke:#eab308,stroke-width:1px,color:#713f12
    style H fill:#fef08a,stroke:#eab308,stroke-width:1px,color:#713f12
    style I fill:#e9d5ff,stroke:#a855f7,stroke-width:1px,color:#581c87

📁 AWS Resources

🗄️ Amazon S3

Bucket	Region	Purpose	Configuration
`shaun-portfolio-content`	`eu-west-1`	Static site files	✅ Block all public access ✅ OAC-only bucket policy ✅ Default encryption (SSE-S3) ✅ Versioning enabled
`shaun-portfolio-cf-logs`	`eu-west-1`	CloudFront access logs	✅ Block all public access ✅ ACL for CloudFront logging

Bucket Policy (content bucket):

{
  "Effect": "Allow",
  "Principal": { "Service": "cloudfront.amazonaws.com" },
  "Action": "s3:GetObject",
  "Resource": "arn:aws:s3:::shaun-portfolio-content/*",
  "Condition": {
    "StringEquals": {
      "AWS:SourceArn": "arn:aws:cloudfront::<ACCOUNT>:distribution/<DIST_ID>"
    }
  }
}

🌐 Amazon CloudFront

Setting	Value
Origin	S3 via Origin Access Control (OAC)
Default root object	`index.html`
Custom domain	`www.shaunvividszportfolio.com`
TLS certificate	ACM public cert (`us-east-1`)
Viewer protocol	Redirect HTTP → HTTPS
Cache policy	Managed `CachingOptimized`
Access logging	Enabled → `shaun-portfolio-cf-logs`

📍 Amazon Route 53

Record	Type	Target
`www.shaunvividszportfolio.com`	A (Alias)	CloudFront distribution

🔐 AWS Certificate Manager

Certificate type: Public
Region: us-east-1 (required for CloudFront)
Domain: *.shaunvividszportfolio.com
Validation: DNS (CNAME record in Route 53)
Auto-renewal: ✅ Enabled

🔄 CI/CD Pipeline

Pipeline Architecture

flowchart LR
    subgraph PIPE["<b>⚙️ CodePipeline</b>"]
        direction LR
        S["<b>📥 Source</b><br>GitHub<br>main branch"]
        B["<b>🔨 Build</b><br>CodeBuild<br>buildspec.yml"]
        D["<b>📤 Deploy</b><br>S3 sync +<br>CloudFront invalidate"]
    end

    S --> B --> D

    style PIPE fill:#f0fdf4,stroke:#16a34a,stroke-width:2px,color:#14532d
    style S fill:#dbeafe,stroke:#3b82f6,stroke-width:1px,color:#1e3a5f
    style B fill:#fef9c3,stroke:#ca8a04,stroke-width:1px,color:#713f12
    style D fill:#dcfce7,stroke:#22c55e,stroke-width:1px,color:#14532d

🔨 buildspec.yml

version: 0.2

env:
  parameter-store:
    S3_BUCKET: "/portfolio/static-site/s3-bucket"
    CLOUDFRONT_DISTRIBUTION_ID: "/portfolio/static-site/cf-distribution-id"

phases:
  install:
    commands:
      - echo "Install phase - nothing to install for basic static site"
  build:
    commands:
      - echo "Build phase - no framework build step for plain HTML"
  post_build:
    commands:
      - echo "Deploying to S3..."
      - aws s3 sync . s3://$S3_BUCKET --delete --exclude ".git/*" --exclude "buildspec.yml"
      - echo "Creating CloudFront invalidation..."
      - aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"

artifacts:
  files:
    - '**/*'

💡 Note: Sensitive values (S3_BUCKET, CLOUDFRONT_DISTRIBUTION_ID) are pulled from AWS Systems Manager Parameter Store — no secrets hardcoded in the repo.

⚙️ CodeBuild IAM Permissions

The CodeBuild service role follows least-privilege principles:

Permission	Resource	Purpose
`s3:ListBucket`	Content bucket	List existing objects
`s3:GetObject`	Content bucket `/*`	Read files during sync
`s3:PutObject`	Content bucket `/*`	Upload new/changed files
`s3:DeleteObject`	Content bucket `/*`	Remove deleted files (`--delete`)
`cloudfront:CreateInvalidation`	Distribution ARN	Purge CDN cache
`logs:*`	CodeBuild log group	Write build logs
`ssm:GetParameters`	Parameter Store paths	Read deploy config

🔐 Security

Control	Implementation
🚫 No public S3	Block all public access enabled; bucket policy only allows CloudFront OAC
🔒 HTTPS enforced	CloudFront viewer protocol redirects HTTP → HTTPS; ACM TLS on custom domain
🔑 Least-privilege IAM	CodeBuild role scoped to specific bucket + distribution only
🗄️ Encryption	S3 default encryption (SSE-S3); TLS in transit
📝 Audit trail	CloudFront access logs + CodeBuild logs in CloudWatch
🔗 Origin isolation	OAC replaces legacy OAI — S3 is never directly accessible

📊 Observability & Monitoring

🚨 CloudWatch Alarm — 5xx Error Rate

Setting	Value
Region	`us-east-1` (CloudFront metrics)
Metric	`5xxErrorRate`
Period	5 minutes
Threshold	> 1% for 1 consecutive period
Action	SNS → email notification

📝 CloudFront Access Logs

Destination: shaun-portfolio-cf-logs (private S3 bucket)
Use cases:
- 🔍 Debug 4xx/5xx errors
- 📈 Analyse traffic patterns
- 📊 Future: feed into Athena/Glue for dashboards

🔨 CodeBuild Logs

Log group: /aws/codebuild/shaunvividsz-portfolio-build
Region: eu-west-1
Contents: Full output of s3 sync and cloudfront create-invalidation

💰 Cost Monitoring

AWS Budgets monthly limit with email alerts on actual + forecasted spend
CloudWatch billing alarm on EstimatedCharges in us-east-1

💰 Cost Profile

This architecture is designed for near-zero cost for a personal site:

Service	Cost Driver	Expected
🗄️ S3	Storage + GET requests	~ $0.01/mo
🌐 CloudFront	Data transfer + requests	~ $0.00 (free tier)
📍 Route 53	1 hosted zone + queries	~ $0.50/mo
🔐 ACM	Public certificate	Free
🔄 CodePipeline	1 pipeline	Free (1 free)
🔨 CodeBuild	Build minutes	~ $0.00 (100 min/mo free)
📊 CloudWatch	1 alarm + logs	~ $0.10/mo
	Total	< $1/mo

✅ No EC2 instances, no RDS databases, no continuously running compute.

🚀 Deployment

Quick Deploy

# 1. Make your changes
vim index.html

# 2. Commit and push
git add .
git commit -m "Update portfolio"
git push origin main

# 3. CodePipeline automatically:
#    📥 Pulls code from GitHub
#    🔨 Runs CodeBuild (buildspec.yml)
#    📤 Syncs to S3 + invalidates CloudFront cache
#
# 4. ✅ Live at https://www.shaunvividszportfolio.com

Pipeline Stages

Stage	Action	Duration
📥 Source	Pull from GitHub `main`	~10s
🔨 Build	CodeBuild runs `buildspec.yml`	~30s
📤 Deploy	`s3 sync` + CloudFront invalidation	~20s
✅ Live	Changes propagated to edge locations	~60s

📂 Repository Structure

AWS-PORTFOLIO-WEBSITE/
├── 📄 index.html          # Main portfolio page (HTML + CSS + Lucide icons)
├── 📋 buildspec.yml       # CodeBuild deploy specification
├── 📖 README.md           # This documentation
└── 📁 projects/           # Individual project READMEs
    ├── readme (2).md      # Serverless Blog Platform
    ├── README (3).md      # Three-Tier Blog App
    ├── README (4).md      # Serverless Ordering System
    └── README (5).md      # Static Portfolio Site (this project)

📝 Lessons Learned

Challenge	Resolution
🌍 ACM cert must be in `us-east-1` for CloudFront	Created cert in `us-east-1` with DNS validation via Route 53
🔗 OAI vs OAC for S3 origin	Used modern OAC — simpler bucket policy, supports SSE-KMS
🔄 Cache stale after deploy	Added `cloudfront create-invalidation --paths "/*"` in buildspec
🔐 CodeBuild IAM too broad initially	Scoped down to specific bucket ARN + distribution ARN only
📊 No visibility into errors	Added CloudWatch 5xx alarm + SNS email notification

🏗 Related Projects

#	Project	Architecture	Key Services
01	Portfolio Site (this)	Static + Edge	S3, CloudFront, CodePipeline
02	Three-Tier Blog App	VPC + 3-Tier	VPC, ALB, EC2 ASG, RDS
03	Serverless Blog Platform	Serverless Full-Stack	Lambda, API GW, DynamoDB
04	Serverless Ordering System	Event-Driven Saga	Step Functions, SQS, DynamoDB

Built by Shaun · Deployed on AWS · Automated with CodePipeline

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
README.md		README.md
buildspec.yml		buildspec.yml
index.html		index.html
index.html.bak		index.html.bak

Folders and files

Latest commit

History

Repository files navigation

☁️ AWS Static Portfolio Website

📋 Table of Contents

🔎 Overview

🎯 Goals

🛠 Tech Stack

🏗 Architecture

📐 Request Flow

📁 AWS Resources

🗄️ Amazon S3

🌐 Amazon CloudFront

📍 Amazon Route 53

🔐 AWS Certificate Manager

🔄 CI/CD Pipeline

Pipeline Architecture

🔨 buildspec.yml

⚙️ CodeBuild IAM Permissions

🔐 Security

📊 Observability & Monitoring

🚨 CloudWatch Alarm — 5xx Error Rate

📝 CloudFront Access Logs

🔨 CodeBuild Logs

💰 Cost Monitoring

💰 Cost Profile

🚀 Deployment

Quick Deploy

Pipeline Stages

📂 Repository Structure

📝 Lessons Learned

🏗 Related Projects

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages