Prerequisites 📋

Before starting, make sure you have:

• Your AWS account
• Your website files
• About 45 minutes ⏰
• GitHub account 🐙

Step 1: Understanding Git and GitHub in a Fun Way! 🎮

What is Git? Think of it as a Time Machine for Your Code! ⏰

Imagine you’re writing a story, and every time you make a change, you take a snapshot with your phone. Git is like that, but for your code! Here’s what makes it awesome:

• 📸 Time Machine: Git remembers every single change you make, like having a photo album of your code’s evolution
• 🔄 Undo Button: Made a mistake? Git lets you go back to any previous version instantly
• 🧪 Safe Experimentation: Want to try something crazy? Git lets you create a “branch” (like a parallel universe) where you can experiment without breaking your working code
• 👥 Team Play: Multiple people can work on the same project without stepping on each other’s toes

Think of Git as a super-smart assistant that never forgets anything and always has your back! 🦸‍♂️

What is GitHub? It’s Like Social Media for Code! 🌐

GitHub is where all the cool developers hang out and share their projects. Think of it as:

• 🏠 Your Code’s Home: Like having a house for your code in the cloud
• 📚 Portfolio Showcase: It’s like having a digital resume that shows off your coding skills
• 🤝 Collaboration Hub: Want to work with others? GitHub makes it super easy
• 🔗 Magic Connections: It connects to services like AWS Amplify to automatically deploy your website

GitHub is basically the Instagram of coding – but instead of sharing selfies, you share awesome code projects! 📱✨

Why This Matters for Your Website? Let’s Use a Real-Life Example! 🏠

Imagine you’re building a house (your website):

Old Way (Manual S3 + CloudFront):

• Every time you want to change the color of your house, you have to:
  • Go to the hardware store (upload files to S3)
  • Paint the house yourself (manual deployment)
  • Tell everyone the house changed (cache invalidation)
  • Hope you don’t mess up (no backup of previous versions)

New Way (Git + GitHub + Amplify):

• You make a change to your house design (edit code)
• Take a photo (Git commit)
• Put it in your design album (GitHub)
• A magical robot (Amplify) automatically:
  • Paints your house with the new color
  • Tells everyone about the change
  • Keeps a perfect record of every change
  • Makes sure nothing breaks

It’s like having a team of professional builders who work 24/7 to make your website perfect! 🏗️🤖

How AWS Amplify Makes Magic Happen! ✨

AWS Amplify is like having a super-smart butler for your website:

What Amplify Does:

• 🚀 Automatic Deployment: Every time you update your code on GitHub, Amplify automatically deploys it
• 🌍 Global Distribution: Uses CloudFront to deliver your website to users worldwide
• 🔒 Security: Automatically handles HTTPS certificates and security
• 📱 Optimization: Makes your website load super fast on all devices
• 🔄 Continuous Updates: Your website is always up-to-date with your latest changes

The Magic Flow:

1. You make a change to your code
2. Git saves the change
3. GitHub stores it safely
4. Amplify automatically detects the change
5. Amplify builds and deploys your website
6. Your users see the update instantly!

It’s like having a personal website manager who never sleeps and always keeps your site perfect! 🌟

Step 2: Create Your GitHub Account and Repository 🐙

Create GitHub Account

1. Visit github.com
2. Click “Sign up” and create a free account
3. Choose username carefully – This becomes part of your professional identity
4. Verify your email

Create Your Repository

A repository (or “repo”) is like a project folder that Git tracks:

• Click the green “New” button or “+” in top right

• Fill in repository details:

• Name: my-website
• Description: “My website built on AWS”
• Visibility: Public or Private (Amplify works with both)
• Add README: Off

Click “Create repository”

Upload Your Website Files

• Click “Add file” → “Upload files”

• Upload your files:

• Drag and drop your index.html, style.css, and profile photo
• Or click “choose your files”

• Commit changes:

• Message: “feat: amplify deployment”
• Description: “Personal website with HTML, CSS”
• Click “Commit changes”

Step 3: Deploy with AWS Amplify + GitHub 🚀

AWS Amplify provides the same infrastructure you built manually but with automation:

• Same performance (CloudFront)
• Same security (HTTPS)
• Better workflow (GitHub integration)
• Less complexity (automatic configuration)

Create Amplify App with GitHub

• Navigate to AWS Amplify Console

• Click “Deploy an app”

• Select “GitHub” and click “Next”

• Click “Authorize AWS Amplify”

• Update GitHub permissions:

• Choose “Only select repositories”
• Select your repository
• Click “Install & Authorize”

Select repository:

• Choose your repository
• Branch: main
• Click “Next”

Configure App Settings

1. Enter app name: my-builder-challenge-website
2. Build settings: Accept defaults
3. Click “Save and deploy”

Verify Initial Deployment

1. Copy the Amplify domain
2. Test your website – Should load with HTTPS