DEV Community

Monika Senthilkumar
Monika Senthilkumar

Posted on

How I Deployed My Personal Portfolio Using Amazon S3 and CloudFront

#cloud #webdev #beginners #aws

Deploying My Personal Portfolio Website Using Amazon S3 and AWS CloudFront

Introduction

As an Artificial Intelligence and Machine Learning student, I wanted to gain practical experience with cloud computing by deploying my personal portfolio website using Amazon Web Services (AWS).

Instead of hosting the website only on my local computer, I deployed it using Amazon S3 and Amazon CloudFront. This project helped me understand static website hosting, content delivery, secure origin access, and website updates in a real-world cloud environment.

Live Demo: https://d1eaqmflbam1r6.cloudfront.net/

GitHub Repository: https://github.com/Monika280803/monika-cloud-portfolio

Project Objective

The main objective of this project was to host my personal portfolio on AWS and make it publicly accessible through a CloudFront distribution.

The project demonstrates how cloud services can be used to store website files, deliver content efficiently, and provide secure HTTPS access.

Technologies Used

  • HTML5: Used to structure the portfolio website.
  • CSS3: Used to style the website and create a responsive design.
  • Amazon S3: Used to store the website files, including HTML, CSS, and images.
  • Amazon CloudFront: Used as a content delivery network (CDN) to distribute website content.
  • Origin Access Control (OAC): Configured to allow CloudFront to access the private S3 bucket.
  • HTTPS: Used to access the deployed website securely.

Architecture Overview

The application follows a simple static website hosting architecture.

  1. The portfolio files are uploaded to an Amazon S3 bucket.
  2. Amazon CloudFront is configured with the S3 bucket as its origin.
  3. Origin Access Control (OAC) allows CloudFront to retrieve content from the private S3 bucket.
  4. Visitors access the website through the CloudFront distribution domain using HTTPS.
  5. When website files are updated in S3, CloudFront invalidations can be used to refresh cached content.

This architecture separates file storage from content delivery and demonstrates an important use case of AWS cloud services.

Implementation Steps

Step 1: Developing the Portfolio

I created my personal portfolio using HTML and CSS. The website includes sections such as About Me, Skills, Projects, Education, and Contact.

The website files include index.html, style.css, and a profile image.

Step 2: Uploading Files to Amazon S3

I created an S3 bucket named monika-cloud-portfolio-storage-2026 and uploaded the portfolio files.

Amazon S3 provides scalable object storage and serves as the origin for my website's content.

Step 3: Creating a CloudFront Distribution

I created an Amazon CloudFront distribution and selected my S3 bucket as the origin.

I configured Origin Access Control (OAC) so that CloudFront could retrieve files from the private S3 bucket without requiring public read access to the objects.

Step 4: Configuring the Default Root Object

I configured index.html as the default root object. This allows visitors to access the homepage through the CloudFront domain without specifying the filename in the URL.

Step 5: Testing the Deployment

After the distribution was created and deployed, I opened the CloudFront domain in my browser and verified that the portfolio website loaded successfully.

Step 6: Updating Website Content

During development, I updated the portfolio design in Visual Studio Code. I learned that local changes do not automatically update files stored in S3.

To publish the latest version, I needed to upload the updated files to S3 and create a CloudFront invalidation when necessary.

Challenges Faced and Lessons Learned

1. AWS Account Verification

Initially, I could not create a CloudFront distribution because my AWS account required verification. After AWS confirmed that verification was complete and CloudFront access was enabled, I continued the deployment.

2. Understanding S3 and CloudFront

I learned that Amazon S3 stores the website files, while CloudFront delivers those files to visitors. They serve different purposes but work together in this architecture.

3. Updating Cached Content

My first CloudFront deployment displayed an older version of the portfolio. I understood that updating files in Visual Studio Code or GitHub does not automatically update the separate S3 origin.

The correct workflow is to upload the latest files to S3 and invalidate the relevant CloudFront cache paths if needed.

Key Learnings

Through this project, I gained practical experience with:

  • Hosting static website files on Amazon S3.
  • Creating and configuring an Amazon CloudFront distribution.
  • Using Origin Access Control to protect a private S3 origin.
  • Understanding HTTPS delivery through CloudFront.
  • Configuring a default root object.
  • Updating website content and managing cached files.
  • Troubleshooting deployment and configuration issues.

Conclusion

Building this project gave me an opportunity to apply cloud computing concepts beyond theoretical learning. I gained hands-on experience with Amazon S3 and CloudFront and developed a better understanding of how static websites can be deployed using AWS.

This is an important step in my journey toward becoming a Cloud and AI Engineer. I plan to continue building practical cloud projects and improving my knowledge of AWS services.

Thank you for reading!

Feel free to explore my portfolio and GitHub repository to learn more about the project.

Top comments (0)