Git & GitHub

Why from your first project?

"It's just a tiny project, I don't need Git..."

Wrong. Use Git from day 1, even for a 10-line script. Why?

🤖 Git saves you from AI

This is critical if you use code assistants like Cursor, Claude Code, or Copilot:

⚠️ Reality: AI agents are powerful but make mistakes. An ambiguous prompt can result in destructive changes. Git is your safety net.

Recommended workflow with AI:

# BEFORE asking the AI for something
git add . && git commit -m "Checkpoint before AI changes"

# If the AI breaks something
git diff                    # See what changed
git checkout -- file.js     # Revert one file
git reset --hard HEAD       # Revert EVERYTHING to last commit

Our recommendation: git init is the FIRST command in any project. Before writing code, before installing dependencies. Git first.

Git ≠ GitHub: The fundamental difference

Before looking at commands, understand this:

Analogy: Git is your personal journal where you write every day. GitHub is the bank's safety deposit box where you keep a copy.

What are they really for?

Git (local) allows you to:

GitHub (remote) allows you to:

When do you only need Git?

✅ Git alone is enough when:

• You work solo on your machine
• The project is personal/experimental
• You don't need remote backup (but you should...)
• You're learning

When do you need GitHub?

✅ Add GitHub when:

• You want backup (always recommended!)
• You work in a team
• The project is open source
• You want to showcase your work (portfolio)
• You need CI/CD (automated tests, deploy)

Real scenario: Your laptop gets stolen 💻🔓

Moral: Local Git + remote GitHub = peace of mind.

Installation

Initial setup

# Identity (appears in every commit)
git config --global user.name "Your Name"
git config --global user.email "your@email.com"

# Default branch
git config --global init.defaultBranch main

# Editor for long messages
git config --global core.editor "code --wait"

Key concepts

Workflow

Git only (local)

# Create repository
git init my-project
cd my-project

# Work...
echo "# My Project" > README.md

# See what changed
git status

# Add to staging
git add README.md    # specific file
git add .            # all changes

# Create commit
git commit -m "Initial: add README"

# View history
git log --oneline

Git + GitHub (local + remote)

# Connect to GitHub (once)
git remote add origin https://github.com/your-user/your-repo.git

# Push your code
git push -u origin main

# After each work session:
git add .
git commit -m "Describe what you did"
git push

Branches: Experiment fearlessly

# Create branch for new feature
git checkout -b feature/login

# Work on the feature...
git add .
git commit -m "Add login form"

# Go back to main
git checkout main

# Integrate the feature
git merge feature/login

# Delete branch (no longer needed)
git branch -d feature/login

GitHub CLI (gh)

# Install
brew install gh

# Authenticate (opens browser)
gh auth login

# Clone repo
gh repo clone user/repo

# Create repo from current folder
gh repo create my-project --public --source=.

# Create Pull Request
gh pr create --fill

Emergency commands

# "I messed up, I want to go back to last commit"
git checkout -- .

# "I want to see how it was 3 commits ago"
git checkout HEAD~3

# "Who wrote this line?"
git blame file.js

# "Which commit broke it?"
git bisect start
git bisect bad          # current is bad
git bisect good abc123  # this commit was good
# Git finds the culprit automatically

Visual summary

    YOUR COMPUTER                           GITHUB (CLOUD)
    ─────────────                           ──────────────

    📁 Working Directory
         │
         │ git add
         ▼
    📦 Staging Area
         │
         │ git commit
         ▼
    📚 Local Repository  ──── git push ───▶ ☁️ Remote Repository
                         ◀── git pull ────

🔐 .gitignore: Your shield against leaks

The .gitignore file tells Git which files to NEVER track. This is CRITICAL for security.

⚠️ Real danger: AI and your secrets

AI assistants (Cursor, Claude Code, Copilot) can accidentally:

🚨 True story: Thousands of AWS API keys leak every day on GitHub. Bots scan public repos looking for credentials. Your account can be hacked within minutes.

Essential .gitignore file

Create this at the root of EVERY project:

# .gitignore

# Environment variables (SECRETS!)
.env
.env.local
.env.*.local
*.env

# Credentials
credentials.json
*-credentials.json
*.pem
*.key
secrets/

# Dependencies (reinstallable)
node_modules/
venv/
__pycache__/

# Build (regeneratable)
dist/
build/
.next/
.output/

# IDE
.vscode/
.idea/
*.swp

# OS
.DS_Store
Thumbs.db

# Logs
*.log
npm-debug.log*

Useful commands

# See what Git is ignoring
git status --ignored

# If you already committed a file with secrets 😱
git rm --cached .env
git commit -m "Remove .env from tracking"
# IMPORTANT: The file is still in history!
# Change ALL credentials that were leaked

# Verify before push
git diff --staged   # See what you're about to push

Golden rule

NEVER put credentials directly in code. Use environment variables (.env) and make sure .env is in .gitignore BEFORE the first commit.

💼 GitHub as a professional portfolio

Your GitHub profile is more important than you think:

What makes a repo "professional"?

my-project/
├── README.md          # ⭐ CRITICAL: What it does, how to install, screenshots
├── LICENSE            # MIT, Apache, etc.
├── .gitignore         # Clean, no node_modules or .env
├── docs/              # Architecture, technical decisions
│   └── ARCHITECTURE.md
├── src/               # Organized code
├── tests/             # ⭐ Tests demonstrate professionalism
└── .github/
    └── workflows/     # CI/CD shows you know DevOps

Portfolio repo checklist

• README with clear description and screenshots/GIFs
• Installation instructions that WORK
• Tests (even basic ones)
• Clean code with comments where needed
• No secrets or credentials (check the history!)
• Commits with descriptive messages (not "fix", "update")

💡 Tip: 3-5 well-made public repos impress more than 50 abandoned ones.

Your GitHub profile

Create a repo with your username (e.g., alannreyes/alannreyes) with a README.md that appears on your profile:

# 👋 Hi, I'm [Your Name]

🔭 Currently working on...
🌱 Learning...
💬 Ask me about...
📫 Contact me: your@email.com

🍳 Practice: Your first repository

Ready to apply all this?

→ My First Repository — Create and push your first repo to GitHub step by step

📚 Next level

→ Advanced Git & Collaboration — PRs, merge conflicts, rebases and teamwork

Useful links

• 📖 Git - Official documentation
• 🎓 Learn Git Branching (interactive)
• 📘 GitHub Docs
• 📘 gitignore.io — Generate .gitignore for your stack
• 🎥 Git in 15 minutes (video)