AWS Builder Center

Builder Center

From Localhost to the Cloud: My First Hands-On Experiment with Amazon S3 ☁️

From Localhost to the Cloud: My First Hands-On Experiment with Amazon S3 ☁️

Explore my planned journey into AWS cloud computing through a beginner-friendly static website project. Learn about Amazon S3, CloudFront, secure content delivery, and the practical lessons I'm aiming to gain as a student developer.

Tags: AWS, Amazon S3, Cloud Computing, Web Development, Student Builders

Introduction

As a Computer Science and Engineering student, I believe the best way to understand a technology is to build something with it.
So far, much of my web development experience has involved building applications locally, where the frontend, backend, and development tools run on my own computer. But an important question remains: how do we make our projects accessible to others over the internet?
This question has motivated me to explore Amazon Web Services (AWS), starting with one of its fundamental services: Amazon Simple Storage Service (Amazon S3).
In this article, I am documenting my planned first hands-on experiment with Amazon S3, the concepts I want to understand, and the steps I intend to follow to host a simple static website in the cloud.

What Is Amazon S3?

Amazon S3 is an object storage service designed to store and retrieve data at scale. It organizes data as objects inside containers called buckets.
Unlike a traditional file system, S3 is designed around objects, each identified by a key within a bucket. It can store website assets, images, documents, backups, application files, and many other types of data.
For my experiment, I plan to use S3 to store a simple website containing HTML, CSS, JavaScript, and image files.
Official documentation: What is Amazon S3? 

My Planned Project: Hosting a Static Website

I want to start with a small project rather than immediately introducing a complex cloud architecture.
The website will contain a simple homepage, a short introduction, a few styled sections, and basic JavaScript functionality. My initial goal is to understand how files move from my local development environment into cloud storage and how a browser can retrieve the published content.
The planned workflow is:
  1. Build and test the website locally.
  2. Create an S3 bucket in an appropriate AWS Region.
  3. Upload the website files to the bucket.
  4. Configure a way to serve the files to website visitors.
  5. Test the deployed website and troubleshoot any issues.
  6. Review the security settings and clean up resources when finished.
This experiment will help me connect frontend development with cloud storage, access management, and deployment concepts.

Understanding the Architecture

Before implementing the project, I want to understand how the main components work together.
The architecture I plan to explore is:
Local development → Amazon S3 → Amazon CloudFront → Browser
Amazon S3 will store the website files. Amazon CloudFront, a content delivery network (CDN), can distribute those files to visitors while providing HTTPS.
For a new learning project, I intend to investigate a configuration that keeps the S3 bucket private and uses CloudFront Origin Access Control (OAC) to allow CloudFront to retrieve the website content.
This is an important distinction: storing website files in S3 does not automatically make them accessible as a complete website. The serving configuration and permissions must also be set up correctly.
AWS documentation recommends considering CloudFront or AWS Amplify Hosting for secure static website delivery.
Official references:

Step 1: Preparing the Website Locally

My first planned step is to create a small static website with a structure similar to this:
1
2
3
4
5
6
7
8
9
my-first-aws-website/
├── index.html
├── error.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── assets/
└── images/
I will test the pages locally to make sure the HTML, CSS, JavaScript, and image paths work correctly.
Testing locally first should make it easier to identify whether a problem originates in the website code or in the cloud configuration.

Step 2: Creating an S3 Bucket

The next step is to create a general-purpose S3 bucket through the AWS Management Console.
I will choose an available bucket name and an AWS Region appropriate for the project.
For this experiment, I plan to keep the bucket's Block Public Access settings enabled. This will help me learn how to deliver website content without making the underlying bucket publicly accessible.
I will also review the bucket's permissions and understand how AWS manages access to stored objects.
Official guide: Creating a general-purpose S3 bucket 

Step 3: Uploading Website Files

Once the bucket is ready, I plan to upload the website files while preserving their directory structure.
For example, index.html will serve as the homepage, while the CSS, JavaScript, and image files will provide styling and functionality.
At this stage, I want to understand the difference between uploading an object to S3 and making that object available to a website visitor.
A successful upload confirms that the files are stored. It does not, by itself, confirm that the website is configured correctly for public delivery.
Official guide: Uploading objects to Amazon S3 

Step 4: Configuring Secure Website Delivery

After uploading the files, I plan to configure CloudFront with the S3 bucket as its origin.
I will investigate the following settings:
  • Selecting the correct S3 bucket as the origin.
  • Configuring Origin Access Control (OAC).
  • Allowing the CloudFront distribution to read the required objects.
  • Setting index.html as the default root object.
  • Configuring HTTPS for visitors.
  • Testing the distribution after deployment.
The objective is to understand how content delivery, access permissions, and HTTPS work together.
One important lesson I want to take away from this experiment is that security should be considered during deployment, not added as an afterthought.
Official guide: Getting started with a secure static website 

Step 5: Testing and Troubleshooting

Once the configuration is complete, I plan to test the website through its CloudFront URL.
I will check whether the homepage loads correctly, CSS and JavaScript files are retrieved, images appear, and navigation works as expected.
If something fails, I will investigate common issues such as:
  • Incorrect file paths or filenames.
  • A missing default root object.
  • An incorrect CloudFront origin configuration.
  • Missing permissions in the bucket policy.
  • A distribution that has not finished deploying.
  • Cached content after updating the website.
Documenting these issues and their solutions will be an important part of my learning process.

Security and Cost Considerations

Cloud experiments should be approached responsibly, even when the application is small.
For this project, I intend to:
  • Keep the S3 bucket private where possible.
  • Avoid storing credentials or sensitive information in website files.
  • Use least-privilege permissions.
  • Review S3 and CloudFront pricing before deploying.
  • Monitor usage and delete resources that I no longer need.
Although S3 and CloudFront may be economical for small websites, costs depend on usage, requests, data transfer, and applicable pricing or free-tier eligibility. I will check the current AWS pricing information rather than assume the deployment is entirely free.
Official resources:

What I Hope to Learn

This experiment is about more than publishing a webpage. I want to develop a practical understanding of several cloud computing concepts:
  • Object storage and buckets.
  • Cloud resource configuration.
  • Access policies and permissions.
  • Content delivery networks.
  • HTTPS and secure website delivery.
  • Deployment troubleshooting.
  • Cloud cost awareness.
These concepts will provide a foundation for exploring more advanced AWS services and deploying larger applications in the future.

What's Next?

This is the beginning of my hands-on exploration of Amazon S3. My next step is to complete the deployment, verify the results, and document the actual configuration, screenshots, challenges, and lessons learned.
After completing this experiment, I would like to explore how the same deployment process can be automated and how a frontend can be integrated with a backend API.
I see cloud learning as a continuous process of building, testing, making mistakes, and improving.
My goal is not simply to learn AWS services by name, but to understand how they work together to build secure, reliable, and useful applications.
I look forward to sharing the results of this experiment and continuing my journey as a student builder.
Note: This article describes my planned experiment. I will update it with the actual deployment results and screenshots after completing the project.
# amazon-s3# web-development# web-mobile# student-builders
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article