AWS Builder Center

Builder Center

From Zero to AWS: A Beginner's First Cloud Project

From Zero to AWS: A Beginner's First Cloud Project

Learn cloud fundamentals by building and deploying a secure static website on Amazon S3 and CloudFront using Origin Access Control and Free Tier guardrails.

RAMACHANDRAN S

Aspiring AI Engineer

Introduction ☁️

Starting out with cloud computing can feel overwhelming. With hundreds of services, technical terms, and architecture choices, it's easy to get lost in documentation.
The most effective way to learn AWS isn't memorizing theoretical concepts—it's building a tangible project end-to-end. In this tutorial, you will build and deploy a developer portfolio website using Amazon S3 and Amazon CloudFront, applying security best practices and cost guardrails along the way.

What You Will Learn 🧠

  • 📦 Amazon S3 Essentials: Storing static web assets securely in object storage buckets.
  • ⚡ Global CDN Delivery: Serving files globally over HTTPS with low latency using Amazon CloudFront.
  • 🔐 Least-Privilege Security: Keeping storage buckets private using CloudFront Origin Access Control (OAC).
  • 💰 Cost Control: Setting up billing alarms to stay comfortably within the AWS Free Tier.

Architecture Overview 📐

Here is the production-grade setup you will build:
[ User Browser ]
│
▼ (HTTPS)
┌─────────────────────────────────┐
│ Amazon CloudFront CDN │
└─────────────────────────────────┘
│
▼ (Origin Access Control / OAC)
┌─────────────────────────────────┐
│ Amazon S3 Bucket (Private) │
└─────────────────────────────────┘
🔐 Security Note: Instead of making your S3 bucket publicly readable directly, keeping the bucket private and routing web traffic exclusively through CloudFront OAC prevents direct bucket exposure.

Step-by-Step Implementation 🛠️

Step 1: Create Local Website Files 📄

Create a folder on your computer containing two files: index.html and styles.css.
index.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cloud Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>👋 Hello, I'm Ram</h1>
<p>AWS Student Builder | Cloud Engineering Enthusiast</p>
</header>
<main>
<section>
<h2>🚀 My First AWS Deployment</h2>
<p>This static portfolio is stored securely in Amazon S3 and delivered globally via Amazon CloudFront CDN.</p>
</section>
</main>
</body>
</html>
styles.css:
1
2
3
4
5
6
7
8
9
10
11
12
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
background-color: #f8fafc;
color: #0f172a;
}
header {
border-bottom: 2px solid #e2e8f0;
padding-bottom: 20px;
}

Step 2: Configure Amazon S3 Bucket 📦

  1. Open the AWS Management Console and navigate to S3.
  2. Click Create bucket and choose a unique bucket name (e.g., student-portfolio-2026-demo).
  3. Select your preferred AWS Region (e.g., us-east-1).
  4. ⚠️ Leave "Block all public access" ENABLED. Do not disable public access.
  5. Click Create bucket, open your newly created bucket, and upload your index.html and styles.css files.

Step 3: Configure CloudFront & Origin Access Control (OAC) ⚡

  1. Open the CloudFront Console and click Create distribution.
  2. In Origin domain, select your S3 bucket's domain name.
  3. Under Origin access, select Origin Access Control settings (recommended) and click Create control setting.
  4. Under Viewer protocol policy, select Redirect HTTP to HTTPS.
  5. Set Default root object to index.html.
  6. Click Create distribution.
  7. Copy the generated Bucket Policy on the CloudFront setup completion screen, navigate back to your S3 bucket's Permissions tab, and save it under Bucket Policy.

Step 4: Set Up Billing Guardrails 🚨

  1. Navigate to AWS Budgets in the Billing & Cost Management Console.
  2. Select Create budget ➔ Zero spend budget.
  3. Enter your email address to receive real-time alerts if any resource incurs charges.

Key Takeaways 💡

  • Private by Default: Keeping S3 buckets private while delivering content through CloudFront CDN is the recommended security baseline for web hosting.
  • Free Tier Friendly: S3 provides 5 GB of storage, while CloudFront provides 1 TB of monthly outbound data transfer free for new accounts.
  • CDN Caching: Edits made to files in S3 may take a few minutes to update globally due to CloudFront edge caching. Creating a CloudFront Invalidation updates cached content instantly.

What to Try Next 🎯

  1. 🌐 Connect a custom domain name using Amazon Route 53.
  2. 🔄 Automate deployments using a GitHub Actions CI/CD pipeline.
  3. 🔒 Enforce security headers using CloudFront Functions.
Happy Cloud Building! 🚀
# beginner-projects# amazon-s3# web-development# amazon-cloudfront# aws-skill-builder
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