Git & Github the essentials
Tags: webdev, git, github, tutorial
Published: 2023-03-27 02:30:32

## What is Git

Git is a free and open source distributed version control system designed to track your changes from small to large projects giving the team a unique source of truth for the files in a project.

## What is GitHub

GitHub is a company that offers a cloud based Git repository hosting service. Essentially it makes it easier for individuals and teams to use Git for version control and collaboration.

## Taking a look at Git

First we need to make sure we have git installed in our system, to do so, we need to run

```bash
git --version
```

If you don't have git installed, please take a look at the [git documentation](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) where you can find the instructions to install git in your system, it varies depending on the operating system you run in your computer.

To start working with git we need to create a new folder where we are going to host the files for our project

```bash
mkdir my-project
cd my-project
```
![Creating directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vymshs9jglwacr8u8mqu.png)

Those commands will create a folder called `my-project` and change your working directory to it. Now we initialize the git repository by running

```bash
git init
```
![git init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5978cfhy0wq49byjj8yx.png)

Once you are done with it, you will have a new git repository, and it will create a hidden folder called `.git` where all the version control magic happens. In a Unix based system like MacOs or Linux, we can list all the files including the hidden ones with the following command

```bash
ls -al
```
![list files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jqyvpen1zpvodpgry73.png)

So let's start using GIT in our folder, to do so, we will create a new file in a text editor, we've just created a MD file with some text

**_Git commands_**

The first command we are going to look at is the **git status** command

```bash
git status
```
![first status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5tg90ycp7n6dlldifz5.png)

This command shows us a list of all the files that aren't in our repository and all the files that were modified in our repository. In this case we see we have an untracked file called **file1.md**, lets start tracking the changes in it, to do so we are going to introduce the **git add** command.

```bash
git add file1.md
```
![git add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua4qtebfyq53m0x7cyl8.png)
![stashed file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww9ifuogd2tphhzurjus.png)

What this does is to add this new file to our staging area, this means that the changes in that file is ready to be tracked by our repository, but we need to **commit** the changes before it starts tracking the file.
Lets run the git status command to see what changed

As we can see we no longer have untracked files, now we have changes to be commited with the list of files in the staging area. If we do not want to include a file in the next commit, we can remove it from the staging area by executing the following command

```bash
git rm --cached file1.md
```
![git remove](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvtpmz9hvw2h3o5o0x9n.png)

And if we run git status again, we see that the file went to the untracked changes. For now lets add it again to the staging area.
![Staged files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7k37h3pd3s20qf0ew9q.png)

Lets commit our changes, this will tell GIT that we want to track that file.

```bash
git commit -m "added first markdown file"
```
![commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sowym3t5pqf7pc6oa5d5.png)

This will commit the changes with the message we type, and lets run the git status command again
![clean tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0zzs4pcufdq4s4az264.png)

Now we have our first file being tracked for changes by GIT. Lets make some changes to the file and create a new file to track.

Lets run git status
![status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9ntjoi29td306yini03.png)

As we can see we now have some changes in the `file1.md` and have an untracked file called `file2.md`

Lets run the following command:

```bash
git diff
```
![git diff](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghd77cakchu5nzqgpeao.png)

What this command does, it shows us all the changes in the files we are currently tracking, we can see there was some text added identified by the `+` sign before the line, and if we'd deleted something it will appear with the `-` sign before. To exit this screen, just type the letter `q`.

Lets add all of the files to the staging area

```bash
git add file1.md
git add file2.md
```

However, when we've changed a lot of files, this can be a long list of files to add, to add all of the files to the staging area, we can simply running

```bash
git add .
```
![add all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhqqh97icwkwgdszdj6b.png)

And lets commit the changes

```bash
git commit -m "added second markdown file and some changes in the first"
```
![commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abc67bosiycjipooeh7o.png)

Great, we are making progress now lets see all of the changes we've made so far, to do so we need to run

```bash
git log
```
![git log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b3t3k4zisvdxs1dccbs.png)

This reflects something very important about your commit messages, you need to describe the changes in less than 50 characters and be descriptive about the changes you've made, so when you need to check the log you can understand what did every commit changed in the project.

## Adding GitHub

To add our Git repository to GitHub, we have to go to [GitHub](https://github.com) and if we dont't have an account yet, create one and sign in.

To create a repository we have to press the `+` icon on the top right corner of the screen and select `New repository`.
![Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ebolvm9li7199cswsou.png)
![github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpht5dxzkm3god5hdgwy.png)

Lets give the repository a name, and keep it as public and don't select anything else, and press the `Create repository` button.
![New repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqn41mlbyeizjzvqun6f.png)

Copy the commands under the `...or push an existing repository from the command line` and execute them in the terminal.
![commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub1eb5fx3lw7ldbnkm3f.png)
![git push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60iwsf54ohaaidhnoj22.png)

And after we refresh the page, we will have the files from our repository on GitHub
![Files on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwnsez84kzgd2y6cgpce.png)

## Conclusion

In this tutorial we learned how to start working with Git and GitHub, in future tutorials we will go into more advanced topics.