Work with Git and GitHub for beginner

Work with Git and GitHub for beginner

Hi all, In this article, we are talking about the git version controls system basics commands that every beginner software developers should be known. When a new bee enters into the programming world then he thinks if he knows the programming language such as java, c#, javascript or python or any other language that you want to work that will be sufficient to work. but it is not true. once you enter into the company or any space where you need to work with the other programmers then you need knowledge about how source code is maintained in the community development process. Git the one of the most powerful and well known distributed source code version management tool

What is Git ?

Wiki definition

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows

let's simplify it

  • its software which tracks the changes fo file
  • it allows developers to collaborate their code in a very efficient way.
  • it's a very fast, scalable system to maintain the source code
  • Most important it's distributed system.
  • The distributed system is the system where every person hold the copy of source control and do his changes online or offline and when code is ready it can push to the original repository
  • We can download the Git from (git-scm.com) you install by just clicking on install click, next next. after installation successful, we can check the version of git using the git --version command
» git --version
git version 2.34.0

Now configure the git your system

so when you work with git and GitHub. The system should identify you for that we. need to configure our system using the following commands.

git config --global user.name "<your username>"
git config --global user.email <your email id>

What is Github?

Let's make it very simple

Github is cloud solution where we can save and maintain our source code from where we can collaborate with other developers. we can maintain create the repository on git hub and maintain our source code

Steps to work with GitHub

  • you should first create your account on https://github.com/
  • create a repository (container for the project) on Github.

Screenshot 2022-02-06 at 9.24.29 PM.png

create a repository by filling out the below form

Screenshot 2022-02-06 at 9.29.59 PM.png

  • clone the repository on your local system once you create the repository you will see the next page with a bunch of information and commands
…or create a new repository on the command line
echo "# testingGit" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/priyanhsu10/testingGit.git
git push -u origin main

…or push an existing repository from the command line
git remote add origin https://github.com/priyanhsu10/testingGit.git
git branch -M main
git push -u origin main

So we will go with the second option as we are working with the first time and we don't have any existing repository to push

So let's create our local repository and link it to the remote Github repository. Cloning repository means getting the code from GitHub you may have a question we don't have any code on git hub then what is the use. good catch it is used to link the GitHub repository with our local repository and push our local repository code into the GitHub repository.

let's create the one folder on your computer where you want to store your project so I am creating a practice directory and inside that, I'm creating gitproject directory and will clone the project inside gitprojects directory

~ » mkdir practice                       priyanshuparate@Priyanshus-MacBook-Air
--------------------------------------------------------------------------------
~ » cd practice                          priyanshuparate@Priyanshus-MacBook-Air
--------------------------------------------------------------------------------
~/practice » mkdir gitprojects           priyanshuparate@Priyanshus-MacBook-Air
--------------------------------------------------------------------------------
~/practice » cd gitprojects              priyanshuparate@Priyanshus-MacBook-Air
--------------------------------------------------------------------------------
~/practice/gitprojects »
~/practice/gitprojects » mkdir testingGit
--------------------------------------------------------------------------------
~/practice/gitprojects » cd testingGit   priyanshuparate@Priyanshus-MacBook-Air
--------------------------------------------------------------------------------
~/practice/gitprojects/testingGit »

Now let's go one by one command for creation of repository at local and link it to our newly created repository

First command Initialize the local git repository using the git init command this command is use to initialize new git repository after this command run, you can see .git folder will be created in the ~/testingGit directory

~/practice/gitprojects/testingGit » git init
....
Initialized empty Git repository in /Users/priyanshuparate/practice/gitprojects/testingGit/.git/

now let's connect our GitHub repository with our local repository using git remote add origin command the syntax of command will be git remote add origin git repository address will be github.com/priyanhsu10/testingGit.git

git remote add origin https://github.com/priyanhsu10/testingGit.git

We have connected our local repository to the remote repository Let's add some code to our repository For simplicity, I will create the javascript file and will play with various git commands don't worry if you don't know anything about the code. we will mainly focus on the code git commands.

Let's create the index.js file in the testGit directory and open our favourite code editor vs code

~/practice/gitprojects/testingGit (master) » touch index.js
--------------------------------------------------------------------------------
~/practice/gitprojects/testingGit (master*) » code .
--------------------------------------------------------------------------------
~/practice/gitprojects/testingGit (master*) »

lets add some add function in index.js


function add(a, b) {
  return a + b;
}

console.log(add(10, 20));

once you add any file or edit file in the working area git will start tracking the changes

Git Working flow

Before going through the commands lets understand how git will work git has 3 main areas

  • Working area

The working area is the area where the .git folder reside so whatever are parallel to the directory git will track for changes

  • Stage area

The staging area is the intermediary area from where git will know changes in file or folder to push the local repository.

  • Local repository

The local repository can track the changes in the form of commits and the stage from where we sync the changes to the remote repository

gitworkingflow.png

Now we have created the index.js file so let's start learning the commands one by one

1. Checking status of the changes --> git status

Git status Command

Using the git status command we can check the status of tracked files we see that index.js has an untracked file means its not in the staging area.

~/practice/gitprojects/testingGit (master*) » git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
    index.js

nothing added to commit but untracked files present (use "git add" to track)

Adding untracked file into stageing area --> git add

For adding the file/s in the stagging area we use git add command. Git add command can come in two flavor We can add the single file into the stagging area using the git add filename command

git add

we can add all unstracked file using git add . command

git add .

let add the index.js file in the stagging area

~/practice/gitprojects/testingGit (master*) » git add index.js

after adding the file in the staging area let's check the status using the git status command

~/practice/gitprojects/testingGit (master*) » git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
    new file:   index.js

Committing changes into the local repository --> git commit -m " commit message"

We can commit the changes to the local repository using the git commit command syntax

git commit -m "message for commit"

let's commit our changes to the local repository

~/practice/gitprojects/testingGit (master*) » git commit -m "initial commit"
[master (root-commit) 42661ac] initial commit
 1 file changed, 5 insertions(+)
 create mode 100644 index.js

Once we commit the changes git will create the commit and storage in its database and generate the commit hash which is generated by the sha1 algorithm git store all commits in its object database which is a persistent map and for each commit hash is the key for the commit.

Git log Command

git log command is very frequently used the command. Using git log command we can check the commit history of logs let's check the commit history suing git log command

~/practice/gitprojects/testingGit (master) » git log  
commit 42661ac9499fc4d7793bbe651c405c1ceb584235 (HEAD -> master)
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:23:38 2022 +0530

    initial commit

commit history will contain the hash for commit, author , date and time for commit, and message of the commit

let's do more commits so we can see the history of changes more clearly. I have added subtract, divide and multiply functions in index.js add commit one by one

index.js

function add(a, b) {
  return a + b;
}
function subtract(a, b) {
  return a - b;
}

function divide(a, b) {
  return a / b;
}
function multiply(a, b) {
  return a / b;
}
console.log(add(10, 20));

When we check the git history we can see that the latest commit will be on the top 

~/practice/gitprojects/testingGit (master) » git log

commit 849b056a06ae1f4f051aaf08f9eb28b5ec7588f1 (HEAD -> master)
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:39:33 2022 +0530

    added multiply function

commit 5b99ae3dbbb9b3be3ed7c5ee6f0210bf43520365
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:39:01 2022 +0530

    added devide function

commit a4b9d93ca835fb6a7e121035a9169758a45bd852
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:38:26 2022 +0530

    added subtract function

commit 42661ac9499fc4d7793bbe651c405c1ceb584235
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:23:38 2022 +0530

    initial commit

we can display git log in various ways bypassing different flags flags

git log --oneline

-- oneline flag show the histroy in very abtract way . it shows first 7 letter of commit hash and commit message

~/practice/gitprojects/testingGit (master) » git log --oneline

849b056 (HEAD -> master) added multiply function
5b99ae3 added devide function
a4b9d93 added subtract function
42661ac initial commit

git log -- stat

--stat will show the file level stat .which include the file line changes

commit 849b056a06ae1f4f051aaf08f9eb28b5ec7588f1 (HEAD -> master)
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:39:33 2022 +0530

    added multiply function

 index.js | 3 +++
 1 file changed, 3 insertions(+)

commit 5b99ae3dbbb9b3be3ed7c5ee6f0210bf43520365
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:39:01 2022 +0530

    added devide function

 index.js | 3 +++
 1 file changed, 3 insertions(+)

commit a4b9d93ca835fb6a7e121035a9169758a45bd852
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:38:26 2022 +0530

    added subtract function

git log. - - patch

-- patch will show more details change include details contains the file diff (try by your self)

#Pushing the changes into the remote repository --> git push

Now its time to push the chages into our Github repository When we do first-time git will ask to set the remote as upstream to push the current branch this can be done by commad . we need ot do this only once for one branch and after the consecative push we can use the push command without --set-upstream flag

git push --set-upstream origin master

~/practice/gitprojects/testingGit (master) » git push
fatal: The current branch master has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin master

--------------------------------------------------------------------------------
~/practice/gitprojects/testingGit (master) » git push --set-upstream origin master
Enumerating objects: 12, done.
Counting objects: 100% (12/12), done.
Delta compression using up to 8 threads
Compressing objects: 100% (8/8), done.
Writing objects: 100% (12/12), 1.05 KiB | 1.05 MiB/s, done.
Total 12 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), done.
To https://github.com/priyanhsu10/testingGit.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

After the push we can see the changes on github

Screenshot 2022-02-07 at 11.26.07 AM.png

Now its time to pull changes which will do by our collegue

We can pull the chages from remote repository using git pull command

for simplicity purpose now i will create the readme file directly on git hub and let's pull the changes and our local repository does not aware of this file

Screenshot 2022-02-07 at 11.31.14 AM.png

Before pull the changes

Screenshot 2022-02-07 at 11.33.49 AM.png

~/practice/gitprojects/testingGit (master) » git pull
Updating 849b056..898bf48
Fast-forward
 readme | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 readme

after pull changes we got the readme file

Screenshot 2022-02-07 at 11.35.26 AM.png

let check the git log this time we see the read me file commit on the top as its latest changes on repository.

~/practice/gitprojects/testingGit (master) » git log

commit 898bf484b3945015319a026f127fc7661162929b (HEAD -> master, origin/master)
Author: priyanhsu10 <63138939+priyanhsu10@users.noreply.github.com>
Date:   Mon Feb 7 11:31:01 2022 +0530

    added readme file

commit 849b056a06ae1f4f051aaf08f9eb28b5ec7588f1
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:39:33 2022 +0530

    added multiply function

commit 5b99ae3dbbb9b3be3ed7c5ee6f0210bf43520365
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:39:01 2022 +0530

    added devide function

commit a4b9d93ca835fb6a7e121035a9169758a45bd852
Author: Priyanshu1990 <priyanshuparate10@gmail.com>
Date:   Mon Feb 7 10:38:26 2022 +0530

    added subtract function

Now you can get the basic working with git and Github.

Till now we just scratch the surface. You can take this knowledge further in you git learning journey So that's it for this article in the coming article we will go further take our knowledge and discuss git branches, merging, solving conflict, and many more things thanks for reading