DEV Community

MIDHUN KRISHNA B
MIDHUN KRISHNA B

Posted on

Cloud Workshop Day 1: Building and Deploying My First HTML Portfolio on AWS

#webdev #cloud #tutorial #aws

From index.html to the Cloud: Deploying My Portfolio with AWS S3 and CloudFront

As part of my cloud workshop, I got the opportunity to build and deploy my own personal portfolio website using HTML, CSS, JavaScript, and AWS.

The website itself was straightforward — a single HTML-based portfolio — but deploying it to the cloud taught me much more than simply creating a webpage.

I worked with Amazon S3 to host my website files and Amazon CloudFront to distribute the website through a global content delivery network.

Along the way, I also faced a few errors that helped me understand how cloud deployment actually works.

🛠️ Technologies Used

  • HTML
  • CSS
  • JavaScript
  • Amazon S3
  • Amazon CloudFront

1. Building My Portfolio Website

I started by creating my portfolio as an HTML file.

The main file was:

index.html
Enter fullscreen mode Exit fullscreen mode

I used HTML to structure the website and CSS to design the interface. JavaScript was used wherever interactive functionality was required.

The portfolio included sections such as:

  • About Me
  • Skills
  • Projects
  • Education
  • Experience / Journey
  • Contact

The goal was to create a simple, responsive portfolio that could showcase my skills and projects.

At first, the website was running locally on my computer.

The next challenge was:

How can I make this website accessible online?

That's where AWS came in.

☁️ 2. Creating an Amazon S3 Bucket

The first AWS service I used was Amazon S3 (Simple Storage Service).

S3 can store static website files such as:

  • HTML
  • CSS
  • JavaScript
  • Images
  • Other frontend assets

I created an S3 bucket specifically for my portfolio website.

After creating the bucket, I uploaded my index.html file along with the required website files.

The basic structure looked like:

Portfolio Website
│
├── index.html
├── style.css
├── script.js
└── images/
Enter fullscreen mode Exit fullscreen mode

The important file was index.html, because it served as the main entry point of the website.

🌐 3. Configuring the Website in S3

After uploading the files, I configured the S3 bucket for hosting the static website.

The idea was simple:

Browser
   ↓
AWS S3
   ↓
index.html
Enter fullscreen mode Exit fullscreen mode

However, simply uploading a file to S3 does not automatically make it publicly accessible.

I had to configure the required settings and permissions so that the website could be accessed properly.

⚠️ 4. Facing the Access Denied Error

One of the first problems I encountered was an:

AccessDenied
Enter fullscreen mode Exit fullscreen mode

error.

The file existed inside the bucket, but accessing it through the website endpoint did not work as expected.

This made me realize an important concept:

Uploading a file to cloud storage and making that file accessible through the internet are two different things.

I had to check the bucket configuration and permissions carefully.

After correcting the required settings, I was able to access the website through S3.

🚀 5. Adding Amazon CloudFront

Once the website was working with S3, I wanted to use Amazon CloudFront.

CloudFront is AWS's Content Delivery Network (CDN). It can distribute website content through edge locations around the world.

The architecture became:

User
  ↓
CloudFront
  ↓
Amazon S3
  ↓
index.html
Enter fullscreen mode Exit fullscreen mode

Instead of users directly accessing the S3 bucket, CloudFront could act as the front-facing distribution layer.

This also introduced another set of configuration requirements.

❌ 6. The CloudFront NoSuchKey Error

After configuring CloudFront, I encountered another error:

NoSuchKey
Enter fullscreen mode Exit fullscreen mode

The error indicated that CloudFront was looking for:

index.html/index.html
Enter fullscreen mode Exit fullscreen mode

instead of simply:

index.html
Enter fullscreen mode Exit fullscreen mode

At first, this was confusing because the index.html file definitely existed in the S3 bucket.

I then checked the CloudFront configuration.

🔍 7. Finding the Problem

The problem was related to the Origin Path configuration.

The CloudFront origin had been configured with an origin path that already pointed toward index.html.

At the same time, the CloudFront distribution was configured with:

Default Root Object:
index.html
Enter fullscreen mode Exit fullscreen mode

This caused CloudFront to effectively construct a path similar to:

/index.html/index.html
Enter fullscreen mode Exit fullscreen mode

That file obviously did not exist.

The correct configuration was to remove the unnecessary origin path and allow CloudFront to use:

Default Root Object → index.html
Enter fullscreen mode Exit fullscreen mode

After correcting the configuration, CloudFront could find the actual file in the S3 bucket.

🔄 8. Creating a CloudFront Invalidation

After changing the CloudFront configuration, I created an invalidation for:

/*
Enter fullscreen mode Exit fullscreen mode

This tells CloudFront to remove the cached versions of the requested objects so that the updated configuration/content can be served.

After waiting for the distribution to update, I tested the website again.

This time, the portfolio loaded successfully.

🎉 9. Final Architecture

The final deployment looked like this:

             ┌─────────────────┐
             │      User       │
             └────────┬────────┘
                      │
                      ▼
             ┌─────────────────┐
             │  CloudFront CDN │
             └────────┬────────┘
                      │
                      ▼
             ┌─────────────────┐
             │    Amazon S3    │
             │                 │
             │   index.html    │
             │   CSS / JS      │
             └─────────────────┘
Enter fullscreen mode Exit fullscreen mode

The portfolio was no longer limited to my local computer.

It had been deployed to the AWS cloud and could be delivered through CloudFront.

🧩 Challenges I Faced

The deployment was not completely straightforward.

I faced several issues during the process:

1. S3 AccessDenied

The website files existed, but the required access configuration was not correct.

2. Bucket Configuration

I had to carefully check the bucket settings and make sure the configuration matched the website deployment requirements.

3. CloudFront NoSuchKey

CloudFront was looking for:

index.html/index.html
Enter fullscreen mode Exit fullscreen mode

instead of:

index.html
Enter fullscreen mode Exit fullscreen mode

4. CloudFront Caching

After making configuration changes, I had to create an invalidation so that the updated content could be served.

These problems were actually one of the most valuable parts of the workshop because they forced me to understand what was happening instead of simply following deployment steps.

💡 What I Learned

This workshop gave me practical experience with cloud deployment.

Some of the key things I learned were:

  • How static websites can be hosted using Amazon S3.
  • How cloud storage permissions affect website accessibility.
  • How CloudFront works as a CDN.
  • How CloudFront connects to an S3 origin.
  • How the Default Root Object works.
  • Why correct origin configuration is important.
  • How caching can affect website updates.
  • How to troubleshoot AWS deployment errors.
  • How a locally created HTML website can be moved to the cloud.

The biggest lesson for me was that deployment is not always about getting everything right on the first attempt.

Errors such as AccessDenied and NoSuchKey initially looked confusing, but investigating them helped me understand the underlying AWS configuration.

🌍 From a Local File to a Cloud Website

Before this workshop, my portfolio was simply a website running on my computer.

After the deployment process, the architecture became:

HTML Portfolio
      ↓
    S3
      ↓
 CloudFront
      ↓
   Internet
Enter fullscreen mode Exit fullscreen mode

That transition gave me a practical understanding of how cloud services can be used to deploy real websites.

It was a small project, but it was a valuable first step toward understanding cloud computing and deployment.

🚀 Conclusion

Building the portfolio was only one part of the experience.

The more valuable part was taking the index.html file from my local system and actually deploying it using AWS.

I learned that cloud deployment involves more than uploading files. Configuration, permissions, origins, caching, and troubleshooting all play an important role.

This workshop gave me hands-on experience with Amazon S3 and CloudFront, and it motivated me to explore more AWS services and cloud-based deployments in the future.

Build it locally. Deploy it to the cloud. Break it. Debug it. Learn from it.

Top comments (0)