# GIT & GITHUB FUNDAMENTALS GUIDE FOR BEGINNERS

## Introduction - Git
Before git came into existence, let's take a look at the traditional (old way) on how files are being merged, organized and are controlled.

In a real world case scenario in building a web-base app, tasks are shared to team members and a leader is assigned to oversee (manage, control and track the progress of the project). Each individual is given a task to carry out in the separate computers. And once these tasks are accomplished, the team members will now manually copy their completed task(s) to flash drive and give them to the team leader to merge.

Think about the stress of time consumption or if these members are in different locations (remote). All the processes involved in carrying out these tasks are hectic! Thanks to the advent of 21st Century (Web2) technology. It has reduced the traditional methods of collaboration.

**What is Git?**
Git is an open-source, free: Source Control Management (SCM), Version Control System (VCS) where we can:
* Organize
* Control and
* Keep track of our files

With Git, you can manage and change files over time and you can go back and see where those changes were (reverse back to the previous version). That’s the magical way about git. We can compare the differences between different versions and I can see who makes changes to what. Basically, if I screw something up, I can reverse back to the previous version.

**Git Installation**
Now that we know what Git is, we can install it on our computer. To do that, [download](https://git-scm.com/)


When you’re on the website, select your operating system and follow the installation processes to install git on your computer.

For window users, when you install git, it comes with a terminal called ``Git Bash.`` You can also use any terminal that you have on your computer. Like the PowerShell or Command Prompt.

If you are on Mac or Linux, you can use the terminal that comes with your machine.
So, the choice is really yours. Once you start git, you can use any terminal to interact with git.

For this article, I am going to use ``Terminal`` on my Ubuntu machine for illustration.

Before we get started, we have to verify if git is installed in our computer. And also, to configure some few things: your username and email address. The reason is, it is so important anytime we commit something to the history book, we need to know who is doing it.

In our terminal type: ``git --version`` (2 dash symbol before version). I have git installed with 2.25.1 version.

Also, let’s specify the username and the email address:
``git config --global user.name "joeyovey"`` and then I will press enter.
Next, we also need to specify our email address:
``git config --global user.email "[e-mail]"``

Next, we are going to set the default branch name. Don't worry about branch now, later we’re going to talk about what branch is and why you need to use branch.
Type: ``git config –global init.default`` branch main or master. Once you type that, press enter

Meanwhile, I have configured my details already. So, go ahead and do yours.

To be certain we have to configured the above info, type the following commands: ``git config --global user.name`` and ``git config --global user.email``

So far, we have been using ``config`` and the rest. If you don’t know what that is, you can type: ``git config -h``. This will show me information what ``git config`` is and there rest.

Also, if you want deep help, you can type ``git help config.`` This opens up a manual that is hosted on your computer. Even if you’re on-the-go(offline) or on the internet, you’ll still be able access the file and you get more information about what that command does.

Back on the terminal, you can type ``clear`` to clear all the content and I can see a new view again.

Here in my project directory, I have files that I want git to keep track of:

In our terminal, type ``pwd`` and that stands for **present working directory**. And this will tell us where we are on our computer. Then ``ls`` (list files/directories) in our present working directory. Type ``cd``(change directory) to Desktop. You can do that till you arrive at our final destination.

We are going to open this in our code editor (VS code) by typing: ``code .`` and then press enter to open it up in our text editor.

Then, we can turn this directory into a git repository by typing the command: ``git init``. This will initialize this repository.

Even though we have seen that the files change color, how can we be sure if we have actually initialized this repository? Simply by typing the command ``ls -a`` this will list all the hidden files/directory. And we can now see that our repository has been initialized to keep track of our files.

Look at that! We now created our first repository.

We can now type ``git status`` that you'll rightly use often, this will now tell us the status of our repository. When I press enter, this will tell me I am currently on the ``master`` branch (``main`` or ``master``).

Remember from the beginning, we set our branch name to ``main`` or ``master``.
We can see that it says “No commits yet.” Don’t worry, we haven’t reached that yet. We’ll get there in a little bit.

And down below, I currently have 4 ``untracked files``. These are all the files we saw in our directory. Currently, all my files are on track. That means, if I make any changes to these files, git will care because they are on track.

Now, if I track a file, git will know what changes I make to that file. So, let’s say I want to revert back to the previous version, I can do that.

So, how do we track a file? To track a file, I can simply type ``git add`` and specify the file name: ``git add index.html`` and then hit enter. So, this file now has been tracked. To confirm that it has been tracked, once again, I can use the command that we used earlier. I can type: ``git status`` and hit enter. And I can see that one file is being tracked. We continue to have the remaining files untracked.

Let’s say, for whatever reason, I no longer want to track a file, right above, I can see that command: ``git rm –cached <file>`` that I can untrack a file. Let’s try this out. Type:``git rm --cached index.html`` then I will hit enter. Once again, let’s type ``git status`` and press enter. And once again, we are back to the original stage where all my files are currently untracked.

Right now, I also have a file named ``secretCredentials.txt`` and I don’t want anyone to see that file. Let’s explore to see how we can ignore it.

In our terminal, we are going to create a new file call, ``.gitignore.`` Make sure you add the dot operator before the gitignore. This allows us to ignore certain files/folders or even just the entire extension.

Here in my terminal, I use the command: ``touch .gitignore`` to create a file called ``.gitignore`` and press enter. When my file is created, I will add the following content inside my file:

``# ignore all .txt`` files. Remember the ``secretCredentials`` is ``.txt`` file. Underneath it, I will type asterisk ``*.txt`` and save the file.

To see a comprehensive way to ignore files/folders, got to: https://github.com/github/gitignore

Back into our terminal, type ``git status,`` hit enter and we can see that git is ignoring that file: ``secretCredentials.txt`` in our project directory.

Now, I want git to ignore that file and I want git to track all the other files. Remember in the beginning we tracked only one file, ``index.html`` and I also untracked it. So, how can I track all the files? Here I can type: ``git add .`` (make sure you add the dot operator after the add) or ``git add –all`` or even ``git add -A`` and hit enter. That will tell git to track all the files. Those are all different ways we can track all our files.

As we can see, all these files are being tracked except for the file that I have ignored. And currently, all these files are in an environment called ``staging area``.

Now that I have added all these files, I want to ``commit`` them. So, what does it mean to commit? Commit means you are taking a snapshot of your repository at this point in time. Basically, what all your files look at right now. In essence, it is like writing an entry into a history book and if you ever want to go back to this point in the future, you can do that.

To commit them, we can use the commit command: ``git commit -m “first commit”`` with a message to go along inside of a double quotation mark ``“first commit”`` and then I will press enter.

Congratulations! You just finished your first commit. And there is now a page in the history book. And just like that, I have now committed all these into our repository.

Here I can type ``git status`` once again. And just like that, there are no longer files to commit.

Let’s see, if I want to make changes to any of my files. Let’s say ``index.html`` and we will add html boilerplate. Back into our terminal and type, ``git status`` and git recognizes that this file has been modified.

So, I can go ahead to stage and commit the ``index.html`` file to my history book: ``git add index.html`` and ``git commit -m "Add a boilerplate."`` after staging the file.

I have also modified my ``index.html`` with new contents.To see what has been modified, git has a command for that: ``git diff`` this will show us what differences are.

Here we can see the original text in red and we can also see the new texts in green color. Well, I am certified for all these changes, once again I want to add these changes to the history book. But before then, we have reached the **END** of file and we need to exit the file first. To do that, press letter ``Q`` on your keyboard to exit the file content differences so that we can continue. Also, I forgot to mention this earlier, you can as well type: ``clear`` to clear your terminal to a new view.

Type ``git add index.html``. The file is now currently sitting in the staging area. Staging is where your files sit until you are ready to commit them. It is kind of like holding a pen until you’re ready to write them in the history book.

In git, you have 3 different environment:
* **Working area**: Where you can edit the files.
* **Staging area**: once again, it that holding pen until you’re ready to add the history to a book.
* **Commit**: this is where you now added them into the log or entry to a book.

Let’s say I want to remove these files from the staging area if I am not ready to commit them. I will now enter this command: ``git restore --staged index.html``. Once I press enter, this moves this file back to my working area.

So, if I want to commit now, this file wouldn’t be included because this file is currently in the working area.

Let’s say you’re working on 5 files and 3 of them you are ready to commit, you can move those 3 of them to staging area and you can commit them and those files that are in the working area will not be included.

The ``index.html`` is in my working area but I do actually want to commit it. Once again, I can add it to staging and I can commit it. But I can also bye-pass or skip over staging all together. To do that, we can type the command: ``git commit -a -m “updated text”`` and when I hit enter, this now skips over the staging and commits the file.

Let’s say, I don’t want the ``script.js``. I can manually delete the file or type this command: ``git rm “script.js”`` and the file is gone. Back to the terminal, and type ``git status`` then hit enter.

And git recognizes that this file is deleted. The reason is, this is one of the files that the git is tracking. Well, I can memorise this file or second thought, I can get this file back by typing this command: ``git restore script.js`` and hit enter and now I have my file back. Once again, this is one of the advantages of working with git.

If you want to rename a file, you can go directly to the file or use this command: ``git mv styles.css`` to ``main.css``. The ``mv`` stands for move. We are moving the ``styles.css`` to ``main.css``. You can now see that our file now has been renewed to the new name ``main.css``.

I want to add this file to the history book and commit it. I can type: ``git add main.css`` to staging area and type: ``git commit -m “changed the file name from styles.css to main.css.”`` and our file is now committed.

So far, we have made our commits to the history book. What if we want to review our history book? We type this command: ``git log`` and press enter. We can now see all the differences between commits. Every single commit has a unique identity and the author.

If you remember at the beginning we configured our username and the email. Then we can also see the associate date of that commit and the text (commit message associate to each commit).

Use your arrow key to scroll down to see the rest of the commits. Press letter ``Q`` to exit the log and type ``clear`` to clear the messages on the terminal for a clearer view.

If I want a brief overview of the commits, I can type: ``git log –oneline``. And we can see a shorter view of our commit id history.

If we can see, ``(HEAD ->`master)``. This indicates my last commit. And let’s say, I typed in the commit message wrongly, I can modify it using this command: ``git commit -m “Changed the file name to main.css” --amend`` and hit enter and this will change the commit text message without creating a new commit.

Once again, I can type: ``git log –oneline`` hit enter and the commit has changed.

And what if I want to see what actually changed in different commits? I can type: ``git log -p`` hit enter and that will show me different types of commits I made changes to and I can use my down-arrow key to scroll below to see others. And to exit the view, I press ``Q`` on my keyboard and that ends the view.

And once again, to find out more about a specific git command, you can type: ``git help log.``

And one of the great thing having these commits, you can always jump back to the previous commit and you can type: ``git reset 009b9b4``

## Creating a branch
So far we have been making all our changes directly to the main branch. But you can also setup additional branch. What is another branch? It is basically a copy of your main branch. And it has all the entries in your history book. But this allow you to go on to work on features (you’re fixing a bug) and you can make all your changes and it wouldn’t affect the main branch. Once you’re certifty will all your changes, your can now merge them back to your main branch.

This is how software development typically works. You have developers that wants to work on a new feature they’ll create a new branch to work on a new feature or may be someone is working on a bug. They’ll create another branch to fix the bug. Once they finish all their work and satisfy, they can merge all their work back in to the main branch.

Let’s say, I want to make changes to my index.html to change the form input tag of submit to a ``<button>`` tag. Let’s create another branch to make this change and once we are satisfied with the change, we can merge it back to the main branch.

To create a new branch, I can type: ``git branch FixSubmit``. The ``FixSubmit`` is our new branch name. Once we have typed that, then press enter. Now, we should have two branches. To confirm how many branches we have, you can type: ``git branch`` and then hit enter. We now have two branches (``FixSubmit`` and ``master``). The branch we are currently in is called ``master``.

How do I know the current branch? Because it has and asterisk ``*`` indicating that this is the current branch.

To switch to the other branch, type: ``git switch FixSubmit`` and hit enter. So, if I type again the command: ``git branch``, I can see that it switch from the ``master`` to the ``FixSubmit`` indicating with the asterisk symbol ``*``.

So, I want to edit the file ``index.html``, I open the file and I can see the contents of the ``index.html`` and where I want to change down below. After we make our changes, save and back to our terminal.

Let’s check the status of our file by typing: ``git status``. And here I can see there is one modified file: ``modified: index.html``.

Now I want to commit this change to the branch just like we did before: ``git commit -a -m "Updated submit tag to button tag"`` and hit enter. And that has now committed this change to the new branch.

Next, let’s switch back to ``master``. Type: ``git switch master`` then hit enter. If we check our file, all the current stages reflect back to the ``master``. We only change our changes in the ``FixSubmit``.

We now need to bring the changes from ``FixSubmit`` back to the ``master`` or we need to merge those changes back to ``master``.

To merge all changes back to ``master``, we need to type: ``git merge -m "Merge fix FixSubmit back to main" FixSubmit`` to specify which branch I want to merge back into ``master`` and then hit enter. The file has now been merged back to master. Here i can see we have our updated version of our ``index.html``.

Now that we have merged all our changes back to ``master``, we have no need to keep the new branch ``FixSubmit``. To delete a branch we need to type: ``git branch -d FixSubmit`` and then hit enter.

Our new branch has now been deleted. Once again if we type: ``git branch ``we only have one branch and also the current branch.

## Merge Conflict
What if you create a branch and the ``master`` branch has changed? In that case, you have a merge conflict. Let’s see how that works. And first, let’s create another branch.

Here I am going to use another command: ``git switch -c FixScript``. This is similar to the previous command for creating a branch. We are telling git to create a branch and switch to the new branch.

And to confirm, I can type: ``git branch`` and enter. And here, we have 2 separate branches and we are currently on the new branch created.

I will open my file ``script.js``. And here, we are referring to the ``console.log()`` function to change to the alert function. Change that and save it and go back to our terminal and commit our changes. Type: ``git commit -a -m "Update the script.js"`` and press enter.

Let’s now switch to ``master`` and make changes there as well: ``git switch master`` and I want to make changes to the ``script.js`` file. Let’s say, ``Welcome to, Blockfuse Labs.`` save the file and close it. Back to terminal and type: ``git commit -a -m "Update script.js"`` hit enter.

Let’s type: ``git merge FixScript``. When I press enter, it tells me the error message: ``CONFLICT (content): Merge conflict in the script.js…."``

If you can recall, ``HEAD -> master`` refers to the current branch name. And the message is talking about what I am trying to merge and down below, the changes from the ``FixScript branch``.

So, I can decide which changes I want to keep. I will delete what I don’t want to keep and save the file.

Let’s go back to the terminal and type: ``git commit -a -m "Update the script.js"`` and hit enter and now update that merge conflict.

That’s one way you can resolve your merge conflict.

So far, this should give you the idea that most people use git and some features or the bug you need to work on.

First, you create your branch, make all your changes and merge them back to the main branch. And once you do that, you can delete the branch you’re working on.

## GITHUB
Now that you understand the fundamentals of working with git, you might be wondering, how do you work and collaborate with others?

So far, we have been working with a git repository that is hosted on your local computer. But, you can also hold your git repository in the cloud. And one of the most popular repositories is called Github.
Not that they offer cloud repositories, you can also manage your project. You can track:
* Issues
* Assign features and bugs to different people

In essence, it’s free open source (social coding environment).

First, we need to create a [Github](https://github.com/) account. After that, we can now create a cloud repository (repo).

You should see an option to create a new repo. But first, you may be wondering, do I need to create a cloud repo? Especially if you’re just planning on working by yourself? Or if you plan on working with a team, it makes sense to create one so that you can all work together.

But even if you’re planning to work it by yourself, you’ll still need a cloud repo in case something happens to your local computer (crash or get stolen), you have a backup on the cloud repo.

To set up a repo, I need to enter a name in the field provided. I will type: ``joeyovey-web2``. Keep in mind, by naming convention, you should add dash symbol ``-`` or underscore ``_`` if your repo name contains more than one word. And for the description field, it’s optional.

I can decide to make this repo public so that anyone can see it or private. If I make it private, I can assign different individuals to my repo so that we can work on it together.
For now, we’ll skip the rest of the options and click on`` Create repository``.

Now that we successfully create a repository, we can follow the guide below to create a local repository. But we already have a local repository in our local computer we have been working with previously. We can take that repository and push it to the cloud.

But before then, I will suggest you read about the HTTPS and the [SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) to know which one you’re using. For this, we are going to use ``SSH`` because i have setup my ``SSH Key``
Let’s copy the url ``git remote add origin [e-mail]:joeyovey/joeyovey-web2.git
`` to our terminal and paste it in there.

Right here, this is to establish a connection to the remote repository. And we are calling this remote connection ``origin`` that is the common name that most people ended up using.

And we can see what address we’re going to connect to. Then I will press enter.

To be certain if our remote repo connected successfully to our local repo we type this command: ``git remote -v`` and our connection connected successfully.

Lastly, we type command: ``git push -u origin master`` and hit enter.

Back on github, let's refresh or click on the repository name: ``joeyovey-web2`` and boom! Our local repository is now being pushed to our remote repository.

And here, I have only one branch pushed to the remote repo.

Let’s go back to our terminal and push all our branches: ``git push –all`` and hit enter.

Let's go back to our github, we can now see that we have all our branches.

Now that we’re in our cloud repo, we can click on each file to preview the contents in there.

The great thing about Github is a social environment where other people can leave a comment.

Finally, oftentimes I will be updating this article. But before then, there’s one feature in github I want to guide you on which is: the ``settings``. This is where you can security, delete repositories etc. For this, let’s say we want to delete this repository on the cloud.

Head to the settings tab, click and scroll down to the ``Danger Zone`` and click on the``Delete Repository``

Click, ``I have read and understand these effects``

Finally, we type the username followed by the repository name inside of the input box provided: ``joeyovey/joeyovey-web2`` and click ``Delete this repository``.

And that is it! The repository will be deleted from your repositories.

## Conclusion
This guide covers fundamental concepts like branching, merging, resolving conflicts, and using GitHub features like ``push``.

By mastering Git and GitHub, beginners can improve workflow efficiency, contribute to open-source projects, and collaborate effectively in software development.

Liked the article? **[Hack-md](https://hackmd.io/)** is a great platform that hosts thousands of great articles like this. Sign up for free today and enjoy!

You can as well follow me on [X (Twitter)](https://x.com/joeyovey1)