The Basic Git Workflow

Now that you've created your first repository, let's dive deeper into the everyday Git workflow. This is the cycle you'll repeat hundreds of times as a developer.

The Three Areas

Git manages your files across three main areas:

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│  Working        │     │    Staging      │     │   Repository    │
│  Directory      │ ──→ │    Area         │ ──→ │   (.git)        │
│                 │     │    (Index)      │     │                 │
│  (Your files)   │     │  (Next commit)  │     │  (All commits)  │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │                       │
   git add ──────────────────→  │                       │
        │                git commit ──────────────────→ │
        │                       │                       │
   ←──────────────────── git checkout ←─────────────────│

Area	Description
Working Directory	The files you see and edit
Staging Area	Changes queued for the next commit
Repository	Permanent storage of all commits

The Basic Cycle

Step 1: Make Changes

Edit files in your working directory:

# Create or edit a file
echo "function greet() { return 'Hello!'; }" > utils.js

Step 2: Check Status

See what's changed:

git status

Output:

On branch main
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        utils.js

Step 3: Stage Changes

Add files to the staging area:

git add utils.js

Check status again:

git status

Output:

On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   utils.js

Step 4: Commit

Save the staged changes:

git commit -m "Add utils.js with greet function"

Step 5: Repeat

Continue making changes, staging, and committing.

Understanding git add

The git add command has several forms:

# Add a specific file
git add filename.js

# Add multiple specific files
git add file1.js file2.js file3.js

# Add all files in a directory
git add src/

# Add all changes in the current directory
git add .

# Add all changes everywhere
git add -A

# Interactively choose what to add
git add -p

What git add Does

1. Takes a snapshot of the file's current content
2. Stores it in the staging area
3. Prepares it for the next commit

If you modify a file after git add, you need to add it again to include the new changes.

Understanding git commit

The git commit command has several forms:

# Commit with inline message
git commit -m "Your commit message"

# Commit with multi-line message (opens editor)
git commit

# Add all tracked files and commit
git commit -a -m "Message"
# or
git commit -am "Message"

# Amend the last commit
git commit --amend

What git commit Does

1. Takes everything in the staging area
2. Creates a new commit object with:
   • A unique SHA hash
   • Your author info
   • A timestamp
   • Your commit message
   • A pointer to the parent commit
3. Updates the branch pointer to the new commit

Viewing Changes

git diff

See what changed in the working directory (unstaged changes):

git diff

See what's staged for commit:

git diff --staged
# or
git diff --cached

Compare two commits:

git diff abc123 def456

Example diff output

diff --git a/utils.js b/utils.js
index 1234567..abcdefg 100644
--- a/utils.js
+++ b/utils.js
@@ -1 +1,5 @@
 function greet() { return 'Hello!'; }
+
+function farewell() {
+  return 'Goodbye!';
+}

• Lines starting with - were removed
• Lines starting with + were added

Viewing History

git log

See the commit history:

# Full log
git log

# One line per commit
git log --oneline

# With graph showing branches
git log --oneline --graph

# Last 5 commits
git log -5

# Commits by a specific author
git log --author="Your Name"

# Commits affecting a specific file
git log -- filename.js

git show

View a specific commit:

# Show the latest commit
git show

# Show a specific commit
git show abc1234

# Show just the files changed
git show --stat abc1234

Removing and Moving Files

Removing Files

# Remove from Git and filesystem
git rm filename.js

# Remove from Git only (keep the file)
git rm --cached filename.js

# After removing, commit the change
git commit -m "Remove filename.js"

Moving/Renaming Files

# Rename a file
git mv oldname.js newname.js

# This is equivalent to:
# mv oldname.js newname.js
# git rm oldname.js
# git add newname.js

# Commit the rename
git commit -m "Rename oldname.js to newname.js"

Exercise: Practice the Workflow

Practice the complete workflow: create a file, modify it, stage the changes, and commit:

Best Practices

Commit Often

• Small, focused commits are easier to understand
• Easier to find and fix bugs
• Easier to review and revert

Write Good Commit Messages

• Use present tense: "Add feature" not "Added feature"
• Be specific: "Fix login validation bug" not "Fix bug"
• Keep the first line under 50 characters

Stage Selectively

• Only stage related changes together
• Use git add -p for fine-grained control
• Review staged changes before committing

Common Mistakes

Committing Too Much at Once

❌ Bad:

git add .
git commit -m "Update everything"

✅ Good:

git add login.js
git commit -m "Add login form validation"

git add styles.css
git commit -m "Fix button hover styles"

Forgetting to Stage

# Modify file
echo "changes" > file.js

# Oops, forgot to add!
git commit -m "Update file"
# Nothing committed because nothing was staged

# Fix it
git add file.js
git commit -m "Update file"

Summary

• Git uses three areas: working directory, staging area, and repository
• The basic workflow is: edit → git add → git commit → repeat
• Use git status frequently to see what's going on
• Use git diff to see exactly what changed
• Use git log to view commit history
• Commit often with clear, focused messages

In the next module, we'll explore the staging area and commits in more depth.