
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.
The architecture for hosting a static website on AWS involves the following components:

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).
- Navigate to the Route 53 console and register your desired domain.
- Once registered, create a hosted zone for managing DNS records.
- 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
).
- 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.
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.- 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.
- 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
oryourdomain.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)
- Security:
- Use Origin Access Identity (OAI) in CloudFront to restrict direct access to your S3 bucket.
- Enable versioning in S3 for backup and recovery.
- Performance:
- Leverage CloudFront’s caching capabilities for faster content delivery.
- Use gzip or Brotli compression for static assets.
- 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.
- Resiliency:
- For disaster recovery, replicate your S3 bucket across regions using Cross-Region Replication (CRR).
- Configure failover routing in Route 53 with health check
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.
Happy Learning!
Cheers,
Logeswaran GV