DEV Community

CHANDRA PRABHA V
CHANDRA PRABHA V

Posted on

Hosting My Portfolio on AWS S3 with CloudFront

#aws #cloud

Hosting My Portfolio on AWS S3 with CloudFront

Introduction

I wanted to host my personal portfolio using AWS and understand how a static website can be deployed using cloud services.

For this project, I used Amazon S3 to store my portfolio files and Amazon CloudFront to deliver the website through a secure and fast content delivery network (CDN).

The final architecture is:

Internet
   |
   v
CloudFront
   |
   | Origin Access Control
   v
S3 Bucket
   |
   +-- index.html
Enter fullscreen mode Exit fullscreen mode

One important part of this setup is that the S3 bucket remains private.

Technologies Used

  • Amazon S3 - Stores the portfolio files.
  • Amazon CloudFront - Delivers the website globally through a CDN.
  • HTML - Creates the structure of the portfolio.
  • CSS - Provides styling for the portfolio.

Step 1: Creating the S3 Bucket

First, I logged in to the AWS Management Console and searched for S3.

I opened Amazon S3 and selected:

Create bucket

I entered a unique bucket name.

Example:

chandra-prabha-portfolio-2026
Enter fullscreen mode Exit fullscreen mode

The bucket name must be globally unique because S3 bucket names are shared across AWS.

For the AWS Region, I selected:

Asia Pacific (Mumbai) - ap-south-1
Enter fullscreen mode Exit fullscreen mode

Bucket Configuration

For Object Ownership, I kept:

ACLs disabled
Bucket owner enforced
Enter fullscreen mode Exit fullscreen mode

For Block Public Access, I kept all public access blocked.

This is important because I wanted the S3 bucket to remain private and allow CloudFront to access the files instead.

I then clicked:

Create bucket

Screenshot

Step 2: Uploading Portfolio Files

After creating the bucket, I opened it from the S3 bucket list.

My portfolio contained files such as:

├── index.html
Enter fullscreen mode Exit fullscreen mode

I selected:

Upload → Add files

and uploaded my portfolio files.

The index.html file acts as the main page of the portfolio.

The style.css file contains the styling, while the images folder contains images used by the website.

Step 3: Creating a CloudFront Distribution

After uploading the files, I created a CloudFront distribution.

I opened:

AWS Console → CloudFront

and selected:

Create distribution

For the Origin domain, I selected my S3 bucket.

The origin points to the S3 bucket where my portfolio files are stored.

The important point here is that I selected the S3 bucket origin, not the S3 static website endpoint.

This allows CloudFront to securely communicate with the S3 bucket.

Screenshot

Step 4: Updating the S3 Bucket Policy

After configuring OAC, CloudFront needs permission to read the objects from the S3 bucket.

AWS provides a bucket policy for allowing the CloudFront distribution to access the bucket.

I went to:

S3 → My Bucket → Permissions → Bucket Policy

The policy allows the CloudFront service to perform:

s3:GetObject
Enter fullscreen mode Exit fullscreen mode

on the objects inside the bucket.

The policy is associated with my specific CloudFront distribution.

The general structure looks like:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontServicePrincipalReadOnly",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR-AWS-ACCOUNT-ID:distribution/YOUR-DISTRIBUTION-ID"
        }
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

I used the policy generated for my own CloudFront distribution rather than manually guessing the values.

Screenshot

Step 5: Setting index.html as the Default Root Object

The next step was configuring the default page of the CloudFront distribution.

Inside the CloudFront distribution settings, I set:

Default root object: index.html
Enter fullscreen mode Exit fullscreen mode

This is useful because users can simply visit:

https://my-cloudfront-domain/
Enter fullscreen mode Exit fullscreen mode

instead of:

https://my-cloudfront-domain/index.html
Enter fullscreen mode Exit fullscreen mode

CloudFront automatically serves index.html when the root URL is requested.

Screenshot

Step 6: Deploying the CloudFront Distribution

After completing the configuration, I created the CloudFront distribution.

Initially, CloudFront may show a deployment status while AWS creates the distribution and applies the configuration.

After deployment, the distribution becomes available.

The CloudFront console provides a domain name similar to:

d2ze62elibenrh.cloudfront.net
Enter fullscreen mode Exit fullscreen mode

This domain can be used to access the portfolio.

Step 7: Testing the Portfolio

After the CloudFront distribution was deployed, I opened the CloudFront URL in my browser.

Example:

https://d1234567890abc.cloudfront.net
Enter fullscreen mode Exit fullscreen mode

The portfolio website was displayed successfully.

The request flow was:

Browser
   |
   v
CloudFront
   |
   v
S3
   |
   v
index.html
Enter fullscreen mode Exit fullscreen mode

Screenshot

Why Use CloudFront?

CloudFront is a Content Delivery Network (CDN).

Instead of every user directly accessing the S3 bucket, CloudFront handles requests and delivers the content through its distributed infrastructure.

This provides several advantages:

  • Faster content delivery
  • HTTPS support
  • Caching of static files
  • Reduced load on the origin
  • Better global performance
  • Integration with AWS security features

For a simple portfolio, the performance difference may not be dramatic, but the architecture is much more representative of a real cloud deployment.

What I Learned

Through this project, I learned how to:

  1. Create and configure an Amazon S3 bucket.
  2. Upload static website files to S3.
  3. Create a CloudFront distribution.
  4. Configure an S3 origin for CloudFront.
  5. Configure Origin Access Control.
  6. Use an S3 bucket policy to allow CloudFront access.
  7. Configure index.html as the default root object.
  8. Deploy and test a website using a CloudFront URL.
  9. Understand the difference between public S3 hosting and private S3 with CloudFront.

Conclusion

Hosting a portfolio using S3 and CloudFront is a simple way to understand the basics of AWS cloud deployment.

The main idea is straightforward:

S3 stores the website, CloudFront delivers it, and Origin Access Control keeps the S3 origin private.

This project also helped me understand that cloud deployment is not only about getting a website online. Security, access control and how services communicate with each other are equally important.

A small portfolio ended up being a useful introduction to real-world AWS architecture.

Top comments (0)