[Beginner's Guide to Git] How to Use Git & GitHub in VSCode

About Me: I Built Two Websites from Scratch, and I'll Be Your Guide

Hi there! Just a few months ago, I was a complete beginner with zero programming knowledge, just like many of you.

Driven by the desire to "create my own service," I dove into a world of trial and error with AI as my companion. In just a month and a half, I managed to single-handedly launch two websites: buyonjapan.com and copicode.com.

The biggest initial hurdle in that process was "Git" and "GitHub." I felt discouraged every time an error popped up, but by solving them one by one, they've now become my greatest allies. In this article, I'll share a condensed version of "what beginners really need to know," based on my personal experience.

[Step 0] Let's Warm Up! Get Your Tools Ready

Preparation is key. Before we dive into the real work, make sure you have these three tools installed on your PC. If not, just head to their official websites and install them quickly!

• VSCode (Visual Studio Code): This is our castle, a powerful code editor.
  ➡️ Go to the official VSCode website
• Git: A time machine that records and manages your file change history.
  ➡️ Go to the official Git website
• GitHub Account: An online safe for storing the history recorded by Git.
  ➡️ Go to the official GitHub website

💡 Common Beginner Issue: "I installed Git, but VSCode doesn't recognize it!"
In most cases, a simple PC restart will fix this. Try restarting your computer after installation. If that doesn't work, make sure to select the "(Recommended)" option during the Git installation, and you should be good to go.

[Step 1] Introduce Yourself to Git (First Time Only)

Just once, you need to introduce yourself to Git by saying, "It's me using this PC." This is to record your name on the save data (commits) you'll be creating.

First, open VSCode, go to the "Terminal" menu at the top, and select "New Terminal" to bring up the terminal (the black screen) at the bottom.

Once the terminal is up, copy and paste the following two commands one by one, and press Enter after each.

First, set your username. Replace "Your Name" with your GitHub username or similar.

git config --global user.name "Your Name"

Next, your email address. Replace "your.email@example.com" with the email address you registered on GitHub.

git config --global user.email "your.email@example.com"

If no message appears, you're successful. Git now remembers you! You won't need to do this again unless you get a new PC.

[Step 2] Start Monitoring Your Project (git init)

Now, let's actually put your project under Git's management. This is called "initializing a repository." It sounds complicated, but with VSCode, it's just a single click.

1. In VSCode, open the project folder you want to version control (e.g., the `my-project` folder).
2. From the Activity Bar on the left, click the third icon from the top, which looks like branching paths (Source Control).
3. You'll see a blue button that says "Initialize Repository." Click it without hesitation!

That's it! A hidden folder named .git will be created in your project folder, and Git will start monitoring your file changes. It's so easy, it's amazing, right?

While We're At It, Create a .gitignore File

In your project, you'll have files you don't want Git to monitor (or upload to GitHub), like personal information such as passwords or auto-generated files. The .gitignore file is where you specify these files.

Create a new file named .gitignore in the root (top level) of your project and list the file or folder names you want to ignore. For example:

# Files auto-generated by the OS
.DS_Store

# Config file for passwords, etc.
.env

# Folder where a large number of packages are installed
node_modules

💡 Tip: It's normal not to know what to ignore at first. A quick search for "[technology name] .gitignore" (e.g., Next.js .gitignore) will give you plenty of great templates.

[Step 3] Record Your Changes (Staging & Committing)

Now for the real power of Git. We're going to record file changes as "save points." This process is divided into two steps:

1. Staging: Selecting the changes to include in this save.
2. Committing: Finalizing the save point by adding a message to the selected changes.

Think of it like moving: you "pack items into a box (staging)" and then "label the box 'Kitchen Supplies' and seal it (committing)."

Let's give it a try. First, make a change to your project. For example, let's create a file named index.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Git Test</title>
</head>
<body>
  <h1>Hello, Git!</h1>
</body>
</html>

When you create and save a file, a badge like "1" will appear on the VSCode Source Control icon. This is a notification from Git that there is one change.

If you open the Source Control tab, you'll see index.html listed under "Changes."

1. Staging (git add)

Hover over the changed file and click the "+" icon (Stage Changes) that appears. Staging is now complete. This is the same as typing git add . in the terminal.

2. Committing (git commit)

Once staged, the file moves to the "Staged Changes" section. Next, in the message box at the top, enter a message that describes what you changed (e.g., Initial commit, Create index.html).

After entering the message, click the "Commit" button (or the checkmark icon). Your save point is now created! This is the same as typing git commit -m "message" in the terminal.

💡 A commit message is a letter to your future self!
It might seem like a hassle now, but when you're later wondering, "What was this change about?" a clear message will be a lifesaver. Get into the habit of writing specific messages like "Add X feature" or "Fix Y bug."

[Step 4] Upload to GitHub (git push)

Now that you've saved your changes on your local PC, it's time to store them in your online safe, GitHub. This is called "pushing."

1. Create an empty repository on GitHub

First, create a new repository (storage location) on the GitHub website. Enter a project name in the "Repository name" field (e.g., my-project) and click the "Create repository" button. That's it. If you choose "Private," only you will be able to see the repository.

2. Connect to GitHub from VSCode and push

This is the climax! Let's send your local save data to the GitHub repository you just created.

After committing, you should see a "Publish Branch" button in the Source Control tab. Click it.

An option to "Publish to GitHub" will appear. Select it. VSCode will automatically find the GitHub repository you just created. Select it, and... you're done!

The first time, you'll be asked to authenticate with your GitHub account. Your browser will open, and you just need to click the button to authorize.

🚨 The Most Important Stumbling Block! Authentication Errors
In the past, you could authenticate with a password, but for enhanced security, it's now common to use a special password called a **PAT (Personal Access Token)**. If you get an error like "incorrect password," it's almost certainly a sign that you need a PAT.

Creating a PAT involves a few steps, so the most reliable way is to check the official GitHub documentation. Use the link below to create a token with `repo` and `workflow` permissions, and then paste that token instead of your password.

➡️ Managing your personal access tokens - GitHub Docs

Once you've successfully authenticated, VSCode will remember it, and you'll be able to push with a single click from then on.

[Advanced] Work Safely by Creating Branches

Once you're comfortable with Git, you should definitely try using "branches." In short, a branch is a **"parallel world for your work."**

Making changes directly to the main save data (the main branch) is risky and can lead to bugs. Instead, when adding new features or experimenting with designs, you create a new branch and work freely there. Once your work is complete and you've confirmed there are no issues, you merge those changes into the main branch. This is a safe development workflow.

Creating a branch is also easy in VSCode.

1. Click the current branch name (initially main) in the status bar at the bottom left.
2. Select "+ Create new branch..." from the options that appear at the top of the screen.
3. Enter a new branch name (e.g., feature/add-new-page) and press Enter.

Just like that, you've switched to a new branch. From here, you just edit files → stage → commit → push (publish branch) as usual. If you can master this flow, you're already a competent Git user!

Conclusion: Git Isn't Scary, It's Your Ultimate Time Machine!

Great job! If you've followed the steps in this article, your code from your PC should now be safely stored in GitHub.

The operations we've covered are the most basic and crucial workflow for using Git and GitHub.

• git init in your working folder (initialize repository)
• Change a file and git add (stage)
• Add a message and git commit (commit)
• git push to GitHub (push)

It might seem difficult at first, but with daily use, it will become as natural as brushing your teeth. Git is your ultimate time machine, protecting your code and allowing you to revert to any past state. Don't be afraid of errors; ask AI, search for the error messages, and gradually become friends with it!