DocCraft

English

ไธญๆ–‡

English

ไธญๆ–‡

Appearance

๐Ÿ”„ Chapter 4: Basic Workflow โ€” Git's Daily Routine โ€‹

Git's Three Trees โ€‹

The key to understanding Git's workflow is understanding the "three trees" concept. Imagine you're a chef preparing a dish:

text
๐ŸŒณ Working Directory    โ†’  Your cutting board, where you chop ingredients
๐ŸŒณ Staging Area / Index โ†’  The plate, where prepared ingredients are placed
๐ŸŒณ Repository / HEAD    โ†’  The fridge, where finished dishes are stored

The workflow is: Modify on the cutting board โ†’ Put on the plate (add) โ†’ Store in the fridge (commit)

git status โ€” Check What's Going On Anytime โ€‹

This is the command you'll use most often, hands down. It's like a mirror that tells you the current state at any time.

bash
git status
On branch main
nothing to commit, working tree clean

# Now modify index.html
echo '<p>Welcome to my website!</p>' >> index.html

git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html
no changes added to commit (use "git add" to track)

๐Ÿ“ Note: See? Git tells you that index.html has been modified but hasn't been added to the staging area. The status changed from green to yellow (metaphorically), indicating "something changed and you haven't dealt with it yet."

git add โ€” Put Ingredients on the Plate โ€‹

bash
# Add a single file
git add index.html

# Add multiple files
git add index.html style.css app.js

# Add all changes (including new files and modified files)
git add .

# Interactive add (select content to add line by line)
git add -p

๐Ÿ’ก Tip: git add -p is a severely underrated command! It lets you select changes to stage chunk by chunk. For example, if you made two unrelated changes, you can use it to stage only one of them. This keeps your commit history much cleaner.

git commit โ€” Store in the Fridge โ€‹

bash
# Standard commit
git commit -m "feat: add welcome message"

# Add all tracked file changes and commit (skips the add step)
git commit -am "fix: fix title typo"

# Amend the previous commit (no new changes)
git commit --amend -m "fix: fix title typo (corrected description)"

# Amend the previous commit (with new changes)
git add forgotten-file.js
git commit --amend --no-edit

โš ๏ธ Warning: git commit -am can only add changes to already-tracked files. Newly created files (untracked) must first be git added. This is a common pitfall for beginners!

git diff โ€” See What Changed โ€‹

Sometimes you've changed a bunch of things and suddenly want to know exactly what changed. git diff is your best friend.

bash
# View differences between working directory and staging area (changed but not added)
git diff

# View differences between staging area and last commit (added but not committed)
git diff --staged
diff --git a/index.html b/index.html
index 7a8b9c0..d1e2f3a 100644
--- a/index.html
+++ b/index.html
@@ -4,4 +4,5 @@
   <title>My First Website</title>
 </head>
 <body>
   <h1>Hello, Git!</h1>
+  <p>Welcome to my website!</p>
 </body>
</html>

# View differences between two commits
git diff a1b2c3d..f4e5d6c

# View differences for a specific file
git diff index.html

git log โ€” Browse the History โ€‹

bash
# Basic usage
git log
commit f4e5d6c7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3 (HEAD -> main)
Author: Your Name <your.email@example.com>
Date:   Thu Jun 20 10:30:00 2025 +0800

    feat: add welcome message

commit a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0
Author: Your Name <your.email@example.com>
Date:   Thu Jun 20 10:00:00 2025 +0800

    feat: create homepage, Hello Git!

# One-line display (recommended! more concise)
git log --oneline
f4e5d6c (HEAD -> main) feat: add welcome message
a1b2c3d feat: create homepage, Hello Git!

# One-line with graph (essential for viewing branches!)
git log --oneline --graph --all
* f4e5d6c (HEAD -> main) feat: add welcome message
* a1b2c3d feat: create homepage, Hello Git!

# View the last 5 commits
git log --oneline -5

# View commit history for a specific file
git log --oneline -- index.html

# Search commit messages
git log --oneline --grep="feat"

๐Ÿ’ก Tip: Consider setting up a nice alias: git config --global alias.lg "log --oneline --graph --all --decorate" โ€” then just git lg to see a beautiful commit history.

Commit Message Conventions โ€‹

Writing good commit messages is an art. Good commit messages help you (and your teammates) understand what changed even three months from now.

text
# Recommended format (Conventional Commits)
# <type>: <short description>
#
# <detailed explanation (optional)>
#
# <related issue (optional)>

# Common types:
# feat:     New feature
# fix:      Bug fix
# docs:     Documentation changes
# style:    Code formatting (doesn't affect functionality)
# refactor: Refactoring
# test:     Test-related changes
# chore:    Build/tool-related changes
text
# โŒ Bad commit messages
git commit -m "changed some stuff"
git commit -m "fix bug"
git commit -m "update"

# โœ… Good commit messages
git commit -m "fix: fix login page style misalignment on Safari"
git commit -m "feat: add user avatar upload feature"
git commit -m "refactor: extract database connection logic into independent module"

Related Posts