DEV Community

loading...
Cover image for Get started with git
DSC CIET

Get started with git

Tanishq Singla
A super friendly guy, loves technology especially used in development
Updated on ・7 min read

What is Git?

Git is a distributed version control system. If you're wondering what in the world is a distributed version control system then let me explain it for you. In a distributed version control system the information of versions and it's history is mirrored in everyone's machine, whereas in a centralized version control there is only one copy of the project.

Since git is a distributed version control it makes it perfect for open source projects, as in open source project there is no single person/company making that project, it's open to all and centralized version control systems are more suited for companies or closed sourced projects.

Installation

So the first step is to obviously install git in your system.
To check whether the git is already installed you can type the following command in the terminal(cmd for windows).

git --version
Enter fullscreen mode Exit fullscreen mode

To install it you can follow this link - https://git-scm.com/downloads

Note:- If you're someone new to shell or never worked with terminals, I would highly suggest you to know basic commands, you can watch any tutorial about bash or simply you can give this blog a read.

Now that you've installed git, let us setup it and make a basic project and finally upload it on github.

For this blog I'll just be making a guessing game using JS and HTML, you can do anything you want, the main goal here is only to learn about using git.

Setting up git

Now that you have installed git we are going to configure git to use your information such as email and username.
To do that we are going to use the following commands

git config --global user.email "yourEmail@youremail.com"
git config --global user.name "YourUsername"
Enter fullscreen mode Exit fullscreen mode

Replace the text inside " with the username and email you used when you made your github profile, if you haven't then take the time to create one.
You can remove the --global in the command but then it would only configure git in your local project, so you have to configure it every time you make a new project.

Let's Make the game

First let's create a directory containing our guessing game.

I personally find it convenient to use the terminal for it, the following commands that I mentioned is what I am executing if you're curious.

mkdir guessing-game
cd guessing-game
touch index.html
touch script.js
Enter fullscreen mode Exit fullscreen mode

Now open the project directory in the text editor of your choice, if you don't have one I would highly suggest you to go with Visual Studio Code.

After opening the project let's add the boilerplate html in the index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <input type="text" />
    <button>submit</button>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now let's use git in our project to record our version of the guessing game.

Initializing git

To initialize git in a project we use the following command

git init
Enter fullscreen mode Exit fullscreen mode

This command would output something like this

Initialized empty Git repository in D:/Tanishq's Folder/github/guessing-game/.git/
Enter fullscreen mode Exit fullscreen mode

Now this command says that it initialized an empty git repository to a folder path in .git

if you run ls -a in bash (or git bash for in windows) you can see that this command created a .git folder in the project directory.

This .git folder will contain all the information that git stores related to your project.

If you're are using VS Code, then you may have noticed some change in the project explorer.

Project Explorer VS Code

To view the project explorer you can either click the icon in the red circle in the image or use the shortcut key Ctrl + B(windows and linux) or Cmd + B(MacOS) to toggle it.

So the color of the file is now green and there is a U at the end of it. U here is for untracked or in other words git doesn't know about these files yet. VS code shows us this because it has inbuilt support for git, now that's one of the reasons to download it.

Let us take care about that.

Adding Files

We created two files and added a boilerplate to our HTML file, but unfortunately git doesn't know about it yet. What git add does is basically it adds the file contents and updates the index, the index is basically a snapshot of your working tree, and the working tree is basically the representation of your project versions.
You can read more detailed info here

Now you can either add files by mentioning them after the command

git add index.html
git add script.js
Enter fullscreen mode Exit fullscreen mode

or you can mention every file in the current directory by using

git add .
Enter fullscreen mode Exit fullscreen mode

For now, I will go with the second one. Now let's check what our project explorer says about them.

Project Explorer After git add .

The symbol here is A which is short for Index Added you can check it by hovering your mouse over it.

Now that we have updated the index of our project, now we will record the changes, and for this we're going to use commits.

Committing our code

In layman's terms commits are basically records or checkpoints of our project. Commits are used for recording the change with appropriate comments(or captions).
For more detailed description you can check the documentation here.

Now let us record our changes

git commit -m "Added project files and boilerplate"
Enter fullscreen mode Exit fullscreen mode

The -m flag is used for providing message or you can say caption and that caption is recorded between these "

If you check the project explorer in VS Code it shows no symbols, that's because we have recorded those changes and now git is ready to move on with new ones. Now we can continue making our game.

Let's receive user inputs using when the user clicks the button using JS. In the script.js file we'll add this.

let input = document.querySelector("input");
let button = document.querySelector("button");

function check() {
  console.log(input.value);
}

button.addEventListener("click", check);
Enter fullscreen mode Exit fullscreen mode

Now that we've taken user input and shown them in console, we'll record this change and label it, using what we've learned.

git add .
git commit -m "Showing user input to console"
Enter fullscreen mode Exit fullscreen mode

The game isn't complete yet, I'll be doing the rest of the changes and I'll make sure to commit all those changes, so you can view them and understand the different changes to code.

Let's share

Now let us upload our project on Github. If you know about Github then you may skip a few lines, but if you're new don't worry this blog got you covered up.

What is Github?

Github is the largest platform for sharing open source projects, for a layman, a social media platform for sharing your code.
Github is literally the king of open source platforms, so there is no point in explaining it, so let's cut the chase and upload our guessing game on github. So be ready with your github accounts and let's go.

Making a Repository

Log in to Github > Click on the button that says "New"
after that fill up the fields and add readme.
The form should look like this
Alt Text

Now click the beautiful green button below that says "Create Repository".

This would create a repository on your account and it would redirect to your repository link. Hurray! We successfully added a repo on our account, let's upload our guessing game.

First grab the https link (if you have an ssh key, then you may copy the ssh link) and copy it.
Alt Text

Now let's link our local project to our repository on github. In the terminal, make sure that you're in your project folder then type the following command.

git remote add origin <link of your repo>
Enter fullscreen mode Exit fullscreen mode

Now that our local project is linked, let's upload the project by typing the following command.

git push -u origin master
Enter fullscreen mode Exit fullscreen mode

master here is the master branch here, the branch where we're uploading our files to.
The -u here is short for --set-upstream I added to save us from typing origin master again and again whenever we push our changes to Github repository. So next time when you upload your changes you only have to type git push.

!Whoops if you're also faced with an error similar to this
Alt Text

Don't worry it was intentional. If you look at the hints, it says that "the remote contains work that you do", remote here is the Github repository but what work did we do into that, if you look up there was an Add README.md option that we checked, what it did was created a file called README.md in our repository, but in our local project we never included the step, so let's take the changes in our repository and add it to our local project.
For that we're going to use

git pull origin master --allow-unrelated-histories
Enter fullscreen mode Exit fullscreen mode

Since the push command failed the upstream was never set in git that's why we typed origin master and for --allow-unrelated-histories it's because we messed up our work tree, since the first record in our repository was of README.md which was not a part in our git repository.
To avoid this mistake we shouldn't have checked the Add README.md option or alternatively we should have first created our repository with README.md from github and then cloned it to our local machine and then we should've done the changes. Whew!

So whenever you have to pull the changes which are not causing any conflict with your local project and the repo you can use git pull only.

Now that everything is dealt with, we can finally push, so without wasting any further time let's type push command

git push -u origin master
Enter fullscreen mode Exit fullscreen mode

and don't forget that we only have to type -u origin master once, after this there is no need.

Now on github you can check your project and you can check my project as well! You can also view the changes that I have done, furthermore I have created a commit on every step, so you can understand the progression of the code.
The link for the guessing game Github repo is https://github.com/TanishqSingla/Guessing-game/

Happy Coding!

Discussion (0)

Forem Open with the Forem app