DEV Community

PRAGADEESH G
PRAGADEESH G

Posted on

Cloud Workshop: Hosting a Portfolio with AWS S3 & CloudFront

#webdev #tutorial #aws #cloud

☁️ My First Cloud Deployment: Hosting a Portfolio with AWS S3 & CloudFront

I recently had the opportunity to participate in a hands-on Cloud Computing Workshop, where I learned the fundamentals of deploying a static website using Amazon Web Services (AWS).

As a practical exercise, I created a simple personal portfolio using only a basic index.html file and hosted it on Amazon S3. I then explored how Amazon CloudFront can be used to deliver the website efficiently to users.

This activity helped me understand the complete journey of a website from a local HTML file to a cloud-hosted application.

🎯 Objective of the Workshop

The main objective of this activity was to understand the fundamentals of static website hosting on the cloud.

Instead of running the website only on my local computer, I learned how to:

  • Create a basic HTML portfolio.
  • Store website files in Amazon S3.
  • Configure S3 for static website hosting.
  • Understand website access through cloud infrastructure.
  • Learn the purpose of Amazon CloudFront.
  • Understand how a CDN improves content delivery.
  • Explore the basic architecture behind cloud-hosted websites.

The project was intentionally simple because the primary focus was on understanding cloud deployment rather than complex web development.

📝 Creating the Portfolio

The first step was to create a basic index.html file.

Since HTML is a static technology, the browser can directly render the file without requiring a backend server or database.

The portfolio included basic sections such as:

  • Personal introduction
  • Education
  • Skills
  • Projects
  • Contact information

Basic index.html 

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>

<body>

    <h1>Hi, I'm Pragadeesh</h1>

    <h2>AI & Machine Learning Student</h2>

    <p>
        I am interested in Artificial Intelligence,
        Machine Learning, Data Analytics, and Web Development.
    </p>

    <h3>Education</h3>
    <p>
        Master of Science in Artificial Intelligence and Machine Learning
    </p>

    <h3>Technical Skills</h3>
    <p>
        Python | Machine Learning | HTML | CSS | JavaScript
    </p>

    <h3>Projects</h3>
    <p>
        Predictive Maintenance for Manufacturing
    </p>

    <h3>Contact</h3>
    <p>
        Email: myemail@example.com
    </p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The file was first tested locally to make sure that the HTML page was working correctly.

☁️ Understanding Amazon S3

The next step was learning about Amazon S3 (Simple Storage Service).

Amazon S3 is a cloud-based object storage service that allows users to store and retrieve files and other types of data.

For this project, S3 acted as the storage location for my portfolio.

The basic idea was:

Local Computer
      |
      | index.html
      ↓
   Amazon S3
      |
      ↓
  Stored Website
Enter fullscreen mode Exit fullscreen mode

Instead of keeping the website only on my computer, the HTML file was uploaded to the cloud.

This demonstrated one of the fundamental advantages of cloud computing: resources can be hosted and accessed through cloud infrastructure instead of depending entirely on a local machine.

🪣 Creating an S3 Bucket

I created an S3 bucket to store the website file.

A bucket can be thought of as a container in Amazon S3 where objects such as HTML files, images, documents, and other data can be stored.

For this project, the bucket contained the portfolio's:

index.html
Enter fullscreen mode Exit fullscreen mode

The bucket was configured for static website hosting, with index.html used as the main page.

📤 Uploading index.html

After creating the bucket, I uploaded the HTML file into it.

The process was straightforward:

Create S3 Bucket
       ↓
Open Bucket
       ↓
Upload index.html
       ↓
Configure Website Settings
       ↓
Set index.html as Index Document
Enter fullscreen mode Exit fullscreen mode

This was an important step because it demonstrated how a locally created website can be moved into a cloud storage environment.

🌐 Static Website Hosting

One of the important concepts I learned during the workshop was static website hosting.

A static website consists mainly of files that are delivered to the user's browser as they are stored.

For example:

index.html
      ↓
Web Server / Cloud Storage
      ↓
Browser
      ↓
Rendered Web Page
Enter fullscreen mode Exit fullscreen mode

There is no requirement for a complex backend for a simple static portfolio.

This makes static hosting useful for:

  • Personal portfolios
  • Documentation websites
  • Landing pages
  • Project showcase pages
  • Simple informational websites
  • Documentation and learning projects

🚀 Introduction to Amazon CloudFront

After understanding S3, I was introduced to Amazon CloudFront.

CloudFront is AWS's Content Delivery Network (CDN).

The basic purpose of a CDN is to deliver content efficiently to users by using a distributed network of locations.

Instead of every user necessarily retrieving content directly from the original storage location, CloudFront can cache and distribute content closer to users.

The simplified architecture is:

                    🌐 User
                       |
                       ↓
               Amazon CloudFront
                    (CDN)
                       |
                       ↓
                  Amazon S3
                (Origin/Storage)
                       |
                       ↓
                  index.html
Enter fullscreen mode Exit fullscreen mode

This helped me understand how cloud services can work together rather than operating as isolated services.

⚡ Why Use CloudFront?

One of the main concepts behind CloudFront is faster content delivery.

Imagine a website being accessed by users from different geographical locations.

A CDN can help serve cached content from locations closer to users, potentially reducing latency.

For a simple portfolio, the website may be very small, but the same concept becomes much more important for larger websites and applications with users distributed across different regions.

CloudFront can be useful for delivering:

  • HTML files
  • CSS files
  • JavaScript files
  • Images
  • Videos
  • Other static content

🔗 S3 + CloudFront Architecture

The most interesting part of the workshop was understanding how S3 and CloudFront can work together.

The overall architecture can be represented as:

             USER
               |
               ↓
        CloudFront CDN
               |
        ┌──────┴──────┐
        ↓             ↓
   Cached Content   Request
        |             |
        └──────┬──────┘
               ↓
            Amazon S3
               |
               ↓
          index.html
Enter fullscreen mode Exit fullscreen mode

In this architecture:

S3 → Stores the website files.

CloudFront → Distributes the content through the CDN.

User → Requests and views the website.

This gave me a basic understanding of how cloud services can be combined to create a simple web hosting architecture.

🛠️ Complete Workflow

The complete workflow of my workshop activity was:

┌─────────────────────┐
│ Create index.html   │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ Test Website Locally│
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ Create S3 Bucket    │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ Upload index.html   │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ Configure Hosting   │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ Configure CloudFront│
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│ Access Portfolio    │
└─────────────────────┘
Enter fullscreen mode Exit fullscreen mode

💻 From Localhost to Cloud

Before the workshop, a simple HTML website would normally be viewed locally on my computer.

For example:

My Computer
     ↓
index.html
     ↓
Web Browser
     ↓
Portfolio
Enter fullscreen mode Exit fullscreen mode

After the cloud deployment, the concept becomes:

              Internet
                 |
                 ↓
             CloudFront
                 |
                 ↓
                S3
                 |
                 ↓
            index.html
Enter fullscreen mode Exit fullscreen mode

This transition helped me understand the difference between local development and cloud deployment.

🔐 Understanding Security

Another important learning point was that cloud resources need to be configured carefully.

When hosting a website using AWS, it is important to understand:

  • Bucket permissions
  • Access policies
  • Public access settings
  • CloudFront access
  • HTTPS
  • Origin configuration

For a workshop environment, configurations may be simplified for learning purposes. However, for a real-world project, security should always be considered before making cloud resources publicly accessible.

📚 Key Concepts I Learned

Through this simple project, I gained exposure to several cloud concepts.

1. Cloud Storage

I learned how files can be stored using Amazon S3 instead of relying only on local storage.

2. Static Website Hosting

I learned that a simple website can be hosted without developing a backend server.

3. Content Delivery Network

I understood the basic purpose of CloudFront and how CDNs help distribute content.

4. Cloud Architecture

I learned how multiple AWS services can work together to deliver an application.

5. Deployment

I gained practical experience moving a project from my local computer to a cloud environment.

💡 What I Found Interesting

The most interesting part of this workshop was that a very simple file like:

index.html
Enter fullscreen mode Exit fullscreen mode

can become an actual cloud-hosted website.

Before deployment, it was just a file on my computer.

After deployment, it became a resource that could be delivered through cloud infrastructure.

This helped me understand that cloud computing is not limited to large enterprise applications. Even a simple student portfolio can be a good starting point for learning cloud deployment.

🎓 My Learning Outcome

This workshop gave me practical exposure to AWS rather than learning cloud concepts only from theory.

I now have a better understanding of:

HTML → S3 → CloudFront → Internet

and how these components can work together to deliver a static website.

The project also motivated me to explore more AWS services and understand how the same principles can be applied to larger applications.

🚀 What's Next?

This basic portfolio is only a starting point.

Going forward, I would like to explore:

  • Custom domains
  • HTTPS configuration
  • AWS Route 53
  • More advanced CloudFront configurations
  • CI/CD deployment
  • GitHub integration
  • Serverless applications
  • AWS Lambda
  • API Gateway
  • Cloud databases
  • Monitoring and logging

The workshop gave me a strong starting point for exploring Cloud Computing, AWS, DevOps, and Cloud-Native Application Development.

🙌 Final Thoughts

Overall, this was a valuable hands-on learning experience. Building a portfolio with just a basic index.html file and then understanding how it can be hosted using Amazon S3 and delivered through Amazon CloudFront made the concepts of cloud deployment much easier to understand.

It was a simple project, but it helped me connect several important concepts that I had previously studied only theoretically.

Small project → Practical deployment → Better understanding of Cloud Computing. ☁️🚀

AWS #AmazonS3 #CloudFront #CloudComputing #AWSWorkshop #CloudDeployment #StaticWebsite #WebDevelopment #DevOps #CloudTechnology #AWSCloud #StudentDeveloper #LearningJourney



Top comments (0)