Using Git with GitHub and VS Code: Part 1

Git is a version control system while GitHub is a cloud-based platform for hosting repositories. These repositories are storage spaces for project files. Using Visual Studio Code (VS Code), we can interact with GitHub through Git. This guide illustrates how this interaction works on Windows. We'll cover steps such as cloning, add to staging, committing, and more.

Configure Git

Configure Git with your username and email. You can do this by running these commands in the VS Code terminal:

git config --global user.name "Your GitHub Username"
git config --global user.email "your.email@example.com"

Use the same email and username for git config that you use on GitHub. This helps ensure that your commits are associated with your GitHub account.

To check if git config for username and email has already been set up, run git config --list.

Clone a Repository

Cloning means copying a repository from remote to our local machine. That means copying the repository from GitHub.com to local.

Let’s first create a repository on GitHub.com (from now on, referred to simply as GitHub).

For this guide, we’ll create a repository named github_demo1.

To clone the repository, we’ll use the command git clone <repository-url>.

Step 1: Click the Code drop-down button on the GitHub repository page.

Step 2: Copy the URL provided under HTTPS:

Step 3: Open VS Code and use the cd command to navigate to the directory where you want to clone.

Step 4: Use the git clone command followed by the repository URL you copied from GitHub.

You can now use the cd command to navigate to the local repository folder.

Make Changes to the Local Repository

Step 1: Edit the readme to add a sentence:

Step 2: Create a file in the repository directory. We’ll create a Python file with a colors list.

Step 3: Let’s stage the changes in one go using the command: git add .

Step 4: After staging, commit the changes: git commit -m "Edited README and added new file"

Step 5: Committing changes means they are saved in your local repository. To update the remote repository on GitHub, you need to push the committed changes. To do that: git push origin main

By default, when you clone a repository, the default name of the remote repository is set to origin. The name of the default branch in the repository is main.

On GitHub, we can verify the changes:

Create a Repository Locally

Now, what if we want to start a repository locally? To do that:

Step 1: Create a directory, for example, github_demo2, and then move into that directory.

Step 2: Initialize the empty Git repository with the command: git init

Step 3: We'll create a file in the repository. In this case, we’ll create a README.md file.

Step 4: Stage the file: git add README.md

Step 5: Commit the file: git commit -m “Added Readme.”

Step 6: Go to GitHub and create a repository with the same name as the directory you created. Don’t initialize with a Readme file.

Step 7: Copy the repository URL:

Step 8: On VS Code terminal, add the URL of the repository as a remote in your local repository:

git remote add origin <repository-url>

Step 9: Push the local commits to GitHub: git push -u origin main

We can verify that the Readme is on GitHub:

So, that’s how we start a repository locally and connect it with the remote GitHub repository.

Whether cloning a repository or starting one locally, the general steps for working on a project are depicted in this diagram:

The workflow for working on a project: 1. Make changes or add new files on your local machine. 2. Add to staging using git add. 3. Commit the staged changes using git commit. 4. Push the committed changes to the remote repository using git push.

Congratulations! We’ve covered cloning a repository and starting a local repository. In the next part of this guide, we’ll explore undoing changes, and managing branching and merging.