Deploying a Static Website on Amazon S3

#aws #beginners #webdev #tutorial

Over the past few days, I completed a practical cloud engineering exercise: deploying a static website using Amazon S3.

This simple project taught me essential concepts around cloud storage, permissions, hosting, and real‑world deployment workflows.

In this article, I’m sharing the exact steps I followed, what I learned, and why this exercise is valuable for anyone building cloud or DevOps skills.

Creating the S3 Bucket**

I started by creating a new S3 bucket that would host my website files.

I ensured the bucket name was globally unique and selected the correct AWS Region.

This bucket became the storage location for all my HTML, CSS, and image files.

Uploading the Website Files**

Next, I uploaded the contents of my portfolio template.

A key lesson here: S3 requires index.html to be at the root level, not inside a folder.

I uploaded:

index.html
CSS files
Images and asset folders
Additional HTML pages

Once uploaded, I confirmed everything appeared correctly in the Objects tab.

Enabling Static Website Hosting

To turn the bucket into a functioning website, I enabled:

Properties → Static website hosting

I selected “Host a static website” and entered:

Index document:** index.html

AWS then generated a Website Endpoint URL, which acts as the public link to the site.

Making the Website Public**

By default, S3 buckets are private.

To allow public access, I updated two things:

a. Block Public Access Settings**
I ensured that “Block all public access” was turned off for this assignment.
b. Bucket Policy**
I added a policy that allows public read access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::pravin-portfolio-duru-eu-west-2/*"
    }
  ]
}

This step ensures that anyone can load the website files in their browser.

Testing the Website Endpoint

I opened the S3 Website Endpoint in my browser to verify that the site loaded correctly.

A quick hard refresh (Ctrl + F5) helped clear cached versions.

Seeing the homepage appear confirmed that:

Hosting was enabled
Permissions were correct
index.html was in the right place

This was the moment the deployment became real.

Updating and Redeploying

To simulate a real DevOps workflow, I made a small change to the homepage text in index.html, saved the file, and re‑uploaded it to S3.

AWS automatically overwrote the previous version.

Refreshing the website showed the updated content — a simple but powerful demonstration of the edit → deploy → verify cycle used in real CI/CD pipelines.

What I Learned

This project reinforced several important cloud engineering concepts:

Cloud storage structure matters
Permissions determine accessibility
Static hosting requires explicit configuration
Deployment is a repeatable workflow
Small changes require redeployment
Testing and verification are essential

Even though S3 hosting is simple, it teaches foundational skills that scale into more advanced cloud and DevOps practices.

Final Thoughts**

Deploying a static website on S3 is a great beginner‑friendly cloud project.

It builds confidence, strengthens understanding of AWS services, and mirrors real‑world deployment workflows.

I’m excited to continue building, learning, and sharing my cloud journey — one project at a time.

I want to sincerely thank my mentors,Pravin Mishra, Praveen Pandey, Abhishek Makwana and Mobarak Hosen
This post is part of the DevOps Micro Internship (DMI) Cohort 2 by Pravin Mashra