Git and Github. What are they?

Abhishek
6 min readJun 10, 2020

Hi there! Wondering what is git and/or Github? Well, this post aims to help you with that. We’ll see what is git? How git and Github are different? And use them to have a better understanding of the basics.

Photo by Richy Great on Unsplash

What is git?

“git is a version control system”. So what is a version control system? What does it do?

Let’s use an analogy, the country’s under lockdown due to coronavirus but you still have a group project to submit, let it be an essay. You are a group of two so you write something and she writes something, let these be versions of your essay/project, then she asks you to make some changes, you do them and you have another version of your work, but you don’t like it later so you want to go the previous version of your writing, you can do that. And in the end, you both want to merge your work and create the final project. All the keeping track of versions, git does that.

Setting up git on your system.

You can download git from https://git-scm.com/downloads. And access it using the command line, you have some GUI implementations as well. Just using git you can do all the version control of a project on your system by making repositories, We’ll see how to do that later, it’s a good time to differentiate between git and Github.

What is Github?

So, you already know what git is and that it can help with version control of projects on your system only, but you want your partner to contribute to the project too or you want your code to be present somewhere else so in the case of data loss on your system you still have the code, for that you need your code to be present online somewhere. For that you have Github. Github is a website that provides online hosting for software development version control using git.

You can create online repositories on Github, they can be either public or private. While we’re at it let’s create one.

  • Go to https://github.com/.
  • Sign up if you already haven't.
  • Go to your repositories and click on New.
  • Enter repository name and description and click on “Create Repository”.
  • Github opens the repository and gives details about different ways to set up your repository, we’ll do that using git commands in the next section.
  • For now, just copy and save the link shown on the repository page that looks like this “https://github.com/<username>/<repository-name>.git

git commands and setting up your project and repository.

Let’s start by setting up a project and see how to use git.

  • Create a new directory on your system.
  • Open this directory in your favorite code editor.
  • Also, open a terminal and move to the project directory, ensure that you have installed git.

Let’s create an index.html file in the project directory.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Index</title>
</head>
<body>
<h1>Demo for setting up github repository</h1>
</body>
</html>

Edit and save the file.

Now let’s initialize a git repository in this directory.

  • On the terminal type the following command and hit enter,
git init

This will create an empty git repository in the directory, the terminal will also prompt that “Initialized empty Git repository”.

  • Now, enter the following command,
git status

This command shows the status of your git repository. The terminal will return this message,

Result of git status

So the repository was initialized and it is empty right now but it shows that there is a file in the project directory which is untracked, you need to add this file to the staging area to commit it to the repository.

  • To add the file you can enter the following command
git add index.html

this adds the index.html file. If there are many files to be added there is another option to the command above,

git add .

remember to add the dot at the end.

  • So the file has been added, now check the status of the repository again, you know which command to use. The result of the command is,
  • Now to save this version of the project there is a command,
git commit -m "message of commit"

this command commits the changes of staged files and this creates a new version of the project. Go ahead and commit. This will be the result.

you can check the status of the repository again, It’ll say nothing to commit. Because no changes were made.

  • Now edit the index.html file and save it. Now check the status of the repository. You’ll see this,

Cool! right?

  • Now add the index.html again to the staging area commit. You know the command, go ahead.
  • Now commit it with a message.
  • Let’s see another command, which gives us the history of commits and previous versions,
git log --oneline

this gives the log details in one line, for more details about commits use.

git log

You’ll see results similar to this,

see we have two versions of our project. Say you don’t like the changes made in the second commit and want to revert back to the initial commit, type in the following command,

git checkout <commit-number> //in my case the commit number is afd7b7a

Now go to the index.html file, see it reverted back to the first commit.

That’s the power of version control.

  • Let’s get back to the last commit, to do that use the command
git switch master //master is branch, some other post about branches

Add the project files to repository on Github.

Let’s now use Github to host the repository online for our teammates to contribute, in this post, we’ll just get the code of the repository online on Github. Get hold of the link copied previously, you’ll be needing it. The process of adding code to Github is like this.

  • You’ll need to create a remote for the repository, the command for creating a remote is,
git remote add origin <the link that you copied>

This adds a remote of your project repository on Github named origin,the code is still not online on Github, there is one last step remaining. Pushing the code on to the remote.

  • The last step is pushing the code to the online Github repository, the command is,
git push -u origin// origin is the name of the remote

Go to your repository on Github, refresh and you’ll see the code present on the repository.

To learn about git branches and merging and collaborating using git head on to part-2 of this article Branching in git and collaboration.

That’s all for this post. Thank you for your time. Play with it, try things, you’ll learn with time. You’ll git it! ❤

--

--

Abhishek

Frontend engineer working on Web and Mobile apps using React and Vue