# Introduction to GIT

## Github Basics <a href="#github-basics" id="github-basics"></a>

### Create a new project in Github <a href="#create-a-new-project-in-github" id="create-a-new-project-in-github"></a>

See the comlete tutorial on [Github: Create a repo](https://docs.github.com/en/github/getting-started-with-github/create-a-repo)

Instead of cloning the repo that you created in Github, you can also initiallize the repo using the command line/terminal by followint the [Add a project using the command line](https://docs.github.com/en/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line)

### Fork and Clone an existing project from Github <a href="#fork-and-clone-an-existing-project-from-github" id="fork-and-clone-an-existing-project-from-github"></a>

We use fork to copy an existing Github repository into out Github account We use clone to copy an existing Github repository into our laptop If we don't fork first, for sure we can clone any repository from others, but if they don't give privileges we will not be able to push the changes, that's why we always fork the repositories

**To fork a repo:**

Firstly you need to click the "Fork" button:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiIfKp4qvfaPxJUHMV%2Fimage.png?alt=media\&token=0044c16a-ba0f-4f13-b885-b7c6a38b9818)

Then you should be brought to your new fork (notice how the repo title changes):

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiIiURvLNQXYDu7fzG%2Fimage.png?alt=media\&token=a4239e31-bc8c-4e33-a760-72268ba39469)

**To clone a repo:**

Now you can clone from your fork by copying the URL here:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiIppXm3Y7nT07mVbx%2Fimage.png?alt=media\&token=ac5570d0-33ad-4c60-8144-433d1dde53d5)

The command to clone is:

```
git clone URL_YOU_JUST_COPIED
```

### Basic Git commands <a href="#basic-git-commands" id="basic-git-commands"></a>

#### Commit and push your changes to Github

Once you have your repository, and you do the first changes in the code, do the following instructions to save and push to Github your work:

* `git add .` // track changes on files (create, remove, modify)
* `git commit -m “message”` // save changes
* `git push` // upload your commits from origin (your laptop) to the remote (Github) in branch master (the default)

If you are working with the terminal, before execute the commands, are you in the right repository folder? We can have different folders, each one for a different repository.

#### Configuration commands

* `git config --global user.name "John Doe"`
* `git config --global user.email johndoe@example.com`
* `git config --list`

#### Commands to create a project

* `git init *project name*` //initialize GIT repository in an empty directory (locally)
* `git add .` //track changes on files (create, remove, modify)
* `git commit -m “message”` //save changes
* `git remote add origin *https://github.com/yourusername/yourrepo*`
* `git push -u origin master` //upload origin (my laptop) to the server in branch
* `git status` //show current status
* `git clone *url*` //download files from URL with a file .git

### Remote <a href="#remote" id="remote"></a>

Git has a concept of a "remote". These are other git repositories that can be connected to over the internet. You can push or pull code changes from them. Remotes have a *name* and a *URL*.

All the remotes that you will use at Migracode are hosted on GitHub, so have a github.com URL.

When you clone a repo from GitHub, the default remote is named `origin` and the URL is set to that of the GitHub repo.

You can view the remotes you have set up with:

```
git remote -v
```

#### Adding a Remote

Follow these instructions if you are getting an permission error when pushing your changes. If you have cloned the original repo *before* forking, you'll need to follow these instructions. You can check this by running `git remote -v`. If the output looks something like:

```
origin git@github.com:CodeYourFuture/css-skin.git (fetch)
origin git@github.com:CodeYourFuture/css-skin.git (push)
```

then you have cloned before forking. The key is that the `origin` remote is pointing to a CodeYourFuture URL. Don't worry, we can fix it!

The first step is to fork the original repo. Follow the first 2 steps from [forking instructions](https://migracode-barcelona.github.io/syllabus/others/git.html#how-to-fork-a-github-repo) above.

Now, instead of cloning the fork (you have already cloned), you need to add it as a remote.

Run:

```
git remote add fork URL_YOU_COPIED_FROM_FORK
```

This will add a new remote called `fork` that points to your new fork. To check this, run `git remote -v` again. You should see both the `origin` and `fork` remotes.

Now that you have your `fork` remote you can push to it (instead of the `origin` remote, which will error) by running:

```
git push fork
```

You'll need to remember to add the `fork` *every time you push*.

## Other Github functionalities

### Publish your website in Github.io with GitHub Pages

1. Now all that remains is to publish your website! In your repository `http://github.com/your-username/your-repository-name`, you can find the settings icon in the top right corner:&#x20;

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MaOQDjxMpL4perl-oXX%2F-MaOQrz8RXH35uJL_MMv%2Fimage.png?alt=media\&token=2d9f4c3e-c3bf-457d-9166-a284e6c2bb95)

**2.** Find the section named Github Pages and select "main branch" under 'Source', then hit "Save".

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MaOQDjxMpL4perl-oXX%2F-MaOQw50qQZkGWspR1xn%2Fimage.png?alt=media\&token=449de886-0405-4369-96d8-03d4e4751b96)

**3.** Wait a few minutes, then refresh the page and come back to the Github Pages section. Now you should see a green bar saying "Your site is published at `http://github.com/your-username/your-repository-name`". Click the link, verify that your website is there, then share it with your class!

### Making a Pull Request (PR)

So you've done your homework, you've committed your changes and are ready to make a PR. Congrats! 🎉🎉🎉

At this point you should have followed the instructions either to [fork the original repo](https://migracode-barcelona.github.io/syllabus/others/git.html#how-to-fork-a-github-repo) or [added a remote to your fork](https://migracode-barcelona.github.io/syllabus/others/git.html#adding-a-remote). If you haven't make sure you read those sections first.

You will need to push to your fork. If you forked and then cloned (as in the [how to fork instructions](https://migracode-barcelona.github.io/syllabus/others/git.html#how-to-fork-a-github-repo)) then you just need to run `git push`. If you [added a remote to your fork](https://migracode-barcelona.github.io/syllabus/others/git.html#adding-a-remote), then you will need to run `git push fork`.

Next you need to go the original repo in your browser (probably starting with <https://github.com/CodeYourFuture>). Next click the Pull Requests tab:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJ-SIGGDs300fjeai%2Fimage.png?alt=media\&token=857ff29e-2914-4bbd-a647-ef7c49b3a86a)

Then click the New pull request button:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJ30_tZ6FO4saAZI4%2Fimage.png?alt=media\&token=188515a0-9581-4136-b44e-de32a94e17f0)

Then click the "compare across forks" link:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJ60eSDzumKqXjz2m%2Fimage.png?alt=media\&token=8280b1b0-ea27-4279-ab7f-528121ff4a80)

Then click the "head fork" dropdown button:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJ8R0t9wwAUEScuJL%2Fimage.png?alt=media\&token=efead2f3-16a2-43fb-9621-998415fab0cc)

Then find your fork in the list and click it:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJApszjW2Upovqw04%2Fimage.png?alt=media\&token=6a39f765-98bc-4935-8cd0-e215a6e85fea)

Then click the Create pull request button:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJGGx94Bk3eHbY0FU%2Fimage.png?alt=media\&token=5bc3b6b7-533d-403b-a947-52467c9b5ead)

Almost there! Now fill out the PR form. Give it a sensible title and an (optional) description:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJJDhNBJAgYz5EHEk%2Fimage.png?alt=media\&token=05143b5f-5af9-4da4-8a3c-b1e0489e3d60)

And finally click the Create pull request button at the bottom of the form:

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJLpWurp7osz5W8_M%2Fimage.png?alt=media\&token=a7504ceb-73e5-4827-b047-d8e0a59551e5)

That's it! You created your PR!

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJOYXTe_HlgHBcOHR%2Fimage.png?alt=media\&token=9cc16c22-8377-418a-a585-c64c56bb4445)

## Advanced

### Git Branching <a href="#git-branching" id="git-branching"></a>

You have been using git to track the changes you make to your exercises project. Each time you commit, you save a copy of your files.

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJckTOgnYvPDnDunh%2Fimage.png?alt=media\&token=c2676999-2657-4d7a-b914-afd2fdb59b9e)

When you create a new branch, you create a separate line of commits.

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJeI9kzB_G-_s8nIm%2Fimage.png?alt=media\&token=0da413ac-27ae-4d29-a771-021b7027f864)

With branches, you can work on two copies of your project and switch back and forth.

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJfwPbqC_VjiwY0Vb%2Fimage.png?alt=media\&token=8a81ae64-8727-4e08-bffc-54923d0f74d8)

Complete exercise 9 from the [exercise project](https://github.com/Migracode-Barcelona/html-css-git-exercises) to learn how to use git branches.

> If you want to go deeper, read this article on [how git branching works](https://www.atlassian.com/git/tutorials/using-branches).

### Git Merging <a href="#git-merging" id="git-merging"></a>

Last week you used Git to create a branch so that you could work on two different copies of your project at the same time.

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJkEl76sQAhkLR5Pr%2Fimage.png?alt=media\&token=cfd4746e-d559-4448-b6e0-41cff2f80d5b)

This week you will learn how to merge your changes in one branch back to your master branch.

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJm4CVsxfxkz_OeQs%2Fimage.png?alt=media\&token=1e0ad4e6-12d8-49ba-aabf-02a949330b53)

Complete exercise 18 from the [exercise project](https://github.com/Migracode-Barcelona/html-css-git-exercises).

### Git Merge Conflicts <a href="#git-merge-conflicts" id="git-merge-conflicts"></a>

Last week you used Git to merge your changes from one branch back into your master branch.

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJq1zRJfqbOnqe5iD%2Fimage.png?alt=media\&token=77ebf4b3-2c70-4441-85ad-e52dc3d1e860)

Sometimes Git can not automatically merge one branch into another, because each branch has modified the same line of code. Git does not know which version of the line is the correct one. When this happens, we have a "merge conflict".

![](https://4042228299-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MRebciU3NcuLgsX3ijf%2F-MhiI7IlWBxO2NlIMrWK%2F-MhiJsIQejrPDsTif1kH%2Fimage.png?alt=media\&token=4525aa33-7165-4966-970c-85200312e93a)

As a developer, you have to tell Git which version of the line of code is correct.

Complete exercise 28 from week 3 of the [HTML, CSS and Git Exercises](https://github.com/Migracode-Barcelona/html-css-git-exercises) to learn how to resolve a merge conflict.

<https://www.atlassian.com/git/tutorials/using-branches/merge-conflicts>

### Git Conflicts <a href="#git-conflicts" id="git-conflicts"></a>

As a professional, you'll usually need to work alongside other coders to build an app or website. We use version control to coordinate changes and manage any conflicts that arise. [Git](https://git-scm.com/) is a version control system which helps us merge code that we've been working on separately into one common codebase.

To manage conflicts, we will need a common code base in which all changes are coordinated. When working on our own, we'll make our changes in `branches` to keep the code separate. Then we'll learn how to refresh your individual `branch` with the common code base, and prepare your changes to be merged.

> Exercise: Get together in pairs and select a "leader". The leader should fork [this repository](https://github.com/CodeYourFuture/first-git-conflict) to their GitHub account. The other person should then fork the leader's repository. Both students should then clone their own personal forks locally.

Now that you have the project set up on your computer, you need a place to safely make changes without effecting the common code base. To do this, we'll navigate to our project in the Terminal and create a new branch:

```
cd <your-project-directory>
git checkout -b my-first-branch
```

When you commit changes on this branch, your changes will be saved separately from the common code base. This way both team members can make changes at the same time.

> Exercise: Add your name and a sentence about yourself to the `index.html` file. Then `git add` and `git commit` to commit to your personal branch.

Now you have two branches: `master` and `my-first-branch`. These branches have *diverged*, which means you have changes in one that don't appear in the other. You can check this by running `git checkout master`, then looking at your `index.html` file.

When you're done, run `git checkout my-first-branch` to go back to the branch with your changes. Git saves your changes in both branches and lets you switch between them. That's why we call it "version control". It saves different versions so you can switch between them.

Right now, your new branch only exists on your computer. Let's push it up to GitHub so you can see it in your profile.

```
git checkout my-first-branch
git push -u origin my-first-branch
```

Now both students in each pair, the "leader" and the other student, should have branches with changes. Now let's try to merge these changes together into the "leader's" master branch.

> Exercise: Browse to the "leader's" GitHub repository and open a new Pull Request. The Pull Request should ask to merge your `my-first-branch` branch into the "leader's" `master` branch. Ask a mentor for help if you have trouble figuring out how to issue a Pull Request. When both students have issued a Pull Request to the correct place, merge *one* of them but not the other.

Congrats, you've merged one student's changes with the common code base in the `master` branch. If you check the other Pull Request, you'll see you have a problem. It can't be merged automatically because there's a conflict. Why?

Conflicts emerge whenever the same file has been edited, and git can't determine what changes should be kept and what changes should be discarded. A human -- that's you -- needs to step in and sort it out. To help us, git writes into our code so we can see where it is confused. Here's an example of a merge conflict in our code:

```
<<<<<<<  HEAD
+   <h2>Mozafar</h2>
+   <p>I am a mentor at CodeYourFuture.</p>
=======
-   <h2>Daniel</h2>
-   <p>I like to ride bikes</p>
>>>>>>> my-first-branch
```

To resolve a conflict, we decide which lines to keep and which lines to remove. When we're done, we remove the extra lines that git added (`<<<<< HEAD`, `========` and `>>>>>>>`).

Let's see how we can resolve this conflict with your branches. First we need to fetch the latest changes from the leader's `master` branch. If you're the **leader**, just do:

```
git checkout master
git pull
```

If you're the **other student**, you need to set up the remote and pull from that master:

```
git checkout master
git remote add upstream <your-leaders-git-repository-url>
git pull upstream master
```

Now everyone's `master` branch should include the Pull Request that was merged. Whichever student still needs to get their Pull Request merged can bring those changes into their branch like this:

```
git checkout my-first-branch
git merge master
```

You probably received a **merge conflict**.

> Exercise: Follow the steps we discussed before about how to resolve a merge conflict by editing the file. Make sure both students changes are included in the final version. When you're done, use `git add`, `git commit` and `git push` to share your changes with GitHub. If everything has gone correctly, you can now merge the Pull Request.

Now everyone can sync their changes. If you're the **leader**, just do:

```
git checkout master
git pull
```

If you're the **other student**, do this:

```
git checkout master
git pull upstream master
```

> Exercise: As a group, discuss why the `git pull` command is different for the **leader** and the **other student**.
>
> Exercise: Try to do the pull requests again, but this time switch the pull requests so that the other student must manage the merge conflict.

If you're feeling confused, don't worry. Version control is one of the most difficult things you'll learn and we'll be going over it again and again and again.

### Merging and advanced Git commands <a href="#merging-and-advanced-git-commands" id="merging-and-advanced-git-commands"></a>

* `git fetch` //fetch latest changes from origin and all branches (no merge)
* `git pull` //fetch latest changes from origin and all branches (with merge)
* `git merge`

Branches:

* `git branch test` //creates a new local branch
* `git checkout test` //move to branch test
* `git checkout master` //move to branch master
* `git checkout -b test` //create a new local branch and move into it
* `git push origin test` //push the branch and all commits to the server
* `git branch -d test` //remove a local branch
* `git checkout -b test origin/test`
* `git fetch --all` //to get all branches from server
