AWS Logo
Menu
Building a Scalable and Cost-Effective Personal Portfolio Website on AWS - Project #1

Building a Scalable and Cost-Effective Personal Portfolio Website on AWS - Project #1

Detailed technical guide

Published Jan 27, 2025
“A genius is not born, but is educated and trained.” - James Clear
Dear All Cloud learners,
Let's explore some of my recent hands on with AWS and this time it's going to be how to build a cost effective personal portfolio website for yourself.
Earlier days, I struggled lot to create my personal website and tired of time spent on creating HTML pages, website design & hosting and now it's made very easy with AWS.
I USED PERPLEXITY AI TO CREATE MY WEBSITE PAGES
Hosting a static website on AWS using Amazon S3, Route 53, and CloudFront is a powerful, scalable, and cost-effective solution. This blog will walk you through the architecture, implementation steps, and best practices for deploying your personal portfolio website using these AWS services. Let’s dive into the details.

Architecture Overview

The architecture for hosting a static website on AWS involves the following components:
s3-static-website
s3-static-website
Amazon S3: Serves as the storage for your static website files (HTML, CSS, JavaScript).
Amazon CloudFront: Acts as a Content Delivery Network (CDN) to distribute content globally with low latency.
Amazon Route 53: Provides DNS routing to map your custom domain to the S3 bucket or CloudFront distribution.
SSL/TLS Certificate: Secures your website with HTTPS via AWS Certificate Manager (ACM).

Step-by-Step Implementation

1. Register Your Domain with Route 53

  • Navigate to the Route 53 console and register your desired domain.
  • Once registered, create a hosted zone for managing DNS records.

2. Create an S3 Bucket for Static Website Hosting

  • Go to the S3 console and create a bucket named after your domain (e.g., yourdomain.com).
  • Disable "Block Public Access" settings to allow public access to your content.
  • Upload your static website files (e.g., index.html, style.css).

3. Enable Static Website Hosting

  • Under the bucket's "Properties" tab, enable "Static Website Hosting."
  • Specify the index document (e.g., index.html) and error document (e.g., error.html).
  • Note the S3 website endpoint URL provided.

4. Configure Bucket Policy

To make your website publicly accessible, apply the following bucket policy:
Replace example.com with your actual bucket name & CFURL with cloudfront distribution list URL.

5. Set Up CloudFront Distribution

  • Navigate to the CloudFront console and create a new distribution.
  • Set the origin domain as your S3 bucket endpoint.
  • Enable HTTPS by attaching an SSL/TLS certificate from ACM.
  • Configure cache behaviors:
    • Redirect HTTP to HTTPS.
    • Allow only GET and HEAD HTTP methods for security.

6. Configure Route 53 DNS Records

  • In your hosted zone, create an alias record:
    • Record Type: A (IPv4)
    • Alias Target: Your CloudFront distribution domain name.
  • This ensures that traffic to www.yourdomain.com or yourdomain.com is routed through CloudFront.
  • Add CNAME records if you are hosted your blog or any other websites using some other provider. Here in my case I have already had blog from hashnode & ebooks from Gumroad.
Please make sure to check third party provider support custom domain then do the changes (Note all your DNS config before making any changes)

Best Practices

  1. Security:
    • Use Origin Access Identity (OAI) in CloudFront to restrict direct access to your S3 bucket.
    • Enable versioning in S3 for backup and recovery.
  2. Performance:
    • Leverage CloudFront’s caching capabilities for faster content delivery.
    • Use gzip or Brotli compression for static assets.
  3. Cost Optimization:
    • Monitor costs using AWS Cost Explorer.
    • Use lifecycle policies in S3 to transition older versions of files to cheaper storage classes like Glacier.
  4. Resiliency:
    • For disaster recovery, replicate your S3 bucket across regions using Cross-Region Replication (CRR).
    • Configure failover routing in Route 53 with health check

Summary

By combining Amazon S3, CloudFront, and Route 53, you can host a highly available, secure, and performant portfolio website with minimal operational overhead. This architecture is not only cost-effective but also scalable as your traffic grows.
With this setup, you can focus on showcasing your work while AWS takes care of the heavy lifting!
Hope this blog given some insights or trigger point to build your own and feel free to reach out to me if in case of any assistance required, I'm glad to assist.
Let's grow each other and build strong cloud hands-on skills!
Follow me on LinkedIn for more AWS Cloud computing knowledge.
Check out my Blog & eBooks
Happy Learning!
Cheers,
Logeswaran GV
 

Comments