Introduction

If you are just starting your technical writing or software development journey, understanding Git and GitHub is key to excelling in your career.

What is Git and GitHub?

Git is an open-source version history server for code. It is similar to the Google Docs version history that helps to save all the changes you make to a document. Git saves all the changes you make to your code and makes it easy to go back or retrieve a previous version of the code. As open-source software, its source code can be edited by anyone aside from the owner of the code.

Also, when you integrate your code with Git, changes to the code are tracked through a distributed version control channel. This implies that you can access code integrated into Git from any other computer, and so can other developers working on the project with you. Additionally, Git can track the state of your code during modification, making it easy to retrieve the previous version of a code even after editing it.

However, when working on an open-source project with Git, you need a platform to organize your work, track changes, and control the individual version of your project. This is where GitHub comes in. GitHub is like a hub or platform where Git users build software together. Despite Git and GitHub being two different software, they are often used together to effectively develop software applications.

This tutorial explains everything you should know about Git and GitHub and how they work. It is divided into three parts. Part 1 covers Git, Part 2 covers GitHub, and Part 3 covers some advanced aspects of both.

Let's get started!

Project Setup

• If you don't already have git installed on your computer, go to git-scm.com and follow the installer guide to install.

• After installation, open PowerShell on Windows or Terminal via Xcode on Mac.

• Type git and click “enter” to run.

Result:

Note: The above prompt verifies that git is successfully installed. If this doesn't work, try the installation process again.

Prerequisite

This tutorial is beginner-friendly. You don't need any prior knowledge of Git to understand how it works. However, you will need a code editor to follow along. I used the popular code editor, VS Code.

First, create a folder on your computer and open it with your code editor.

Now, let's dive into the tutorial.

6 Different Functionalities You Can Perform with Git

This section explains the 6 different functionality you can perform with Git. Before we get into these 6 functionalities, here are a few things to know about Git.

Git is mainly used from the command line, Terminal on Mac, or PowerShell on Windows. The command line is where we give commands or instructions to the computer. When you open it, any action you perform is saved in a hidden folder on the command line known as the Home Folder.

As such, the first step when using the command line for Git is to run the cd command. cd stands for change directory. A directory in Git is the same as a folder on your computer.

Below are 6 functionalities you can perform with Git.

How to Create a Version History with Git

1. Type and enter the command below:

   cd ~/Desktop/git-tutorial

2. Type and enter git init

   These two commands set up Git inside your folder. Git is now tracking all the files in the folder for changes.

3. Type and enter the git status

   The git status command shows the status of the files you have integrated with Git. You will see the text "untracked files," as shown below:

   

4. To start tracking the folder with Git, run git add .
   Note: The dot in the command tells Git to track all files in the folder. If you don't want this, replace the dot with the name of the specific file you want to track just like this git add config.js

   Config.js is the name of a file in the folder I set up with Git. If I run this command, only the config.js file will be added to Git.

5. Type and enter git status

   Git is now tracking our code. Let's start making changes to create different versions of the code.

6. To create a new version, run the command git commit -m

   Note: A version in Git is called a commit.

   When you run the commit command, make sure to name your commit. For clarity, I will name this version 1.

Result:

7. If you get an error message after running the command, it means Git needs you to set up your name and email. To do this, run these three commands below:

   • git config --global user.email "your Email"

   • git config --global user.name "your Name"

   • Next, run the git commit command again.

     Note: It's a good idea to add your name and email to your commits, especially if you're not the only one working on the project. If something goes wrong, your teammates will know who to contact.

8. Run git log to see your commit history.

   If your result looks like this, you've just learned how to create version history in Git.

What to Do When You Make a Mistake

Let's say you made a mistake in your commit message or forgot to add a change. How do you fix this?

Simply run these commands:

1. git add .

2. git commit -m "Version 1" --amend

3. git log

Note: When you use --amend with a command, Git updates the previous commit.

After running these commands, your result should look like this:

Note: In the screenshot above, we still have only one version of the commit in our version history, even after running the amend commit. This shows that Git only fixes the mistake in the first commit when the second one is run.

Now that we've learned how to create a version history in Git and how to fix mistakes, the next question is:

Can you use Git from your code editor?

Yes.

Here's how to:

How to Visualize all Git Changes Inside Your Editor

In VS Code, you can easily see the changes you've made to previous versions of your code that are integrated with Git. To do this:

1. First, make some changes to the code you have already integrated with Git. For example, change the Version 1 code in index.js and config.js to Version 2.

2. To view Git changes in VS Code, click the source control icon among the icons listed in the left corner of the page.

Result:

Note: This display is the same as running the git status command.

When you select one of the changes, you can easily view both the previous and recent changes made to the code. This makes it simple to work on your Git files directly from the code editor, not just from the command line.

We can also perform other functions on our Git files directly from the code editor. For example:

1. To run git add from the code editor, hover over the changes you want to add and click the plus button.

2. To add all changes, hover over "Changes" and click the plus sign next to it. Once you do this, the changes are moved to an area called "Staged Changes," as shown below:

Note: The staged changes are commonly known as the staging area in software development. It is where git stores the changes we have successfully integrated. Below the staging area are the changes we have made but have yet to push to git; this area is called the working area. All changes start in the working area.

Let's try making changes to the code already pushed into the staging area and see what happens.

Result:

Note: When we edited the code already pushed to the staging area, the same file appeared in both the staging area and the working area. This is because, although the previous changes in the file have been pushed to the staging area, the current changes have not been pushed yet.

Git tracks changes, not files. To push the new changes, use the plus sign as explained in step 2 above.

How to Remove Changes We Have Pushed to the Staging Area

In Git, we can remove changes already committed to our version history. The command for this is:

1. git reset (name of the file or folder you want to reset)

2. git reset . (to reset all changes)

How to Remove Changes in the Working Area

To remove changes from the working area, run the command:

1. git checkout -- (the name of the file or folder you want to remove)

2. git checkout -- . (to remove the entire folder)

Note: Git checkout works similarly to Git add. While the git add command adds a file or folder to Git, the checkout command removes files already added to Git.

In VS Code, you can remove changes already pushed to the staging area by hovering over the change you want to remove and clicking the minus sign. Similarly, you can perform the checkout function by hovering over the file with the recent changes you want to remove and clicking the undo sign that appears. To remove all changes, hover over "Changes" and click the undo sign.

These are some ways you can work with Git directly from your VS Code instead of just the command line.

How to Go Back to a Previous Version of Our Code

1. Create different versions of your code to have options for this task.

2. Save all the versions you have created.

3. Use the git add and git commit commands to add and commit each change.

4. Run the git log command.

Result:

Note: In the above screenshot, we have versions 1, 2, and 3 of the different changes I made to the code I'm working on. Each version has a commit hash (the long code shown in front of the commit).

To go back to a previous version or commit, use the following commands:

5. Run the git checkout command with the commit hash of the version you want to return to, as shown in the screenshot below:

6. 

   Check your code editor to see if you are back to the previous version of your code.

7. Run the git log command to visualize this on Git.

Result:

8. To view all your commit, run git log --all

Result:

Note: If you scroll up your display, you will notice that HEAD moved from Version 3 to Version 2. This is Git's way of showing you the version we are currently viewing. If we change the version we are viewing to Version 1 or back to Version 3, Git will move HEAD to any of the versions we moved to.

How to Restore Code to the Previous Version

1. If your code is already restored to the previous version, first make a simple change to the code.

2. Run the git add and commit command.

3. Run the git log --all command.

Result:

Note: On Git, when you go back to a previous version of your code and create or update the code, your new addition starts branching off to form a new version. To view your branching effect in your command line, follow the following steps:

4. run git log --all --graph

Result:

Note: If your command is too long to take further commands, type q for quit and run the git log --all --graph command. I'll write detailed documentation on branching and merging. Stay tuned...

In your git branch, note that the new branch has a name "master or main," depending on your computer. The branch name helps us in two ways:

1. Instead of copying the commit hash when you want to checkout a branch, you can attach the branch name to the git checkout command and run.

2. The Git branch name also points to the latest commit in the branch, making it easy to switch to the latest commit in a branch.

Let's check this out:

• Run git checkout master (or main depending on your computer).

Result:

• run git log --all --graph

Result:

Let's restore our code to version 1. Use the commands below to do this:

1. git checkout (commit hash of the version you want to restore) and the file path name if you want to restore a specific file, or use a dot if you want to restore all folders.

2. Run git log --all --graph

Result:

Note: HEAD has now moved back to version 1. If we start updating the version, this will start creating a branch like we had before.

3. Run git status.

Result:

Note: When we use the git checkout command to restore the code to a previous version, it automatically adds it to the staging area. All we need to do is run the commit command.

This brings us to the end of the documentation. I hope the tutorial was easy to follow.

Below are some additional Git features you may want to check out.

Extra Git Features

The first extra feature is Git shortcuts, also known as aliases. Once you master these shortcuts, instead of typing git status, you can simply type git s. To create and use Git shortcuts for your commands:

• Run git config --global alias.<alias-name> <command>. (Replace <alias-name> with your chosen alias and <command> with the command it represents).

Next time you want to run the command, use the alias you created. Let's try this out. I will create an alias for git status and run it to see if it works.

Result:

From the result above, the alias worked well. Use this shortcut to create as many aliases as you need to speed up your work.

The second extra feature is how to prevent certain files from being added to your Git repository.

This feature is useful if you have a file with information you don't want to include in your Git folder. Follow the steps below to make Git ignore the file:

1. Create a new file and name it ".gitignore".

2. Inside the ".gitignore" file, write the name of the file you want Git to ignore.

   This tells Git to ignore the file listed in ".gitignore".

3. Run the git status command to check if it works.

Result:

Note: The file added to the ".gitignore" file is not tracked by Git. If you want to add the file, use the git add and git commit commands.

Third extra feature: How to completely remove Git from your project.

To stop Git from tracking your project, run rm -rf .git.

Note: Projects or code added to Git are usually tracked and stored in a folder called .git. When you run the rm -rf command, it removes your project from the Git folder, so the project is no longer tracked by Git.

Let's stop here for now.

If you find this documentation helpful, please like, comment, and share.

Don't forget to check out my other works. You might find interesting information in them.

Happy coding, and see you in future posts 👋.