Day 1 of 120

WEEK 1: “Auto-Deployed Static Site with Global CDN + SSL”

---

✅ Day 1: Hosting Your Website on S3 (The Apartment Analogy)

🔧 Hands-On:

• Set up an AWS account.

• Create an S3 bucket named like your domain: my-static-site.com

• Enable Static Website Hosting on the bucket.

• Upload your index.html and a basic CSS file.

• Set Bucket Policy to make content publicly readable.

🧠 Learn:

• What is S3? (like a file cabinet, each bucket is a drawer)

• Difference between object storage and file systems

• Static hosting basics (no backend, just HTML/CSS/JS)

• How permissions work in S3 (Bucket Policy = gatekeeper)

🗂️ Analogy:

• Your S3 bucket is an apartment (host), and HTML/CSS files are the furniture inside.

• The index.html is the main door. If it's locked (permissions), no one can enter.

---

✅ Day 2: Secure It With HTTPS (ACM + CloudFront)

🔧 Hands-On:

• Request a public SSL certificate via AWS Certificate Manager (ACM)

• Create a CloudFront distribution:

  • Origin: your S3 bucket

  • Enable HTTPS using ACM certificate

  • Set index.html as default root object

🧠 Learn:

• What is CDN? (CloudFront = Delivery network of buildings across cities)

• How caching works (Edge Locations = small warehouses near users)

• Difference between domain vs subdomain certs

• HTTP vs HTTPS and why SSL matters

🗂️ Analogy:

• CloudFront = national courier delivering your website faster from nearest city

• ACM = a digital passport that ensures visitors know it’s you

---

✅ Day 3: Automate Deployments With GitHub Actions

🔧 Hands-On:

• Set up a GitHub repository with your HTML/CSS site

• Create a .github/workflows/deploy.yml file:

  • Use aws-actions/configure-aws-credentials

  • Use aws s3 sync to deploy files automatically on push

🧠 Learn:

• CI/CD = Assembly line for websites (GitHub commits → live updates)

• GitHub Actions basics: jobs, steps, secrets

• How to use IAM access keys safely via GitHub Secrets

🗂️ Analogy:

• GitHub is your content management room.

• Pushing code = sending furniture to your apartment automatically.

---

✅ Day 4: Set Up a Custom Domain With Route 53 (Optional)

🔧 Hands-On:

• Register or use an existing domain (or use Freenom for free domains)

• Create a Hosted Zone in Route 53

• Add A/alias record pointing to CloudFront distribution

• Validate DNS with ACM if needed

🧠 Learn:

• DNS = Phonebook of the internet (translates names to IP addresses)

• Hosted Zone = Your personal listing in the phonebook

• A Record vs Alias Record (Alias = AWS specific magic)

🗂️ Analogy:

• Route 53 = City address registration

• You’re telling the post office: “My apartment’s new name is www.mybrand.com”

---

✅ Day 5: CloudFront Invalidation + CI/CD Enhancement

🔧 Hands-On:

• Update your GitHub Actions to include CloudFront cache invalidation

  • Use AWS CLI to call create-invalidation for your distribution

• Test by updating a file and confirming it reflects instantly

🧠 Learn:

• Why CDNs cache content

• How to force-refresh global caches after updates

• IAM permissions required for cache invalidation

🗂️ Analogy:

• CloudFront = delivery guys who remember last order

• Invalidation = telling them “Forget that, deliver the new one”

---

✅ Day 6: IAM Deep Dive + Policies for CI/CD

🔧 Hands-On:

• Create a dedicated IAM user/role for GitHub Actions

• Assign least-privilege inline policies for S3 + CloudFront

• Rotate access keys, set password policy

🧠 Learn:

• IAM = security guard with keys to rooms (services)

• Policies = what each keyholder can/can’t do

• Best practices: principle of least privilege, never share root access

🗂️ Analogy:

• IAM = building guard

• You give GitHub a temporary keycard to access just the S3 door and CloudFront locker

---

✅ Day 7: Recap + Polish + Blog Your Journey

🔧 Hands-On:

• Clean up repo, refactor YAML

• Create a README.md for your project

• Write and post a blog/article summarizing your experience

• Optional: Record a video walkthrough (bonus for portfolio)

🧠 Learn:

• How to explain what you did in interviews

• How to write clean documentation

• Power of learning in public (build your resume while learning!)

Day 1: Host a Static Website on AWS S3 — Deep Theory + Hands-On

---

🧠 Topic 1: What Is AWS and Why Do We Use It?

---

🔍 Imagine This:

You want to create a website to show your resume or a simple blog.

Now you have two options:

1. Buy a computer, keep it running 24/7, install Linux, Apache, etc. — painful!

2. OR… you let Amazon host it for you on their servers, and you just upload your files.

That’s what AWS (Amazon Web Services) does.

AWS = Rent space on Amazon’s powerful computers (servers) around the world.

It’s like Netflix or Dropbox — but for developers. It gives you:

• ✅ Storage

• ✅ Servers

• ✅ Databases

• ✅ Tools to run anything in the cloud

---

🧠 Topic 2: What Is Amazon S3 (Simple Storage Service)?

---

🏢 Real-Life Analogy:

Imagine you have a digital locker (like a storage room). In it, you can store:

• Your photos 📷

• Documents 📄

• Website files (HTML, CSS, etc.)

This digital locker = S3 Bucket

S3 = Amazon’s online folder system, made for storing files (called objects)

• These files can be public (anyone can view) or private (only you can)

• You can make a bucket act like a website host — just upload and it's live!

---

🤔 Why Not Just Use Google Drive?

• Google Drive is for personal sharing

• S3 is designed for websites, apps, and scale

• It’s highly reliable (11 9s durability = 99.999999999%)

• It works with other AWS services like CloudFront, Lambda, and more

---

🧠 Topic 3: What Is a Static Website?

---

🧾 Static Website = Just HTML, CSS, JS

• No login

• No dynamic content

• No server code (like Node.js or PHP)

Examples:

• Resume site

• Product landing page

• Blog

• Online CV

• School project

It’s like printing your resume and sticking it on a billboard. Anyone can read it, but no one can edit it.

---

🔁 Static vs Dynamic Website:

---

🧠 Topic 4: What Is a Bucket in S3?

---

📂 Think of a Bucket Like a Folder

In Amazon S3:

• You create a bucket (a folder)

• Upload files inside it

• If configured properly, it becomes a website!

Bucket = folder
Object = file inside folder

Each file in S3 gets a URL that looks like:

bashCopyEdithttps://my-bucket-name.s3.amazonaws.com/index.html

You can click this like a normal website, if public access is allowed.

---

🔒 By Default, Buckets Are Private

Amazon blocks public access to keep your files safe.
You must manually say: “Hey, let the world view this!”

That’s done using:

• ✅ Bucket Policy (a kind of permission rule)

---

🧠 Topic 5: What Is Static Website Hosting in S3?

---

By default, S3 stores files.
But with one switch, it turns into a mini web hosting service.

When You Enable Static Website Hosting:

• S3 serves index.html as the main homepage

• You get a URL (like a live website)

• No servers needed, no extra setup

Just upload → configure → done. Your site is live in the cloud.

---

🧠 Topic 6: What Is a Bucket Policy?

---

🔐 Analogy:

Imagine your apartment is locked.
You want to allow your friends to come in and look at the painting on your wall.

• A bucket policy is the key to open the door.

• You write rules like:

  “Anyone can come and read files inside this folder (bucket), but they can’t change anything.”

This is written in a language called JSON. Example:

jsonCopyEdit{
  "Action": "s3:GetObject",
  "Effect": "Allow",
  "Principal": "*",
  "Resource": "arn:aws:s3:::my-bucket/*"
}

This means:

• Allow everyone (*)

• To GET (view)

• Any file inside this bucket

---

🧠 Topic 7: How It All Works Together

Let’s recap with a flowchart:

1. You create a bucket on AWS

2. You upload index.html and other files

3. You enable static hosting on that bucket

4. You set permissions so anyone can view it

5. Amazon gives you a website link

6. Boom 💥 — your site is live on the internet

---

Hands-On Project: Host a Static Website on AWS S3 (With Full Explanation)

💡 Goal: Host a real HTML website on AWS, accessible globally, using only S3 — no servers, no backend.

---

🧭 Overview of What You’ll Do

---

✅ STEP 1: Create a Free AWS Account

⏱ Time: 5–7 minutes

1. Go to https://aws.amazon.com/free

2. Click “Create an AWS Account”

3. Fill in:

   • Email address

   • Password

   • Choose Personal account

4. Add Credit/Debit Card — AWS won’t charge for free-tier usage

5. Choose your region (e.g., Asia Pacific (Mumbai) for India)

6. Finish identity verification (OTP/call)

🔐 Security tip: After you log in, enable MFA (multi-factor authentication) from the IAM dashboard.

📸 Screenshot: Your AWS Console dashboard should now say:

“Welcome to AWS!”

---

✅ STEP 2: Create an S3 Bucket

⏱ Time: 5 minutes
🧠 You’re creating your cloud "folder" to hold website files.

1. In AWS Console, search S3 in the search bar at the top

2. Click Create bucket

Fill in:

• Bucket name: Must be globally unique
  🧠 Use: my-portfolio-site-hasan

• Region: Choose your closest one (Mumbai, Oregon, etc.)

• Uncheck this: ❌ Block all public access

  • ⚠️ Confirm the warning checkbox below

• Leave rest of the settings as default

Click Create Bucket

📸 Screenshot: You should see my-portfolio-site-hasan in the bucket list now

✅ Feedback Check:

Did your bucket get created and is public access not blocked? If yes, move on!

---

✅ STEP 3: Enable Static Website Hosting

⏱ Time: 3 minutes
🧠 This step turns your folder into a website server.

1. Click your bucket → Go to Properties tab

2. Scroll down to Static website hosting

3. Click Edit

4. Choose:

   • ✅ Enable

   • Select: “Host a static website”

   • Index document: index.html

   • (Optional) Error document: error.html

5. Click Save changes

📸 Screenshot: You’ll now see a “Bucket website endpoint” — a public link!

🧠 That is your public URL for the world 🌍 to visit your website.

✅ Feedback Check:

Did you get a website URL that ends with .amazonaws.com? Good — your bucket can now serve a website!

---

✅ STEP 4: Upload Your Website Files

⏱ Time: 5 minutes
🧠 Add your actual website content into the bucket

Create 2 files on your desktop:

📄 index.html

htmlCopyEdit<!DOCTYPE html>
<html>
<head>
  <title>My First AWS Website</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Hello, AWS World!</h1>
  <p>This is a static site hosted with S3.</p>
</body>
</html>

📄 style.css

cssCopyEditbody {
  background-color: #f0f0f0;
  font-family: sans-serif;
  text-align: center;
  padding-top: 100px;
}

---

Upload Process:

1. Go to your bucket → Objects > Upload

2. Click Add files

3. Select index.html and style.css

4. Keep defaults → Click Upload

✅ Feedback Check:

Do you see index.html listed under your bucket’s files?
If yes — files are inside your cloud locker.

---

✅ STEP 5: Make Files Public with Bucket Policy

⏱ Time: 3 minutes
🧠 By default, nobody can see your files. You need to allow the public to view.

1. Go to Permissions > Bucket Policy

2. Click Edit → Paste this JSON:

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

⚠️ Replace my-portfolio-site-hasan with your actual bucket name
Click Save changes

Do you see your website?

http://my-portfolio-site-hasan.s3-website-us-west-2.amazonaws.com/flixxApp/

🎉 Congratulations! Your site is LIVE on the internet using AWS S3!

---

🔎 Bonus Checks You Should Try

---

✅ Summary of What You Did Today