Git & GitHub
Version control is the backbone of modern development. Without it, you can't deploy to Vercel, collaborate with others, or safely experiment with your code.
Why Git Matters
Git is a version control system that tracks every change you make to your code. Think of it as an unlimited undo button that remembers every version of your project, forever.
GitHub is where your Git repositories live online. It's the cloud backup of your code, and it's what Vercel connects to for deployments.
The Vibe Coder Reality
When Claude Code writes code for you, Git is how you save checkpoints. If something breaks, you can always go back. No Git = no safety net.
Core Concepts
Repository (Repo)
A repository is your project folder with Git tracking enabled. It contains all your code plus a hidden .git folder that stores the entire history.
# Create a new repo in your project folder
git init
# Or clone an existing repo from GitHub
git clone https://github.com/username/repo.git
Commit
A commit is a snapshot of your code at a specific moment. Each commit has a message describing what changed. Think of commits as save points in a video game.
# Stage all changes
git add .
# Create a commit with a message
git commit -m "Add login page"
Pro Tip
Commit often! After every working feature, commit. Claude Code can even write commits for you with /commit.
Branch
A branch is a parallel version of your code. The main branch is your production code. Create new branches to experiment without breaking what works.
# Create and switch to a new branch
git checkout -b feature/new-navbar
# Switch back to main
git checkout main
main
Production
dev
Development
feature/*
New features
Push & Pull
Push uploads your commits to GitHub. Pull downloads changes from GitHub. This is how you sync between your computer and the cloud.
# Push your commits to GitHub
git push origin main
# Pull latest changes from GitHub
git pull origin main
Pull Request (PR)
A PR is a request to merge your branch into another branch (usually main). It's where code review happens. On GitHub, you create PRs through the website.
The Vercel Connection
When you create a PR, Vercel automatically creates a Preview Deployment so you can test your changes before merging to production.
The Vibe Coder Workflow
Start on main, pull latest
Always start with the latest code.
git pull origin mainCreate a feature branch
Never code directly on main.
git checkout -b feature/add-pricingVibe code with Claude
Let Claude write code, commit frequently.
git add . && git commit -m "Add pricing section"Push to GitHub
Upload your branch to the cloud.
git push origin feature/add-pricingCreate PR, review preview
Vercel builds a preview. Test it. If good, merge.
Merge to main = Deploy
Vercel auto-deploys main to production.
Commands You'll Actually Use
| Command | What it does |
|---|---|
| git status | See what's changed |
| git add . | Stage all changes |
| git commit -m "msg" | Save a snapshot |
| git push | Upload to GitHub |
| git pull | Download from GitHub |
| git checkout -b name | Create new branch |
| git checkout main | Switch to main |
| git log --oneline | See commit history |
| git diff | See what changed |
| git stash | Temporarily hide changes |
Common Pitfalls
"I committed secrets/passwords!"
Once pushed, secrets are in Git history forever (even if deleted). Use .gitignore to prevent this.
Fix: Add .env.local to .gitignore before your first commit. Rotate any exposed keys immediately.
"Merge conflict!"
Happens when two branches change the same lines. Git doesn't know which version to keep.
Fix: Open the conflicted file, look for <<<<<<< markers, choose which code to keep, remove the markers, commit.
"I broke main!"
You pushed directly to main and now production is down.
Fix: git revert HEAD creates a new commit that undoes the last one. Always use branches!
"I want to undo everything"
You made a mess and want to go back to the last commit.
Fix: git checkout . discards all uncommitted changes. Use with caution!
The .gitignore File
This file tells Git what to ignore. Never commit node_modules, environment files, or build outputs.
# .gitignore for Next.js
node_modules/
.next/
.env.local
.env*.local
.vercel
*.log
Quick GitHub Setup
1. Create a GitHub account
Go to github.com and sign up.
2. Create a new repository
Click the green "New" button. Name it, keep it private or public, don't initialize with README if you have existing code.
3. Connect your local project
git remote add origin https://github.com/YOU/REPO.git
git branch -M main
git push -u origin main
4. Connect to Vercel
In Vercel dashboard, click "Import Project" → select your GitHub repo → deploy. That's it!