Module 5: Git & GitHub
Lesson 3

GitHub — Your Code in the Cloud

What GitHub Gives You

GitHub is a website that stores your Git repositories online. Git lives on your computer; GitHub is where you send a copy so it's safe and shareable. Once your code is on GitHub, you get:

  • Backup — your work survives even if your laptop dies
  • Access from anywhere — pull your project down onto any computer
  • Deployment — Vercel connects to GitHub and auto-deploys your app whenever you push
  • Collaboration — if you ever work with others or hire a developer, GitHub is the handoff point
  • History — a clean visual interface for browsing your commits

Setting Up Your GitHub Account

  1. Go to github.com
  2. Click Sign up
  3. Enter your email, create a password, choose a username
  4. Verify your email

Your username becomes part of your profile URL: github.com/yourusername. If you plan to use GitHub for work or a portfolio, pick something professional.

Creating Your First Repository

A repository (or "repo") is a single project on GitHub — the cloud-hosted version of your local Git project.

To create one:

  1. Click the + icon in the top right → New repository
  2. Repository name: match your local folder (e.g., focus-dashboard)
  3. Description: a short line about your app
  4. Visibility: Public (anyone can see it) or Private (only you)
    • For learning projects, either is fine
    • For apps you'll share later, start Private and switch to Public when ready
  5. Do NOT check "Initialize this repository with a README" — you already have a local project, and an empty README would get in the way
  6. Click Create repository

GitHub then shows a page of setup commands. Keep that page open — you'll use it next.

Connecting Your Local Project to GitHub

GitHub gives you three commands. Here's what each one means:

# 1. Tell Git where the remote (GitHub) lives
git remote add origin https://github.com/yourusername/focus-dashboard.git

# 2. Name your default branch "main" (if it isn't already)
git branch -M main

# 3. Push your code up to GitHub
git push -u origin main
  • origin is just a nickname for your GitHub repo's address — you'll type origin instead of the full URL from now on.
  • The -u in that last command links your local main branch to GitHub's, so future pushes are simply git push.

After it finishes, refresh your GitHub repo page. All your files will be there.

You don't have to run these by hand. You can hand the whole thing to Claude Code:

"Connect this project to my GitHub repo at github.com/yourusername/focus-dashboard and push it."

Authenticating with GitHub

The first time you push, GitHub needs to confirm it's really you. The smoothest way is the GitHub CLI, a tool called gh.

Option 1: GitHub CLI (Recommended)

Install it:

# Mac
brew install gh

# Or download from cli.github.com

Then log in:

gh auth login

Follow the prompts — it opens your browser and handles everything. After this, git push and git pull just work, no password typing required.

The gh tool can also create repos for you, skipping the website entirely:

gh repo create focus-dashboard --private --source=. --push

Option 2: Personal Access Token

If you'd rather not install the CLI:

  1. Go to github.com → Settings → Developer settings → Personal access tokens → Tokens (classic)
  2. Generate a new token with the repo scope
  3. Copy the token
  4. When Git asks for a password, paste the token (not your account password)

The Push / Pull Cycle

Once your repo is on GitHub, two commands carry most of the load.

git push

Sends your new local commits up to GitHub.

git push

Do this at the end of every work session, at the very least.

git pull

Brings changes from GitHub down into your local copy.

git pull

You'll need this when you work across multiple computers, or when collaborating with someone else.

A simple rule of thumb: pull before you start, push when you finish.

GitHub's Interface: What Matters

When you look at your repo on GitHub, focus on these:

  • The Code tab — your files, in the same structure as on your computer. You can read any file right in the browser.
  • The commit history — every commit with its message, timestamp, and changes. Click a commit to see the exact diff. This is where good commit messages pay off.
  • The README — if your project has a README.md, GitHub renders it on the repo's front page. It's your project's public description.

Branches on GitHub

GitHub shows your branches in a selector near the top, usually defaulting to main. For this course you'll work on main. But if Claude Code ever spins up a new branch for a bigger change, you'll see it listed here too — nothing to worry about.

Public vs. Private

Public: anyone can see your code. Good for open source, portfolio pieces, and learning projects. Vercel's free tier deploys public repos.

Private: only you (and people you invite) can see it. Good for personal tools, client work, or anything sensitive. Vercel's free tier deploys private repos too.

To change later: Repository → Settings → scroll to "Danger Zone" → Change repository visibility.

Summary

  • GitHub stores your Git repo online — backup, deployment, collaboration, and history all in one
  • Create a repo on GitHub, then connect with git remote add origin [url]
  • Send work up with git push; bring work down with git pull
  • Authenticate the easy way with the GitHub CLI: gh auth login
  • Your commit history is public on GitHub — clear commit messages make it readable
  • Claude Code can create the repo, connect it, and push for you