← Back to workshop
Branch module
Git & GitHub Deep Dive
0%
✦ 0 XP 🌱 Curious
🌿 Optional branch — go deeper when you're ready
Branch Module · Git & GitHub

Your undo button.
And your free website.

Module 6 introduced Git as a safety net. This branch goes all the way: what commits actually are, how branches work, how to push your project to GitHub, and how GitHub Pages gives you free public hosting for anything you build.

💡 What version control actually is

Imagine you're working on a document and you could save a named snapshot at any point — not just "last saved", but "this was the working version before I tried something risky." And you could go back to any of those snapshots instantly, without losing anything in between. That's version control.

Git is version control for code (and anything text-based). GitHub is a website that stores your Git history online, so it's backed up, shareable, and accessible from any machine.

Why this matters for vibe coders specifically: When you're building with AI, the AI will sometimes break something that was working. Without Git, your only option is undo. With Git, you have named checkpoints you can return to exactly — even days or weeks later.

repository (repo)
The project folder that Git is tracking. Contains all your files plus the hidden .git folder that stores the history.
commit
A saved snapshot with a message describing what changed. Like a game save point with a label. You can always return to any commit.
branch
A parallel version of your project. Make a branch to try something risky — if it works, merge it back. If not, delete it. Your main project is untouched.
push / pull
Push = upload your commits to GitHub. Pull = download changes from GitHub. These keep your local copy and the remote copy in sync.

🖥️ Two ways to use Git

You can use Git from the terminal (command line) or via GitHub Desktop — a free visual app that does the same things with buttons instead of commands. Both are valid.

Terminal Git — the commands you actually need:

Core git commands
# Start tracking a folder
$ git init

# Stage everything for a commit
$ git add .

# Save a snapshot with a message
$ git commit -m "Add homepage layout"

# See what's changed since last commit
$ git status

# See the list of commits
$ git log --oneline

# Go back to a previous commit (safely)
$ git checkout abc1234

GitHub Desktop — download from desktop.github.com. It shows all your changes visually, lets you write commit messages, and handles push/pull with buttons. If the terminal feels like too much, start here.

The one habit that matters most: Commit every time something works. Not at the end of the day — when it works. "Got the navigation working" is a good commit. "Three hours of changes" is a bad commit. Small, frequent, named checkpoints are the whole point.

🐙 Pushing to GitHub

Once your project is committed locally, you can push it to GitHub to back it up and share it.

1
Create a GitHub account
github.com → Sign up. Free account is all you need. Use your real name or a handle you're comfortable with — this is your public developer identity.
2
Create a new repository on GitHub
Click "New repository" → name it → set to Public or Private → Create. Don't add a README here if you already have files locally.
3
Connect your local project and push
GitHub shows you the exact commands to run. It looks like:
# Connect your local repo to GitHub
$ git remote add origin https://github.com/yourusername/your-repo.git

# Push (upload) your commits
$ git push -u origin main

After the first push, future pushes are just git push. Your project is now backed up online.

🌐 GitHub Pages — free hosting for your project

If your project is a website (HTML, CSS, JS — which it is if you built it with an agentic IDE), GitHub Pages will host it for free with a public URL. No servers, no hosting fees.

1
Go to your repository → Settings → Pages
On GitHub, open your repo → Settings tab (top right) → Pages (left sidebar under "Code and automation").
2
Set the source to "Deploy from a branch"
Select your branch (usually main) and the folder (usually / (root) if your index.html is at the top level). Click Save.
3
Wait ~60 seconds
GitHub builds and deploys automatically. Your site will be live at yourusername.github.io/your-repo-name. Every time you push, it redeploys.

What this means practically: You build something in a session, push it to GitHub, set up Pages — and now you have a real URL you can share with anyone. Your surf school booking page, your art portfolio, your event landing page. Live, free, takes 10 minutes to set up.

🛡️ .gitignore — what never to commit

A .gitignore file tells Git which files to never track. This is non-negotiable: some files must never appear in your commit history.

What to always ignore:

.env files containing API keys or passwords. node_modules/ (can always be regenerated). .DS_Store (Mac folder metadata). Any file ending in .pem, .key, or secret.

If you accidentally commit an API key, it is compromised — even if you delete it in the next commit. Someone may have already copied it from GitHub. Always revoke and regenerate any key that touches a public repo.

A starter .gitignore for most projects
# Environment files — NEVER commit these
.env
.env.local
.env.*.local

# Dependencies — install from package.json instead
node_modules/

# Mac/OS metadata
.DS_Store

# Build output — generate, don't commit
dist/
build/

Ask Claude to write your .gitignore: "Write a .gitignore file for a [Node.js / Python / HTML] project that uses [whatever tools you have]. Include any common sensitive files." It takes 10 seconds and gets it right.

🤖 AI decodes Git errors

Git error messages are notoriously cryptic. The good news: AI is excellent at diagnosing them. If Git gives you an error you don't understand — paste it directly into Claude or Gemini with the message "I got this Git error, what does it mean and how do I fix it?"

Here are the most common Git errors and what they actually mean:

CONFLICT (content)
Two versions of the same file have different changes that Git can't automatically merge. Open the file — Git marks the conflict with <<<<<<< markers. Choose which version to keep and delete the markers.
error: failed to push some refs
Your remote (GitHub) has commits your local copy doesn't. Run git pull first to get those commits, then try pushing again.
detached HEAD state
You've checked out a specific commit instead of a branch. Any new commits here won't be saved to a branch. Run git checkout main (or git switch main) to get back to safety.
nothing to commit, working tree clean
Not actually an error — this means everything is already committed. Nothing to do.
WHEN STUCK
The Git error → AI diagnosis loop

Copy the full error message from your terminal. Open Claude.ai or Gemini. Paste with context:

"I'm learning Git and got this error when I tried to push my project to GitHub: [paste error]. I'm using [Mac/Windows]. What does this mean and what should I type to fix it?"

Nine times out of ten, this gives you a clear, step-by-step fix. Git errors feel scary but they're almost always recoverable — especially if you haven't lost any committed work.

👇 Push your Module 5/6 build

DO THIS NOW
Get your project live on GitHub Pages

Take the project you built in Module 5 or 6 and put it online.

  • Open the project folder in your terminal (or use GitHub Desktop)
  • Run git init if you haven't already — or it may already be initialised by your IDE
  • Run git add . then git commit -m "Initial project build"
  • Create a new repo on github.com and push using the commands GitHub gives you
  • Go to Settings → Pages → deploy from main branch
  • Share the URL with someone

If you hit errors: paste the error message into Claude or Gemini and ask what to do. This is exactly the kind of problem AI is good at diagnosing.

Branch complete 🌿

Git is not a developer tool — it's a professional habit. Once it's automatic, you'll never again lose a working version to an AI that broke something.