Intro to Git & GitHub

class: center, middle

# Introduction to

.center[![:scale 30%](./images/Git-Logo-2Color.png) ]

.center[![:scale 30%](./images/GitHub_Logo.png)]

---
class: middle, center

![:scale 56%](./images/phd101212s.gif)

.tiny[.lightgray[“Piled Higher and Deeper” by Jorge Cham]]

---
class: middle, center

.center[![:scale 100%](./images/word-diff.png) ]

---
class: middle, center

.center[![:scale 80%](./images/dropbox.png) ]

.center[![:scale 80%](./images/google-docs.png)]

---
class: middle, center

.center[![:scale 100%](./images/googlesheets-diff.png)]

---
class: middle, center

.center[![:scale 100%](./images/excel-undo.png)]

<!-- ---
# What is Git?

.center[![:scale 50%](./images/Git-Logo-2Color.png)]

Git is a free & open source version control system.

.center[[Official website](https://git-scm.com/)] -->

---
class: middle, center

![:scale 100%](./images/git-branch.svg)

---

class: middle, center

.center[![:scale 70%](./images/Git-Logo-2Color.png) ]

.center[![:scale 70%](./images/GitHub_Logo.png)]

---
class: middle, center

# One-time configurations

---

### User name

Set a name that is identifiable for credit when review version history.

```
$ git config --global user.name "Fred Feng"
```

### User email

Set an email address that will be associated with each history marker.

```
$ git config --global user.email "fredfeng@umich.edu"
```

---
# Line endings

### On macOS and Linux:

```
$ git config --global core.autocrlf input
```

### On Windows:

```
git config --global core.autocrlf true
```

---

### Text editor

```
$ git config --global core.editor "nano -w"
```

### Default Branch name

```
$ git config --global init.defaultBranch main
```

### Credential storage

```
$ git config --global credential.helper store
```

---

### View the configurations

```
$ git config --list
```

---

## Using git - 98% of what you will do

* Get versions of our files into repository
* Attach a message to our files indicating what happened

.center[![:scale 90%](./images/git-committing.svg)]

---

# cd into your .red[un-report] directory

To check if you are there, print the working directory

```
$ pwd
```

Or you can list the files in the current directory

```
$ ls
```

---
# Show the status of the git repository

```
$ git status
```

At this point, we will see an error message.

```
fatal: not a git repository
```

---
# Initialize a new git repository

```
$ git init
```

---
# Show the status of the git repository

```
$ git status
```

- Show modified files in working directory, staged for your next commit.

---
# Under the hood

Git stores all project info inside a hidden .red[.git] folder

List all files

```
$ ls -a
```

List the files inside the .red[.git] folder

```
$ ls .git
```

---

# Staging area

An intermediate area where a subset of the modified files can be grouped for a commit.

.center[![:scale 90%](./images/git-committing.svg)]

It helps to split up unrelated changes in your working directory into multiple, meaningful commits.

---
# Add files to the staging area

```
$ git add [file_1] [file_2]
```

Add the files (as they look now) to the staging area for your next commit.

- Each commit should be a logical unit of change.

<!--

```
$ git add .
```

Add all files in working directory to the staging area. -->

---
# Commit (i.g., take a snapshot of) the changes from the staged files

```
$ git commit -m "Initial commit"
```

---
class: middle, center

# Tracking changes

---
Let's create a file called .blue[README.md].

```
$ nano README.md
```

Let's type some text into the .blue[README.md] file

```
## Notes for UN Report

We plotted life expectancy over time.
```
  
---

We can verify the file was indeed created by running

```
$ ls
```

We can also view the content of the file in the command line window by running

```
$ cat README.md
```

---
# Commit the changes

```
$ git status
```

```
$ git add README.md
```

```
$ git status
```

```
$ git commit -m "Start notes on analysis"
```

```
git status
```

---
# Make some more changes

```
$ nano README.md
```

Let's add a second line into the .blue[README.md] file

>> .gray[*We plotted life expectancy over time.*]

>> .green[*Each point represents a country.*]

```
$ cat README.md
```

---
# Commit the new changes

```
$ git status
```

```
$ git diff
```

```
$ git add README.md
```

```
$ git commit -m "Add information on points"
```

```
$ git status
```

---
# Exercise

Follow the previous examples to

- Add a third line to the .blue[README.md] file

>> .gray[*We plotted life expectancy over time.*]

>> .gray[*Each point represents a country.*]

>> .green[*Continents are grouped by color.*]

- Commit the above change.

---

# Question

Which of the following commit messages would be most appropriate for the last commit?

1. “Changes”
1. “Added line ‘Continents are grouped by color.’ to README.md”
1. “Describe grouping”

---
class: middle, center

![:scale 100%](./images/git_commit_2x.png)

.lightgray[Source: https://xkcd.com/1296/]

---

# Show the commit logs

```
$ git log
```

```
$ git log -5
```

```
$ git log --oneline
```

---

## Create repository in GitHub

- Open the GitHub website and sign in
- Create a new repository with name .red[un-report]
  - Do not check the box to add a .red[README] file
  - Do not select a .red[.gitignore] file 
  - Do not select a .red[LICENSE] file
- Click .green[Create repository] button

---

## Connect GitHub to your computer

.center[![:scale 65%](./images/github-push-instructions.png)]

- Copy the URL that ends with .red[un-report.git]

---

## Connect GitHub to your computer

- Add this GitHub repo we just created as a "remote" for our local git repo.

```
$ git remote add [alias] [the url you just copied]
```

By convention the GitHub repo is often named .red[origin].

```
$ git remote add origin https://github.com/x/abc.git
```

---