Git & GitHub・Your first commit

Your first commit

Put your own site folder under Git and make your first record. Includes why add and commit are two separate steps, explained as packing a box and sealing it.

Once Git is installed, put your own site folder under version control. This lesson needs only four commands: init, status, add, and commit.

The folder we’ll use

We’ll use the folder for Shima’s profile page. If you have a work-in-progress folder of your own, use that instead.

my-site/
├── images/
│   └── shima.png
├── index.html
├── script.js
└── style.css

In the terminal, move into that folder:

cd my-site

1. git init — put this folder under Git

git init

Initialized empty Git repository ... means it worked. This folder is now a repository — a folder whose history is recorded.

Nothing looks different, but a hidden .git folder now exists inside. That’s where the history lives. Deleting it deletes your history, so leave it alone.

2. git status — ask where things stand

When in doubt with Git, type this first.

git status

The first time, you get something like this (exact wording varies):

On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        images/
        index.html
        script.js
        style.css

Untracked files means “files Git isn’t recording yet.” Git never records a file just because it’s in the folder. You choose what gets recorded — that’s Git’s basic stance.

3. git add — put files in the box

git add index.html

index.html is now “going into the next record.” To include everything, use ., meaning everything in the current folder:

git add .

Run git status again and those files have moved to Changes to be committed.

4. git commit — make the record

git commit -m "Build the page skeleton"

What follows -m is the commit message — one line about what you did. Your first commit is now recorded.

Write messages as letters to your future self.

✕ Vague○ Clear
fixChange the heading color
stuffAdd the favorites list
updateAdd the send button behavior

5. git log — look at the records

git log --oneline

--oneline prints one commit per line, which is much easier to scan.

a1b2c3d Build the page skeleton

As you commit, this list grows, newest first. The characters on the left are the commit ID — that commit’s serial number, which you’ll use later when you want to return to a particular point.

The three you’ll repeat every day

Once it’s habit, daily work looks like this:

git status          # see what changed
git add .           # choose what to record
git commit -m "Add ..."   # record it with a message

Committing at every natural stopping point takes the fear out of large edits.

Summary of this lesson

  1. git init makes a folder a repository. The history itself lives in .git
  2. git add puts things in the box, git commit seals it as a record. The split lets you choose what’s included
  3. When stuck, git status. To see your records, git log --oneline

FAQ

Why are git add and git commit separate steps?
So you can choose which files go into this particular record. add puts the files you want into a box, and commit seals that box as one record.
What does the dot in git add . mean?
"Everything in the current folder." Use it when you want all your changed files included at once.
What should I write in a commit message?
A short line describing what you did. "Fix" alone won't mean anything later, so include the target and the action, like "Add the favorites list."