Learn Github && Git in an afternoon (Beginners) 🐱‍💻☁️
Tags: github, git, beginners, code
Published: 2021-11-09 00:40:01

If you want to have your code available in a cloud git repository (for free) and be able to collaborate with other developers, this tutorial is for you 😎💻. Firstly, we have to know some concepts:

{%- details Git -%}
If you don't know Git (in basic terms), you need to see the post attached bellow before start this tutorial 👇🏻

{% post jafb321/learn-git-in-an-afternoon-beginners-200m %}
{%- enddetails -%}{%- details Github -%}

### Github
Is a platform where you can put your code in a cloud **git repository** completely free and where other developers could see your code and contribute or use it.

![Github logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvoo4wdp66oqddqh7qio.png)

Github is **very useful** and **is used by a lot of developers in the world**. This tool could allow you to improve as developer and be atractive to software companies.

{%- enddetails -%}

#### First of all
We'll learn the Github (and some Git) basics in this tutorial, if you already know Git fundamentals (repository, commits, log, etc) you're fine, but if you don't, please check the post attached on the previous **"Git"** tab. Good luck!🤠

## How to use Github
First, we have few things that we should have/know:
{%- details Pre-requisites -%}
- A Github account. [Create one here](https://github.com/signup)
- Git installed on your PC. 
[Learn Git](https://dev.to/jafb321/learn-git-in-an-afternoon-beginners-200m)
- [Follow me on Github](github.com/JAFB321) 🐱‍🏍🎯
{%- enddetails -%}

Now we can start the tutorial properly, next we'll see some sections where we will:

{%- details Create a Github repository ☁️🐱‍👓 -%}
When you're in the Github main page (logged), you'll see this button:

![Github create repository button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0txa73l7w4xwdzjodzq.png)

Click on it and you'll see this page:

![Github repository create page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifeoyl56ze0gsldrhvz0.png)


This page is very intuitive, but I'll explain the elements on it:
- **Repository name**: Is the name wich the people will see in your repositories list, find a cool and explicative one.
- **Description**: Here you'll explain the project in a few words. Maybe you could write the objective or the tech used on it.
- **Public/Private**: If you want to show your repo to other developers, set **public** (recommended). If you want to keep the project only for you, set **private**.

The following 3 options can be skipped for now, we just have to click on **create repository** button:

![Github create repository extra options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn3dc3g5julqeal0qxwj.png)

Now, We have done our repository successfully, we'll see something like this:

![Blank github repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19ycwota9r6qaf8fht5b.png)

Don't worry if you don't understand what that is, we'll see about it in the next steps. For now, you just need to know that you have your first Github repository! 🐱‍👓
{%- enddetails -%}

{%- details Configure and push your local repository 🧪 -%}
We already have our Github repository, but also we need a local Git repository on our pc. If you don't know how to create one, you need to see [this post](https://dev.to/jafb321/learn-git-in-an-afternoon-beginners-200m).

Okay, the following is an example local repository with 3 files and few commits:

![Basic repository project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z6y1e5jk1jvfx4cr841.png)

We have to upload or **push** our local repository to the Github repository, is like sync both. For this we have to do the following:

Do you remember the github page of our new repository? there we found this commands:

![Github repository push commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc5lt7xf1e99873wlrn1.png)

<code>git remote add origin URL_EXAMPLE</code> 
This git command allow you to add a new *remote repository* (URL) to your local repository, that means that you could upload your commits (push), update your local repository (pull) and more. 

In this case, we're adding a new remote <code>URL_EXAMPLE</code>  with the alias <code>origin</code>. 

<code>git branch -M main</code>
This command change the *branch* name of our repository to "main". The reason of the change is because by default git names the branch "master" and Github need a branch named "main" (to avoid racial discrimination of *master and slave*).
*The __branch__ concept needs a more complete explanation to be understood, but for now isn't necesary, just see it like the main name of this repository*.

<code>git push -u origin main</code>
This is the interesting thing. 
- The <code>git push</code> command allow us to **push** (upload) our commits to the github repo.
- The <code>origin main</code> indicates that we want to **push** the changes to the remote named "origin" (setted on the first command) and the branch named "main" (setted on the previous command)
- The <code>-u</code> is an option to set the <code>origin main</code> options to default on the future git push/pulls calls.

Now we know what this commands are for, so we can type them on the terminal an check the results:
![First push to github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb6cmb5qg1i8b1mzqtqt.png)
*(When you enter the last command a window will open and it will ask you to login to Github, just enter your account and password and continue. This will happen only 1 time)*

If you refresh the repository page, you'll see your files and you could check interesting info like the commits made, the languages used on the repo and it's description.

![Github repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4leoac5olysi7liifka.png)

Finally, we'll have our repository on Github! And the best part is comming! In the next sections you'll learn what things you can do with Git and Github.
 
{%- enddetails -%}

{%- details Push new commits 🚀 -%}
In the last section we have pushed our local repository to the Github. Now, both repositories have the same commits. But maybe we want to make more local changes and then commit and push it to the Github repo again. Okay, Let's do it.

 
First, we'll make some changes:
![File change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uu8mkzy06s6wpzeres91.png)
Then, add the changes and commit it:
![Add and commit the changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utvqbahian4a0epavnac.png)
 
Now, we can get the repository log (history) to see the new commit:
![Repository log with new commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hoy58nyx0z3fzypi3kz.png)
As we can see, the new commit was made successfully. But this commit is only in the local repository, and it need to be pushed to the Github repo. 
 
 
For this, we can type one of the following commands:
<code>git push</code>
or
<code>git push origin main</code>

Both work fine, the difference is that the second one declare explicitly in wich "remote" and "branch" the commits will be pushed. And the first one just take the *default* settings.

*(If you rememeber, this "remote" and "branch" default settings was been setted in the previous section on the <code>git push -u origin main</code> command, thanks to the <code>-u</code> option*) 🤯

When we enter one of this commands, we'll get:
![New commit pushed successfully message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yc90g3qf19dvd4iomgt9.png)

Now, if we go to the Github repository page again and refresh it, we'll see our new commit(s) 😎.
{%- enddetails -%}

{%- details Clone a repository 🐑 -%}
In the last sections, we have created new repositories and push our local commits to github, but, if we want to download a Github repository to our local computer, what do we have to do? Well, this process is called "cloning".

To clone a repository we have to know some things:
- We need the real URL of the repository wich we want to clone. For get it, we have to go to the github repository page and copy this:
![Link to clone a github repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dajvs1dib11hhmtjw53m.png)

- We can clone whatever public repository that we want, this means that we can go to the page of any repository of any user and copy it's link and clone it on our pc, this is awesome 🤩 because we are able to download every open source code , for example we can go to the oficial [Microsoft Visual Studio code repository](https://github.com/microsoft/vscode), clone it, change it's code and modify it as we want 🧨


For this example, we'll clone this [Example repository](https://github.com/JAFB321/devto-learn-github). So, go and copy it's URL.

Now, we have to open a terminal and go to the folder where we want to clone the repo:
![Terminal in a folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmmos03lecod1ny8b4gl.png)
*In my case, I want to clone it in <code>D:\personal-projects></code> folder.*

Now we just have to type this command:
<code>git clone https://github.com/JAFB321/devto-learn-github.git</code>

We'll get something like this:
![Git repository clone result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/indwy5xvtdlm7wfisczi.png)

This should have created a new folder called like the repository cloned. In this case, the folder is <code>D:\personal-projects\devto-learn-github</code>.

Then this folder will have all repository files:
![Repository folder files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wufbe58st4mey9h0n6oj.png)

Now we can open a terminal on this folder and type <code>git log --oneline</code> or <code>git status</code> to check the new local repository:
![Cloned local repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0nn0rnxp7ah2im1o15k.png)

Now we can make changes and commit them as we want. But, can we **push** this new commits to the original Github repo? 🤔 In this case, you won't be able to do that, Why?🤨 because the repository isn't yours, you don't have permission to push changes to repositories that you aren't the owner (or where you don't have explicit access).
 
For get permission and do that, we have 2 options:
- Request write access to a Github repository to the owner.
- Make a copy of the Github project on your own Github repositories or **Fork a project**. 

Both options are material for another tutorial, we won't see them in this one.

*Obviously, if you clone a repository wich you're the owner (like the repo that you created on the first sections) you are able to push your changes to the Github repo without problem.*

{%- enddetails -%}

{%- details Update local repo with last changes 🔁 -%}
Imagine you have a Github repo, and you clone it on you laptop 💻 and your desktop pc 🖥️. You go to the laptop and do some changes and make a couple of committs, then you **push** that commits to the Github repo. Now, you have 1 local repository outdated (in your desktop pc).

To update the desktop pc repository, you must **pull** the new changes from the Github repo. 

### How to solve the problem
To do that, we'll clone one of our Github repo 2 times in our pc.
We'll create 2 folders to clone the repo 1 time on each folder:
![Github cloned repos Folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjxqox6ymzhm7k1y4yr9.png)

![Cloning a repo on 2 folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfo96g4j1hn3ni1gv8sr.png)

We have 2 copies of the same Github repository on our pc. I cloned [my own repository](https://github.com/JAFB321/devto-learn-github) but you must clone one of your own Github repos (for example the repo you created in first sections).

Now, we'll make some new commits on the <code>example-repo1</code>:
![Commits on example repo 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl7zdxa9wvjl2n2pwwkr.png)

And push them:

![Push new commits of example repo 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4rkifhrgmmtsm0c8w29.png)
 
*Note that you don't need to type <code>-u origin main</code> because is a cloned repository, and these options were set in the cloning process automaticaly*.

Once this is done, we have the Github repository and <code>example-repo1</code> updated, but <code>example-repo2</code> is outdated because it doesn't have the 2 last commits.

To update <code>example-repo2</code> we need to **pull** this new commits from Github repo. For that we have to type one of the following commands on the terminal in <code>example-repo2</code> repo:

<code>git pull</code> 
or
<code>git pull origin main</code> 

Both work fine, the difference is the same of the <code>git push</code> command where <code>origin main</code> are the "remote" and "branch" explicity defined.

When we enter one of these comands, we'll get:

![Git pull new changes from github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z4c7md5ck79pei5g51w.png)

The elements inside blue rectangle are the changes summary of the commits downloaded. If we run <code>git log --oneline</code> we'll see these new commits:

![Updated example repo 2 log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl0b9w9nxkzoqjqgnpxj.png)

Now we have the 2 repositories updated and ready to work 😎. But take care about pull and push your commits on 2+ copies of the same cloned repository, because if you make different local commits on each repo separately and try to push them at same time you could get a *merge error* 🌪️, but don't worry there is an easy solution for those kinds of problems wich we'll see on future Git tutorials 🐱‍🏍.
{%- enddetails -%}

---

<a href='https://ko-fi.com/L3L53EXUA' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

There are a lot of useful and interesting things that you can do with Git + Github, in this tutorial you have learned the most *important* topics 🥇.

You have learned a lot but there are still more things to learn wich can help you to be a very efficient developer, contribute to the open source community and grow in the IT world 🤖.

![git meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r74qfs5joj5e0kmz7jk0.gif)
(If you want to understand the meme, don't forget follow me to learn about git branches, merge, fork and more 🎈)