Deploy a Static Site to AWS S3

Level: Beginner
Estimated Time: ~30 minutes
Tools Used: AWS S3, CLI, HTML/CSS
Outcome: A live website hosted on AWS S3; built and deployed manually

🟩 Introduction: Why This Project?

If you're new to DevOps, you’ve probably heard about cloud, automation, and infrastructure... but where do you start?

💡 This guide walks you through building and deploying your first real DevOps project: a static website hosted on AWS S3.

Why is this project perfect for beginners?

✅ No backend or frameworks needed
✅ You’ll interact with AWS Cloud directly
✅ You'll deploy something real, live, and shareable
✅ You'll understand how cloud storage + web hosting work behind the scenes

🔨 What We'll Build

We’ll build a simple portfolio-like static website using HTML & CSS and host it on AWS S3.

Here’s a quick preview of what it will look like:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Abdulrahman's First DevOps Project</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <h1>Hello DevOps World 🌍</h1>
    <p>This is my first deployed project using AWS S3!</p>
  </div>
</body>
</html>

/* styles.css */
body {
  background-color: #0e1c2f;
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
}

.container {
  max-width: 600px;
  margin: auto;
}

📁 Your project folder will contain:

/my-first-devops-project
│
├── index.html
└── styles.css

✅ You can copy and paste this code now, or wait till we reach the repo link later in article.

✅ Checkpoint #1: Have You Created Your Project Folder?

Make sure you:

Created a new folder
Added both index.html and styles.css
Opened it in your browser locally (just double-click index.html)

☁️ Step 1: Set Up Your S3 Bucket

We’ll now host your static website using an Amazon S3 bucket.

🧰 Prerequisites:

✅ An AWS account
✅ AWS CLI installed
✅ Logged in to AWS CLI using aws configure (access key, secret, region)

🧠 If you’ve never used the CLI before, don’t worry; we’ll walk through it step by step.

🪣 1.1 Create an S3 Bucket

aws s3 mb s3://my-first-devops-site --region us-east-1

🚨 Bucket name must be globally unique; feel free to use abdulrahman-s3-devops-[randomnumber] if needed.

✅ Checkpoint #2:

Run aws s3 ls to verify that the bucket was created.

🌍 1.2 Enable Static Website Hosting

Now go to the AWS Console:

Open Amazon S3
Click your bucket
Go to the “Properties” tab
Scroll to Static website hosting → Click Edit
Enable it ✅
Set:
- Index document: index.html
- Error document: index.html (or leave blank for now)

💡 AWS will give you a website endpoint; save that!

🔓 1.3 Make the Website Public

By default, S3 buckets are private. To make it public:

Go to Permissions > Bucket policy
Add this JSON policy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-first-devops-site/*"
    }
  ]
}

✅ Replace "my-first-devops-site" with your actual bucket name.

📤 1.4 Upload Your Files

Now upload your project:

aws s3 cp ./my-first-devops-project s3://my-first-devops-site/ --recursive

✅ This will upload both index.html and styles.css.

✅ Checkpoint #3: Is Your Website Live?

📎 Open your S3 website endpoint (e.g. http://my-first-devops-site.s3-website-us-east-1.amazonaws.com)
🎉 You should see your styled webpage!

🎁 Coming Next: Automate Deployment with GitHub Actions

In the next tutorial, we’ll:

Automatically push changes to your site
Add CI/CD using GitHub Actions
Learn how to manage AWS credentials securely

📩 Stay tuned for Part 2: CI/CD with GitHub Actions + S3

🧹 Wrapping Up

🎉 Congratulations! You’ve just completed your first real DevOps deployment.

You wrote code 💻, used Git locally, worked with AWS services ☁️, and deployed a website that anyone can visit.

This is what DevOps is all about: building, testing, deploying, and delivering value continuously.

🧠 Final Checkpoints

✅ Did you:

Create and test a basic HTML/CSS website?
Set up and configure an AWS S3 bucket?
Upload your website using the AWS CLI?
Visit your live site on the S3 public endpoint?

If all green, you’re officially on your DevOps journey 🚀

🔮 What’s Next?

In the next part of this series, we’ll:

Push our website code to GitHub
Set up a GitHub Actions workflow
Automate our AWS S3 deployment whenever we push changes

You’ll learn how CI/CD works in real time and get closer to mastering DevOps.

📥 Download Project Files

🔽 View and download the full project on GitHub

🙌 Final Words

Thanks for joining me on this journey. If you followed the steps and got stuck at any point, reach out or comment.

📢 Also, if you deployed your project, share it on LinkedIn and tag me!
Let’s celebrate small wins together 💪

Author: Abdulrahman A. Muhamad
🔗 My Portfolio • GitHub • LinkedIn

Your First DevOps Project: Deploy a Static Website to AWS S3 (Step-by-Step Guide)