Deploying a Portfolio Website Using AWS S3 and CloudFront 🚀

In this report, I delve into the practical experience of deploying a portfolio website using Amazon S3 and CloudFront services. The process began with logging into the AWS Management Console and exploring the Amazon S3 service, which is an object storage system. An S3 bucket was created to practice basic S3 workflow, and an image file was uploaded into it. This allowed for a practical understanding of S3 as a storage service.

Subsequently, a separate S3 bucket was created specifically for the portfolio website, where the portfolio's index.html file was uploaded. The website's hosting was then configured within this bucket, with the index document set to index.html. Upon completing this configuration, the portfolio was successfully displayed via the generated S3 website endpoint.

However, a dilemma quickly arose when the portfolio's original UI styling was not displayed, and the HTML content appeared with basic styling. This suggested that merely uploading the index.html file was insufficient for a fully functional website. In order for the website to function properly, additional files such as style.css, script.js, and images needed to be accessible at their correct paths. This highlighted the importance of understanding how static websites operate when deployed to cloud storage.

To resolve this issue, the S3 bucket policy was configured to allow public access to the portfolio objects. This involved granting the `s3:GetObject` permission, which enables the reading of objects in the bucket. The policy was set for the portfolio bucket, and the basic structure involved specifying the bucket name in the `Resource` field.

Once the bucket policy was configured, the portfolio could be accessed through the S3 static website endpoint, which followed the format `http://YOUR-BUCKET-NAME.s3-website.ap-south-1.amazonaws.com/`. This endpoint was used to access the portfolio from the S3 website.

The practical also involved utilizing Amazon CloudFront, AWS's Content Delivery Network (CDN), to enhance the delivery of the portfolio website. CloudFront was configured to retrieve the website content from the portfolio S3 bucket, which served as the origin. The distribution was created with the ID `E1GCVH4NTUDX8S`, and the process involved specifying the origin, creating the distribution, and obtaining a CloudFront domain name for accessing the distribution.

Upon completing this process, the user could access the portfolio through the CloudFront-generated domain name, resulting in a complete workflow that involved logging into AWS, creating S3 buckets, uploading objects, configuring website hosting, setting up bucket policies, and finally deploying the distribution through CloudFront. Through this hands-on experience, valuable insights were gained about AWS services, static website hosting, and the role of CDNs in delivering web content efficiently.