Allan Chien Back to Portfolio
AWS Static Site Flow

How this portfolio website is delivered on AWS.

This page outlines how the portfolio request moves from the browser through Route 53, CloudFront, and Amazon S3 before the website is returned to the user.

Architecture diagram

AWS architecture diagram for Allan Chien's portfolio website

Request flow

1. User requests portfolio website

2. Route 53 resolves domain to CloudFront

3. CloudFront requests content from S3

4. Static website files stored in S3

5. S3 returns website content to CloudFront

6. CloudFront delivers content to the browser

7. Browser renders the portfolio website

Detailed flow

When a user enters the portfolio domain in a browser, the request first goes through Amazon Route 53. Route 53 resolves the custom domain name and directs the request to the CloudFront distribution that sits in front of the website.

CloudFront then checks whether the requested content is already cached at an edge location. If the content is not cached, CloudFront forwards the request to the Amazon S3 bucket, which stores the static website files such as HTML, CSS, images, and downloadable documents.

After Amazon S3 returns the requested files, CloudFront delivers them back to the user over HTTPS. The browser then receives the content and renders the portfolio website. This setup improves performance, supports secure delivery through ACM certificates, and makes the static site accessible through a custom domain.

What I learned

Building and deploying this portfolio helped me understand how several AWS services work together to deliver a secure static website. It also gave me more hands-on confidence with cloud hosting, DNS, HTTPS, and content delivery.

  • I gained hands-on experience using Route 53 to connect a custom domain to CloudFront.
  • I learned how CloudFront improves website delivery by caching content closer to users.
  • I gained practical experience using Amazon S3 to store and serve static website files such as HTML, CSS, images, and documents.
  • I learned how ACM certificates are used to enable HTTPS for a custom domain through CloudFront.
  • I gained a better understanding of how DNS propagation works and how it can behave differently across devices and networks.
  • I learned how to organise and upload website assets so they can be referenced correctly from HTML files.