DEV Community: PRAGADEESH G

# ☁️ Cloud Workshop: Hosting a Portfolio Using AWS, Docker, S3 & CloudFront

PRAGADEESH G — Wed, 16 Sep 2026 06:47:15 +0000

I recently participated in a hands-on Cloud Computing Workshop where I explored the practical process of deploying a simple portfolio website using AWS and Docker.

The workshop covered multiple stages of cloud deployment, starting from a basic index.html file and progressing to Docker image creation, containerization, image pulling, container deployment, and website hosting.

This practical experience helped me understand how applications can be packaged into containers and deployed in a cloud environment.

🎯 Objective

The main objective of the workshop was to understand the complete workflow of deploying a simple web application using cloud and container technologies.

The major concepts covered were:

Creating a basic portfolio using index.html
Creating a Dockerfile
Building a Docker image
Running an image as a Docker container
Pulling an existing Docker image
Creating a new container from the pulled image
Hosting the website through the container
Understanding AWS S3 and CloudFront
Understanding the relationship between images, containers, and cloud deployment

🌐 Creating the Portfolio

The project started with a simple portfolio website using a basic index.html file.

The portfolio contained basic information such as:

Personal introduction
Education
Technical skills
Projects
Contact information

The initial structure was kept simple so that the focus could remain on understanding containerization and deployment.

🐳 Introduction to Docker

The next stage involved using Docker to containerize the website.

Docker allows an application and its required environment to be packaged into a portable unit called a container.

The basic concept is:

Website Files
     ↓
Dockerfile
     ↓
Docker Image
     ↓
Docker Container
     ↓
Hosted Website

This helped me understand the difference between a Docker image and a Docker container.

Docker Image

A Docker image is a packaged template containing the application and everything required to run it.

Docker Container

A container is a running instance created from a Docker image.

In simple terms:

Image = Template

Container = Running instance of the template

📝 Creating the Dockerfile

To containerize the portfolio, a Dockerfile was created to define how the website should be packaged and served.

A simple example is:

FROM nginx:latest

COPY index.html /usr/share/nginx/html/index.html

EXPOSE 80

This uses an Nginx image as the base and places the portfolio's index.html file in the appropriate web-server directory.

🏗️ Creating the Docker Image

After creating the Dockerfile, the next step was to build the Docker image.

The workflow was:

index.html
     +
Dockerfile
     ↓
Docker Build
     ↓
Docker Image

The image contains the required environment and website files needed to run the portfolio.

This was my first practical experience with the process of converting application files into a reusable Docker image.

📦 Creating the Container

Once the image was created, a container was started from that image.

The workflow became:

Docker Image
     ↓
Create / Run
     ↓
Docker Container
     ↓
Nginx Web Server
     ↓
Portfolio Website

The container provided an isolated environment in which the website could run.

The website could then be accessed through the exposed port.

📥 Pulling a Docker Image

Another important part of the workshop was understanding how Docker images can be pulled from a container registry.

Instead of creating every image from scratch, an existing image can be pulled and used as the foundation for a new container.

The workflow was:

Docker Registry
       ↓
   Pull Image
       ↓
 Local Docker
       ↓
 Create Container
       ↓
  Run Website

This helped me understand the concept of image reuse and container deployment.

🔄 Creating a New Container from a Pulled Image

After pulling the image, a new container was created using that image.

The process demonstrated that the same image can be used to create multiple containers.

             Docker Image
                  |
        ┌─────────┴─────────┐
        ↓                   ↓
 Container 1           Container 2
        ↓                   ↓
    Website             Website

This is one of the useful features of containerization because applications can be deployed consistently using the same image.

🌐 Hosting the Website

After the container was created and the web server was running, the website was hosted through the container.

The overall process was:

              index.html
                   ↓
               Dockerfile
                   ↓
              Docker Image
                   ↓
            Docker Container
                   ↓
             Nginx Server
                   ↓
              Port Mapping
                   ↓
            🌐 Web Browser

This gave me practical experience in hosting a website inside a Docker container.

☁️ AWS Integration

The workshop also introduced the use of AWS services for cloud-based deployment.

I explored Amazon S3 for storing website files and Amazon CloudFront for content delivery.

The overall cloud architecture can be represented as:

                    User
                     |
                     ↓
              CloudFront CDN
                     |
                     ↓
                AWS / Cloud
                     |
              ┌──────┴──────┐
              ↓             ↓
             S3          Docker
        Website Files    Container
                            |
                            ↓
                         Nginx
                            |
                            ↓
                       index.html

This helped me understand that cloud deployment can involve multiple technologies working together.

🔧 Complete Workflow

The complete learning workflow from the workshop can be summarized as:

Create index.html
       ↓
Create Dockerfile
       ↓
Build Docker Image
       ↓
Create Docker Container
       ↓
Run Website
       ↓
Pull Docker Image
       ↓
Create New Container
       ↓
Host Website
       ↓
Access Through Browser
       ↓
Explore AWS S3 & CloudFront

💡 Key Learning

The most valuable part of this workshop was understanding the complete relationship between Docker images and containers.

I learned that:

A Dockerfile defines how an image is built.
A Docker image is a reusable package.
A container is created from an image.
The same image can be used to create multiple containers.
Images can be pulled from a registry.
Containers can be used to run web applications.
Port mapping allows the application inside a container to be accessed externally.
AWS services can be used as part of a cloud deployment architecture.

🚀 Why Containerization?

Containerization provides a consistent environment for applications.

Instead of installing and configuring the web server directly on every machine, the required environment can be packaged into an image.

This makes the application easier to:

Deploy
Move between environments
Reproduce
Scale
Maintain
Share

For a simple portfolio, this may seem like a small implementation, but the same concepts are widely used for deploying larger applications.

📚 My Takeaway

This workshop gave me practical exposure to both cloud computing and containerization.

Starting with a simple index.html file, I went through the process of:

Creating → Building → Containerizing → Pulling → Running → Hosting

Understanding this workflow helped me connect theoretical concepts with an actual deployment process.

It was a valuable learning experience and gave me a stronger foundation in Docker, AWS, containerization, static website hosting, and cloud deployment.

🎓 Conclusion

The workshop demonstrated how a simple website can be transformed into a deployable containerized application.

Starting with a basic HTML portfolio, I created a Docker image, ran it as a container, explored pulling images, created a new container, and hosted the website.

Along with learning about Amazon S3 and CloudFront, this experience helped me understand the fundamentals of modern cloud and container-based deployment.

This is an important step in my learning journey toward Cloud Computing, DevOps, Docker, AWS, and Cloud-Native technologies. ☁️🐳🚀

AWS #Docker #CloudComputing #AmazonS3 #CloudFront #DockerContainer #DockerImage #Containerization #DevOps #CloudDeployment #WebDevelopment #AWSCloud #CloudWorkshop #LearningJourney

Cloud Workshop: Hosting a Portfolio with AWS S3 & CloudFront

PRAGADEESH G — Tue, 15 Sep 2026 06:54:52 +0000

☁️ 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>

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

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

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

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

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

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

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    │
└─────────────────────┘

💻 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

After the cloud deployment, the concept becomes:

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

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