git add & git commit

Save your first snapshots

Lesson 3 of 20 · 9 min · Module 1: Your first repository

A commit is a snapshot of your project that you can always return to. You decide exactly what goes into each one.

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Describe the working tree, staging area and repository
Stage chosen files with git add
Save snapshots with git commit -m

The idea

Git has a staging area between your files and the history. git add puts changes into the next snapshot, and git commit -m "message" saves that snapshot with a message. git add index.html stages one file; git add . stages everything in the current folder. A good message says what the snapshot does, such as Add home page.

git add index.html
git commit -m "Add home page"
git add .
git commit -m "Add the other pages"

01Three places for your work

You edit files in the working tree. git add copies changes into the staging area, also called the index: the draft of your next commit. git commit saves that draft in the repository as a new snapshot.

02Stage exactly what belongs together

git add takes file names, folders, or . for everything in the current folder. git status lists staged files under Changes to be committed.

git add index.html style.css
git status

Output

On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
	new file:   index.html
	new file:   style.css

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	README.md
	about.md
	menu.txt

03Commit with a message

git commit -m saves the staged snapshot. Git answers with the branch, the short hash that names the new commit, your message, and a summary of the changes.

git commit -m "Add home page and styles"

Output

[main (root-commit) 289ffe8] Add home page and styles
 2 files changed, 14 insertions(+)
 create mode 100644 index.html
 create mode 100644 style.css

Your turn

Stage only index.html and style.css and commit them as Add home page and styles. Then stage everything else with git add . and commit it as Add about page, menu and README. Finish with git status and git log --oneline.

What the checks look for

Two commits, oldest first: the home page, then the rest
The first commit holds index.html and style.css only
The second commit adds the other files
Nothing is left to commit

Try it in the editor →

Take this with you

git add chooses what goes into the next snapshot; git commit -m saves it.

Go a little further

Run git status after every command of the solution and watch the files move from Untracked files to Changes to be committed, and then disappear.