My Hands-on Journey with AWS: Deploying a Portfolio Using Amazon S3 and CloudFront

#webdev #cloud #tutorial #aws

Today, I attended a workshop on Cloud Native Systems and AI Integration. As part of the hands-on session, I created a personal portfolio and deployed it using Amazon S3 and Amazon CloudFront.

Creating the Portfolio

First, I created a simple personal portfolio using HTML, CSS, and JavaScript.
The portfolio contains sections such as About, Skills, Projects, Experience, Education, and Contact.

Creating an Amazon S3 Bucket

I opened Amazon S3 from the AWS Management Console.

Steps:
Open Amazon S3.
Click Create bucket.
Enter a unique bucket name.
Select the required AWS Region.
Create the bucket.

My bucket was created in the Asia Pacific (Mumbai) region.

Uploading Portfolio Files

After creating the bucket, I opened the bucket and uploaded my portfolio files.

Steps:
Open the created S3 bucket.
Click Upload.
Select the portfolio files.
Upload the files.
The uploaded files were index.html and paris.png.

Hosting the Portfolio Using S3
Next, I configured the S3 bucket for hosting the static portfolio website.
After completing the required configuration, I accessed the website through the S3 hosting URL and verified that the portfolio was working correctly.
Using Amazon CloudFront
After successfully deploying the portfolio using S3, I used Amazon CloudFront to distribute the same website.
Steps:
Open Amazon CloudFront.
Create a new CloudFront distribution.
Select the S3 bucket as the origin.
Configure the required distribution settings.
Create the distribution.
Wait for the distribution to become available.
Access the portfolio using the CloudFront distribution URL.
The overall workflow was:
Portfolio
↓
Amazon S3
↓
Amazon CloudFront
↓
User
What I Learned
Through this hands-on session, I learned how to: