Skip to content

Visualising Git Workflow

drawing

The Git Workflow

Git has a three-stage architecture that gives you precise control over what gets saved in your project history.

The Three States

Every file in Git exists in one of three states:

1. 📁 Working Directory

This is your workspace - where you actually edit files.

# Your project folder
my-project/
├── index.html      ← Edit this file
├── style.css       ← Make changes here
└── script.js       ← Work on your code

Working Directory

  • Where you make changes to files
  • Just a normal folder on your computer
  • Changes here are NOT tracked yet

2. 📋 Staging Area (Index)

This is the preparation zone - where you choose which changes to include in your next commit.

# You edited 5 files, but only want to commit 3
$ git add index.html style.css
# Now these 2 files are "staged" and ready to commit

Why Staging?

The staging area lets you craft perfect commits. You can:

  • Group related changes together
  • Commit features one at a time
  • Review changes before committing
  • Leave unfinished work unstaged

3. 🗄️ Repository (Local Repo)

This is your permanent history - where Git stores all committed snapshots.

$ git commit -m "Add login feature"
# Your staged changes are now permanently saved in Git's history

Repository

  • Complete project history
  • Stored in the hidden .git folder
  • Can recover any previous version
  • Shareable with others

The Basic Git Workflow

Here's how the typical workflow looks:

Step-by-Step Example

# Edit your files in the working directory
$ nano index.html  # Make some changes

Status: Changes are in Working Directory ⚠️ (not tracked)

# Add files to staging area
$ git add index.html

Status: Changes are Staged ✓ (ready to commit)

# Commit staged changes with a message
$ git commit -m "Update homepage header"

Status: Changes are Committed 🎉 (saved in history)

# Continue working...
$ nano style.css      # Modify
$ git add style.css   # Stage
$ git commit -m "Fix button colors"  # Commit

Visualizing the Workflow

graph LR
    A[Working<br/>Directory] -->|git add| B[Staging<br/>Area]
    B -->|git commit| C[Repository]
    C -->|git checkout| A

    style A fill:#fff4e6,stroke:#ff9800,stroke-width:3px
    style B fill:#e8f5e9,stroke:#4caf50,stroke-width:3px
    style C fill:#e3f2fd,stroke:#2196f3,stroke-width:3px