Lesson 2: Your First Repository - Git & GitHub Course

📂 Step 0: Be in the Right Folder

Git commands act on whatever folder your terminal is "standing in." So before anything else, make sure that's your website folder.

In VS Code, choose File → Open Folder… and pick your my-website folder (the one that directly contains index.html). No site of your own? Use the starter site from your instructor.
Open the terminal with Ctrl + `. VS Code opens it inside the folder you opened, and the prompt shows that folder's path, ending in my-website.

Your folder should look something like this in VS Code's Explorer:

my-website/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── style.css
└── images/

Now a clever safety check. Run:

git status

Because this folder isn't a repository yet, Git should reply:

fatal: not a git repository (or any of the parent directories): .git

That's the answer you want right now. (The word "fatal" sounds dramatic, but it only means "I stopped, because there's no repository here." Nothing is broken.)

❌ Never run `git init` in your home folder or on your Desktop

If you run git init in the wrong place, like your user folder or your Desktop, Git starts tracking everything inside it: documents, photos, downloads, every other project. It gets confusing fast. Always check that your prompt ends in your project folder's name first. If git status in your site folder shows a long list of files you don't recognize instead of the "fatal" message, stop and ask your instructor: an earlier git init probably happened one level up.

🐣 Creating the Repository: `git init`

With your terminal in my-website, run:

git init

Git replies with something like:

Initialized empty Git repository in C:/Users/you/Documents/my-website/.git/

(On a Mac the path looks like /Users/you/Documents/my-website/.git/; on Linux, /home/you/….) That's it: your folder is now a repository, often shortened to repo. Your files haven't changed at all.

The hidden `.git` folder

git init created one new thing: a hidden folder named .git inside my-website. That folder is the repository. Every snapshot, every message, and the whole history of your site will live in there, compressed and organized by Git.

You won't see it in VS Code's Explorer, because VS Code hides it on purpose. Your computer's file browser hides it too, unless you turn on "show hidden files."
You never edit anything inside it by hand. Git manages it for you.

⚠️ Deleting `.git` deletes your history

If the .git folder is deleted, your website files stay, but every snapshot and every message is gone for good. So don't delete it, and when you copy or move your project, move the whole my-website folder, hidden .git and all. (This afternoon, GitHub will give you a backup copy of the history, too.)

👀 Your New Habit: `git status`

If you remember just one command today, make it this one. git status tells you what Git sees right now: which branch you're on, what's changed, and what's staged. It never changes anything, so you can run it as often as you like. Run it before and after everything you do.

git status

On branch main

No commits yet

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

nothing added to commit but untracked files present (use "git add" to track)

Let's read it line by line:

On branch main: you're on the main line of history (thanks to your Lesson 1 settings).
No commits yet: there are no snapshots so far.
Untracked files: files Git can see in the folder but isn't recording yet. Git doesn't start tracking a file until you tell it to.
The lines in parentheses are hints. Git's status output often tells you the exact next command to run. Read them!

💡 On a Mac? You might see `.DS_Store`

macOS quietly creates a file named .DS_Store in folders you've opened in Finder, and Windows sometimes creates Thumbs.db in image folders. They aren't part of your website. If one shows up in your list, don't worry: the next section keeps them out of your repository.

🙈 Ignoring Files with `.gitignore`

Before your first commit, let's tell Git which files it should never track. You do that with a plain text file named exactly .gitignore (starting with a dot, no extension) in the top of your project.

In VS Code's Explorer, click an empty spot below your files (so you're at the top level, not inside css), then click the New File… icon.
Name it .gitignore and press Enter.
Type these lines and save (Ctrl + S / Cmd + S):

# System files created by macOS and Windows
.DS_Store
Thumbs.db

Each line is a file name (or pattern) for Git to ignore. Lines starting with # are comments. Now run git status again: any .DS_Store or Thumbs.db has disappeared from the list, and a new untracked file, .gitignore, has appeared. You do commit the .gitignore file itself, so the rules stay with the project.

❌ Never commit secrets

Passwords, API keys, and access tokens must never go into a repository. Once something is committed, it's stored in the history, and deleting the file later doesn't remove it from older snapshots. Once you push to GitHub, it may even be public. A simple website like yours usually has no secrets, which is great. But if you ever get a key for a form service or a map, keep it out of your project files, and ask how that service recommends storing it.

💡 Do it early

.gitignore only affects files Git isn't tracking yet. If a file was already committed, adding it to .gitignore won't make Git forget it. That's why we set it up before the first commit.

📦 Stage and Commit

Remember the three areas from Lesson 1? Now you'll use them for real. git add moves changes into the staging area, and git commit saves everything staged as one snapshot.

graph LR A["✏️ Edit files"] --> B["👀 git status"] B --> C["📋 git add"] C --> D["📸 git commit -m"] D --> E["👀 git status
(working tree clean)"] E -->|"next change"| A style A fill:#fef3c7,stroke:#f59e0b,stroke-width:2px,color:#1e293b style C fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style D fill:#ecfdf5,stroke:#22c55e,stroke-width:2px,color:#1e293b

Staging with `git add`

There are three ways to tell git add what to stage:

# One file
git add .gitignore

# Several files at once (separate them with spaces)
git add index.html about.html contact.html

# A whole folder
git add css

# EVERYTHING that changed in this folder (note the dot)
git add .

The . means "this folder and everything in it." It's handy, but look at git status first so you know exactly what "everything" includes.

Your first commit

Let's start small and commit just the .gitignore:

git add .gitignore
git status

On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
	new file:   .gitignore

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

Changes to be committed is the staging area. The .gitignore is in it, ready to go. Everything else is still untracked. Now take the snapshot:

git commit -m "Add .gitignore for system files"

[main (root-commit) 9b951eb] Add .gitignore for system files
 1 file changed, 3 insertions(+)
 create mode 100644 .gitignore

🎉 That's your first commit! Here's what the reply means:

main: the branch the commit went on. root-commit means it's the very first one.
9b951eb: the short commit ID (a "hash"). Yours will be different, and that's expected: every commit gets its own unique ID.
The last lines summarize what changed. (100644 is just Git's way of saying "a normal file.")

More commits, each telling one story

Instead of dumping the whole site into one giant commit, group related files. Each commit is one step you can find later:

git add index.html about.html contact.html
git commit -m "Add home, about, and contact pages"

git add css
git commit -m "Add site stylesheet"

git add images
git commit -m "Add site images"

git status

When everything is committed, git status gives you the happiest message in Git:

On branch main
nothing to commit, working tree clean

"Working tree clean" means your folder exactly matches your latest snapshot. Nothing is waiting to be saved.

🪟 Windows: a warning about "LF will be replaced by CRLF"?

When you run git add, you might see: warning: in the working copy of 'index.html', LF will be replaced by CRLF the next time Git touches it. That's Git quietly handling the different ways Windows and Mac/Linux end lines of text. It's harmless, so you can ignore it.

Changing a file that's already tracked

Now edit a page. For example, add a sentence to about.html and save it. Then:

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:   about.html

no changes added to commit (use "git add" and/or "git commit -a")

Git noticed the file is modified compared to your last snapshot. Same routine as before, stage and commit:

git add about.html
git commit -m "Add hobbies section to About page"

(See that hint about git restore? It throws away changes. You'll learn to use it safely in Lesson 3.)

💡 Shortcut: `git commit -am`

That last line of the status output also hinted at git commit -a. The -a flag stages every already-tracked file that changed, then commits, so these two steps become one:

git commit -am "Add hobbies section to About page"

Two catches: it skips new (untracked) files, which still need git add first, and it stages everything you changed, so glance at git status before you use it. You'll see it in the next lessons for quick one-file edits.

⚠️ Forgot the `-m`?

If you type just git commit, Git opens a file named COMMIT_EDITMSG in VS Code (because you set core.editor in Lesson 1) and the terminal waits. Type your message on the first line, save, and close that tab. The commit finishes. If you close it without writing a message, Git cancels the commit ("Aborting commit due to empty commit message"), and nothing is lost.

📜 Reading History: `git log`

To see your snapshots, newest first:

git log

commit 3cfc1b8006f018a27765d9eef45175b1699138d4 (HEAD -> main)
Author: Ada Lovelace <ada@example.com>
Date:   Sat Sep 26 10:42:38 2026 -0700

    Add hobbies section to About page

commit 9cc816c169bd42600b9af3e62cc2e2cbc7e3d81a
Author: Ada Lovelace <ada@example.com>
Date:   Sat Sep 26 10:31:02 2026 -0700

    Add site images
:

Each entry shows the full commit ID, the author (from your Lesson 1 settings), the date, and the message. HEAD -> main marks where you are right now: the latest commit on main.

⚠️ Stuck in the log? Press `q`

When the history is longer than your terminal, Git shows it one screen at a time. You'll see a : or (END) at the bottom, and typing commands does nothing. That's the pager. Use ↑/↓ or Space to scroll, and press q to quit and get your prompt back. Everybody gets stuck here the first time!

The short version

Most of the time you only need the ID and the message, one commit per line:

git log --oneline

3cfc1b8 (HEAD -> main) Add hobbies section to About page
9cc816c Add site images
e56cc25 Add site stylesheet
a9a2faf Add home, about, and contact pages
9b951eb Add .gitignore for system files

Read from the bottom up and it's the story of your site. Here it is as a timeline:

gitGraph commit id: "9b951eb .gitignore" commit id: "a9a2faf pages" commit id: "e56cc25 stylesheet" commit id: "9cc816c images" commit id: "3cfc1b8 About hobbies"

✍️ Writing Good Commit Messages

Your commit messages are notes to your future self. In three weeks, "stuff" won't help you find the commit that broke the navigation. "Make nav links wrap on small screens" will.

❌ Vague	✅ Clear
`update`	`Add contact form to contact page`
`fixed it`	`Fix broken link to about page in footer`
`changes`	`Change heading font to improve readability`
`asdfgh`	`Compress hero image so the home page loads faster`

Three simple rules

Use the imperative mood, like giving an order: "Add footer," not "Added footer" or "Adding footer." A handy test: the message should complete the sentence "If applied, this commit will …"
Say what changed, and why if it isn't obvious. Keep the first line short (about 50 characters). If you want to explain more, add a second -m for a longer description:
```
git commit -m "Increase body text size" -m "Visitors said the text was hard to read on phones."
```
Keep commits small. One commit = one idea. If your message needs the word "and" three times, it's probably several commits. Small commits are easier to understand, and much easier to undo on their own (that's Lesson 3).

💡 Commit early, commit often

A good rhythm: every time you finish a small piece of work that you'd be sad to lose ("the footer looks right now"), commit. Commits are free, fast, and private until you push. There's no such thing as too many small, well-named commits.

🖱️ The Same Workflow in VS Code

VS Code has Git built in, and it runs the same commands you just typed. Once you understand the commands, the buttons will make total sense.

Colors and letters in the Explorer

Now that your folder is a repository, VS Code's Explorer colors file names and adds a letter on the right:

Badge	Meaning	In `git status` terms
U (usually green)	Untracked: a new file Git isn't recording yet	Untracked files
M (usually amber)	Modified: changed since the last commit	modified:
A	Added: a new file that's been staged	new file: (Changes to be committed)
D	Deleted: removed since the last commit	deleted:
(no badge)	Unchanged since the last commit	working tree clean

Folders get a colored dot when something inside them changed, so you can spot changes at a glance.

Committing from the Source Control panel

Make a change, for example edit a heading in contact.html, and save. It gets an M.
Open Source Control: click the branching icon in the Activity Bar on the left, or press Ctrl + Shift + G (Cmd + Shift + G on a Mac). A number on the icon shows how many files have changed.
Under Changes, click the file name to open a side-by-side view of exactly what changed (old on the left, new on the right).
Hover over the file and click the + (Stage Changes). It moves up into a Staged Changes section. That's git add.
Type your message in the Message box at the top, for example Update contact page heading.
Click the ✓ Commit button. That's git commit -m.
Back in the terminal, run git log --oneline. Your VS Code commit is right there with the ones you typed, because it's the same Git underneath.

graph LR A["Explorer shows M"] --> B["Source Control: click +
(= git add)"] B --> C["Type a message"] C --> D["✓ Commit
(= git commit -m)"] style B fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style D fill:#ecfdf5,stroke:#22c55e,stroke-width:2px,color:#1e293b

💡 Good to know about the panel

The + next to the Changes heading stages all changed files at once, like git add .
If you click Commit with nothing staged, VS Code may ask whether to stage all your changes and commit them directly. That's fine when you really do want everything in one commit.
Avoid the curved-arrow Discard Changes icon for now. It throws your edits away (you'll learn about undoing in Lesson 3).
After a commit, the button may change to Publish Branch. That's for sending your work to GitHub, which you'll do in Lesson 5. Ignore it for now.
Button labels and icons shift a little between VS Code versions. If something looks slightly different, hover over the icons to read their tooltips.

Terminal or buttons? Use whichever you like. Many developers use both: buttons for everyday commits, and the terminal when they want to see exactly what's going on.

❓ Common Questions

Git says "Author identity unknown" / "Please tell me who you are."

Your name and email aren't configured on this computer. Run the two git config --global user.name and user.email commands from Lesson 1, then try the commit again.

I ran git init in the wrong folder. Now what?

Don't panic, and don't start deleting things. Tell your instructor. The fix is to remove that one hidden .git folder from the wrong place, which is safe as long as it has no history you want. Double-check which folder it's in before touching it.

Does committing save my files? Do I still need Ctrl + S?

Yes, you still save! Git only sees what's saved on disk. An unsaved edit in VS Code (the tab shows a dot) isn't in your folder yet, so Git can't stage it. Save the file first, then stage and commit.

Does committing put my site online?

No. Commits live only in the .git folder on your computer. Your Netlify site doesn't change. You'll connect Git, GitHub, and Netlify this afternoon.

Hands-on Exercise

🏋️ Exercise: Put Your Website Under Version Control

Objective: Turn your my-website folder into a repository and record its current state in a few meaningful commits, then make one real improvement and commit it from VS Code.

Instructions:

Open your my-website folder in VS Code and open the terminal. Run git status and confirm you see the "not a git repository" message.
Run git init, then git status.
Create a .gitignore file in VS Code with .DS_Store and Thumbs.db on separate lines. Save it. Commit it on its own.
Commit your HTML pages together, with a clear message.
Commit your css folder, with a clear message.
Commit your images folder (and anything else left), with a clear message. Run git status and confirm working tree clean.
Make one small real improvement to your site (fix a typo, add a sentence, tweak a color). Save it and check the M badge. View your page with Live Server if you like.
Stage and commit that change using the Source Control panel, not the terminal.
Run git log --oneline (press q if you get stuck in the pager).

Deliverable: git log --oneline showing at least 5 commits, each with a clear, imperative message, and git status reporting nothing to commit, working tree clean.

💡 Hint

Run git status before and after every step. It tells you what's untracked, what's staged, and often the exact command to type next. If a folder like images doesn't appear in the list, check whether it's empty: Git only tracks files, so an empty folder is invisible to it. If your site has different file names, use yours.

✅ Solution

Here's one good sequence (your file names, messages, and commit IDs may differ):

git status
git init
git status

# After creating and saving .gitignore in VS Code:
git add .gitignore
git commit -m "Add .gitignore for system files"

git add index.html about.html contact.html
git commit -m "Add home, about, and contact pages"

git add css
git commit -m "Add site stylesheet"

git add .
git commit -m "Add site images"

git status

Then, after editing a page and committing it from the Source Control panel:

git log --oneline

7d4e2a1 (HEAD -> main) Fix typo in About page intro
9cc816c Add site images
e56cc25 Add site stylesheet
a9a2faf Add home, about, and contact pages
9b951eb Add .gitignore for system files

🌟 Want to go further?

Make two unrelated changes (say, a new sentence in about.html and a new color in style.css), then commit them as two separate commits by staging one file at a time. This is the staging area doing exactly what it was designed for. Then try git log --oneline -3 to see only the last three commits, and git log --stat to see which files each commit touched.

🎯 Quick Quiz

Question 1: Where should you run git init for your website?

Question 2: git status lists about.html under "Changes not staged for commit" as modified. What do you do to include it in your next commit?

Question 3: Which commit message is the best?

Question 4: You ran git log and the terminal shows a : at the bottom. Typing commands does nothing. What should you press?

Question 5: In VS Code's Explorer, new-page.html shows a green U. What does that mean?

📓 Learning Journal

Take five minutes to add to your learning journal. Write down:

Key concepts you learned
What clicked — the idea or technique that made sense
Questions or confusion, so you know what to revisit
Ideas to try on your own pages
How you feel about your progress

✍️ This lesson's prompt: Copy your git log --oneline output into your journal. Read it from the bottom up: does it tell the story of your site? Pick your weakest message and rewrite it using the imperative-mood test ("If applied, this commit will…"). Finally, which felt more natural to you, typing commands or clicking in the Source Control panel, and why?

Summary

🎉 Key Takeaways

git init turns your project folder into a repository. Run it only in the project folder, never your home folder or Desktop
The hidden .git folder is the repository. Deleting it deletes your history
git status is your habit: run it before and after everything, and read its hints
git add stages changes (a file, a folder, or . for everything); git commit -m saves them as a snapshot
git log and git log --oneline show your history; press q to leave the pager
Good messages are imperative, specific, and short; good commits are small and about one idea
.gitignore keeps files like .DS_Store and Thumbs.db out, and secrets never go in a repository
VS Code's Source Control panel does the same thing: + stages, ✓ Commit commits; U = untracked, M = modified

📚 Additional Resources

🚀 What's Next?

You have a history now, so let's use it! In the next lesson, you'll compare versions with git diff, peek at old snapshots, and climb the undo ladder: throwing away a bad edit, unstaging a file, fixing your last commit, and safely reversing a commit you regret.