Your First Git Repository and First Commit, Step by Step (Part 7)

To make your first commit, open your project folder in a terminal and run git init to create a repository. Then run git add . to stage your files and git commit -m "First commit" to save the snapshot. Check the result with git log. You can do the same with buttons in VS Code or GitHub Desktop.

Sneha remembers the exact moment: Sunday evening, laptop on the dining table, her mother asking what she was smiling at. On the screen was a single line, 1a2b3c4 Add bakery homepage. Her first commit. It looked tiny, but it meant her work could never be lost the way it was that weekend in Part 1. In Part 4 you learned the three areas, in Part 5 you installed Git and in Part 6 you created a GitHub account. Now, in Part 7, you will create a small portfolio page, turn it into a Git repository and save your own first snapshot. It takes about 15 minutes.

What will we build?

A one-page portfolio site with two files: index.html and style.css. It is deliberately tiny, so you can focus on Git rather than code. In Part 18 we will publish this same project online for free with GitHub Pages.

Step 1: How do I create the project folder?

Create a folder called my-portfolio somewhere easy to find, such as Documents. Avoid OneDrive, iCloud or Google Drive sync folders, as sync tools can interfere with Git's hidden folder. Open the folder in VS Code (File, Open Folder) and create index.html with this content:

Replace the name and city with your own. Save the file.

Also readHow Git Thinks: Working Folder, Staging Area and Repository Explained (Part 4)→

Step 2: How do I turn a folder into a Git repository?

Open a terminal inside the folder. In VS Code, use Terminal, New Terminal; it opens in the right place automatically. Then run git init:

Git has created the hidden .git folder from Part 4. Your index.html is "untracked": Git can see it but is not recording it yet. Notice "On branch main", thanks to the setting you configured in Part 5.

Step 3: How do I make my first commit?

Two commands: stage, then commit.

Step 4: How do I commit a second change?

Let us add some style. Create style.css with a line such as body { font-family: sans-serif; background: #f5f3ff; }, and add <link rel="stylesheet" href="style.css"> inside the <head> of index.html. Now:

How do I do the same with VS Code buttons?

VS Code shows the three areas visually. Click the Source Control icon on the left sidebar.

• If the folder is not a repository yet, click Initialize Repository. This is git init.
• Changed files appear under Changes. Hover over a file and click + to stage it. This is git add.
• Staged files move to Staged Changes.
• Type a message in the box at the top and click Commit. This is git commit.
• Click any file to see a side-by-side diff in red and green.

How do I do it with GitHub Desktop?

In GitHub Desktop, choose File, then Add local repository and pick your my-portfolio folder. If it is not a repository yet, the app offers to create one. Changed files appear on the left with tick boxes; ticked files are staged. Write a summary in the box at the bottom left and click Commit to main. The History tab shows your commits.

How do I write a good commit message?

A commit message is a note to your future self. Six months from now, "Fix contact form email" will be useful; "changes" will not. The git commit documentation recommends a short summary line, ideally under about 50 characters.

What are common first-commit problems?

Also readHow to Install Git, VS Code and GitHub Desktop on Windows and Mac (Part 5)→

Her View

Your first commit deserves a small celebration. It marks the moment your work stopped being fragile. Many learners say this is when Git finally "clicks", because the abstract ideas suddenly become a real line of history on their own screen. Take a screenshot of your first git log; one day you will smile at it, just like Sneha does.

His Insight

Build the habit now: run git status before and after every Git command. It always tells you which area your changes are in and often suggests the next command. Commit small, logical units of work with clear messages. These two habits prevent most beginner mistakes.

H View Verdict

git init, git add and git commit are the heart of Git, and you have now used all three. Your project has a real history. In Part 8 we learn to read that history in depth with git status, git log and git diff.

Self-assessment: test yourself

Ready? Tap an option for each question. You will see right away whether you got it, with a short explanation, and your score at the end. Take your time, and try again as often as you like.

Frequently asked questions

Is my first commit on GitHub now?

Not yet. Commits are saved on your computer. We send them to GitHub with git push in Part 9.

How often should I commit?

Whenever you finish a small, meaningful piece of work, such as a fixed bug or a new section. Many developers commit several times an hour.

Can I change a commit message after committing?

Yes, for the most recent commit, with git commit --amend -m "New message", as long as you have not pushed it yet. Part 11 covers undoing safely.

Can I use git init in an existing project?

Yes. Running git init in any folder with files starts tracking it from that point onwards. Earlier versions are not recovered, but every future change is.