Skip to content

Module 5: Local ↔ Remote (Hands-on!)

🎯 What you'll learn: Connect your local repo to GitHub, push commits online, pull changes down, and clone repos — the bridge between your machine and the cloud.

🔧 Hands-on module! You'll push your practice repo to GitHub for real.

The Big Picture

So far, everything you've done is local — on your machine only. This module connects your local repo to GitHub:

graph LR
    subgraph local["Your Computer"]
        WD["📝 Working Dir"]
        SA["📦 Staging"]
        REPO["📸 Local Repo"]
    end

    subgraph remote["GitHub (Remote)"]
        GH["☁️ Remote Repo"]
    end

    WD -->|"git add"| SA
    SA -->|"git commit"| REPO
    REPO -->|"git push"| GH
    GH -->|"git pull"| WD

    style local fill:#1a1a2e,stroke:#66ffff,color:#fff
    style remote fill:#0a1a0a,stroke:#66ff66,color:#fff

The 4 Key Commands

Command Direction What It Does Analogy
git remote add Setup Connect local repo to GitHub Save a phone number in contacts
git push Local → GitHub Send your commits up Upload files to OneDrive
git pull GitHub → Local Get new commits down Download/sync from OneDrive
git clone GitHub → New Local Copy entire repo to your machine Download a project for the first time

Push and Pull — The Two-Way Street

Your Computer                          GitHub
┌──────────────┐    git push           ┌──────────────┐
│  Commits:    │ ──────────────────→  │  Commits:    │
│  1, 2, 3, 4  │                       │  1, 2, 3, 4  │
│              │ ←──────────────────  │              │
│              │    git pull           │              │
└──────────────┘                       └──────────────┘
  • git push = "Here are my new commits, please save them on GitHub"
  • git pull = "Do you have any commits I don't have? Give them to me"

Hands-on Part 1: Push from GitHub Desktop (Easy Way)

Your cloud-cafe-desktop repo is currently local only. Let's publish it to GitHub:

  1. Open GitHub Desktop
  2. Make sure cloud-cafe-desktop is selected
  3. Click the "Publish repository" button (top bar)
  4. Uncheck "Keep this code private" (for practice, public is fine)
  5. Click "Publish Repository"

That's it! GitHub Desktop runs these commands behind the scenes:

git remote add origin https://github.com/susanthgit/cloud-cafe-desktop.git
git push -u origin master

Now visit github.com/susanthgit/cloud-cafe-desktop in your browser — your code is online!

Hands-on Part 2: Push from CLI

Now let's do the same thing for your cloud-cafe CLI repo, using commands:

Step 1: Create an Empty Repo on GitHub

Using the GitHub CLI (gh):

cd C:\ssClawy\git-practice\cloud-cafe
gh repo create cloud-cafe --public --source=. --remote=origin --push

This single command: 1. Creates cloud-cafe repo on your GitHub account 2. Adds it as the origin remote 3. Pushes all your commits

Step 2: Verify

git remote -v

This shows your remote connections: 

origin  https://github.com/susanthgit/cloud-cafe.git (fetch)
origin  https://github.com/susanthgit/cloud-cafe.git (push)

Visit github.com/susanthgit/cloud-cafe to see your code online!

Understanding git clone

git clone is for when someone ELSE has a repo on GitHub and you want a copy. You've already done this many times!

# You've cloned these repos before:
git clone https://github.com/microsoft/agent-academy.git
git clone https://github.com/microsoft/hve-core.git
git clone https://github.com/microsoft/playwright-mcp.git

What git clone does: 1. Creates a new folder with the repo name 2. Downloads ALL files + ALL history 3. Sets up origin remote automatically 4. You're ready to go!

GitHub                              Your Computer
┌──────────────┐   git clone        ┌──────────────┐
│  Full repo   │ ──────────────→   │  Full copy   │
│  + history   │                    │  + history   │
│  + branches  │                    │  + remote    │
└──────────────┘                    └──────────────┘

💡 clone vs download ZIP: git clone gives you the full Git history and remote connection. Downloading a ZIP from GitHub gives you just the files — no history, no Git, no connection back.

Understanding git pull

After you push to GitHub, what if something changes on GitHub? (Maybe you edited a file on github.com, or a collaborator pushed changes.) You need to pull those changes down:

git pull

This: 1. Fetches new commits from GitHub 2. Merges them into your local branch 3. Your local repo is now up to date

Scenario: You edited README on github.com

GitHub has:     Commit 1, 2, 3, 4 (new!)
Your PC has:    Commit 1, 2, 3

After git pull:
Your PC has:    Commit 1, 2, 3, 4  ← now in sync!

Authentication — How Git Knows Who You Are

When you git push to GitHub, Git needs to verify your identity. There are two methods:

Method How It Works Setup
HTTPS + Credential Manager Stores your login securely in Windows ✅ Usually automatic on Windows
SSH Keys A special key pair on your machine Needs manual setup

On your machine, Git uses HTTPS with Git Credential Manager — it stores your GitHub credentials securely in Windows Credential Manager. You authenticated once (through GitHub Desktop or gh auth login), and Git remembers.

You don't need to set up SSH

HTTPS with Credential Manager is the simplest approach and it's what you're already using. SSH is an alternative that some developers prefer, but it's not required.

How Your Websites Work — The Full Flow Decoded

Now you can understand the complete workflow for aguidetocloud.com:

1. You edit files locally
   ↓
2. git add -A              (stage all changes)
   ↓
3. git commit -m "..."      (save snapshot locally)
   ↓
4. git push                 (send to GitHub)
   ↓
5. GitHub receives the push
   ↓
6. GitHub Actions triggers  (automated workflow)
   ↓
7. Hugo builds the site     (markdown → HTML)
   ↓
8. Deploys to Azure SWA     (HTML → live website)
   ↓
9. aguidetocloud.com is updated! 🎉

Every step in this chain uses something you've now learned!

✅ Module 5 Summary

┌──────────────────────────────────────────────────────┐
│                   Module 5 Recap                      │
├──────────────────────────────────────────────────────┤
│                                                       │
│  git remote add origin <url>  → Connect to GitHub    │
│  git push                     → Send commits up      │
│  git pull                     → Get commits down     │
│  git clone <url>              → Copy a repo locally  │
│                                                       │
│  origin = default remote name                        │
│  Authentication = Credential Manager (automatic)     │
│                                                       │
│  Your deploy flow:                                   │
│  edit → add → commit → push → Actions → Azure → 🌐 │
│                                                       │
│  ➡️ Next: Module 6 — Branches & Merging             │
└──────────────────────────────────────────────────────┘

🧪 Module 5 Quiz

Q1: What's the difference between git push and git pull?

git push sends your local commits TO GitHub (upload). git pull gets commits FROM GitHub to your machine (download). Push = up, Pull = down.

Q2: What does git clone do that downloading a ZIP doesn't?

git clone gives you the full history, all branches, and a remote connection back to GitHub. A ZIP download gives you just the current files — no history, no Git tracking, no connection.

Q3: What is 'origin' in Git?

It's the default name for your main remote repository (usually GitHub). When you run git push origin main, you're pushing to the remote named "origin" on the "main" branch.

Q4: After pushing to GitHub, you edit a file directly on github.com. How do you get that change on your local machine?

Run git pull — this fetches the new commits from GitHub and merges them into your local branch, bringing your local copy up to date.

Q5: Trace the full journey from editing a file to your website being live.

Edit file → git add (stage) → git commit (snapshot) → git push (send to GitHub) → GitHub Actions triggers → Hugo builds site → Deploys to Azure SWA → Website updated!

➡️ What's Next?

In Module 6: Branches & Merging, you'll learn how to work on features in parallel without breaking the main project — the most powerful concept in Git!