index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Intro to Git & GitHub</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
      @import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body {font-family: 'Roboto'; font-weight: bold; line-height: 1.4;}
      .remark-code, .remark-inline-code {font-family: 'Ubuntu Mono'; font-size:26px;}
      .remark-slide-content h1 {font-size: 40px; text-align: center;}
      .remark-slide-content p, .remark-slide-content li {font-size:30px; margin: 20px 0;}
      a:link {text-decoration: none;}
      img{max-height: 100%;}
      .quote_author {display: block; text-align: right;}
      .tiny {font-size: 20px;}
      .red {color:red;}
      .green {color:green;}
      .blue {color:blue;}
      .gray {color:gray}
      .lightgray {color:lightgray}
    </style>
  </head>
  <body>

<textarea id="source">

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)]

<br>

Git is a free & open source version control system.

<br>

.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
```

<br>

### 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
```

<br>

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
```

<br>

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.


<!-- <br>

```
$ 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
```

<br>

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.*]


<br>

```
$ 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)

<br>

.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
```


---

## Create Personal Access Token

.center[![:scale 100%](./images/github-dropdown-settings.png)]

Click your GitHub profile, then "Settings".

---

## Create Personal Access Token

.center[![:scale 90%](./images/github-dropdown-developer-settings.png)]

Click "Developer settings" at bottom of the left panel.

---

## Create Personal Access Token

.center[![:scale 100%](./images/github-dropdown-pat-settings.png) ]

Click "Token (classic)".

---

## Create Personal Access Token

.center[![:scale 100%](./images/github-generate-pat.png) ]

---

## Create Personal Access Token

.center[![:scale 100%](./images/github-new-access-token-1.png) ]

---

## Create Personal Access Token

.center[![:scale 100%](./images/github-new-access-token-2.png) ]

---

## Connect GitHub to your computer

- Where asked for your password, paste the Personal Access Token.
- We shouldn't be asked for password again for 90 (or whatever) days.


---

## How to get our local repo up to GitHub?

```
$ git push origin main
```

---

## GitHub changes

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

---

## GitHub commit history

.center[![:scale 100%](./images/github-commit-history.png)]


---

## GitHub diffs

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

---

## Let's create a file on GitHub

.center[![:scale 90%](./images/github-create-new-file.png)]

---

## Let's create a file on GitHub

.center[![:scale 90%](./images/github-name-file-license.png)]


---

## Let's create a file on GitHub

.center[![:scale 90%](./images/github-ignore-warning.png)]


---

## Let's create a file on GitHub

.center[![:scale 90%](./images/github-select-license.png)]

---

## Let's create a file on GitHub

.center[![:scale 90%](./images/github-license-text.png)]

---

## Let's commit changes on GitHub

.center[![:scale 90%](./images/github-license-commit.png)]

---

## New file already on GitHub

.center[![:scale 90%](./images/github-repo-update.png)]

---

## How do we get our file back to our local computer?

```
$ git pull origin main
```


---

## Exercise

- Create a new Git repository on your computer called workshop.
- Write three lines about what you have learned about Python and bash a file called README.md, commit your changes.
- Modify one line, add a fourth line.
- Display the differences between its updated state and its original state.
- Push it to GitHub.


<!-- ------------------------------------------ -->

</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured" type="text/javascript"></script>

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

<script>
remark.macros.scale = function (percentage) {
  var url = this;
  return '<img src="' + url + '" style="width: ' + percentage + '" />';
};

var slideshow = remark.create({
  countIncrementalSlides: false,
  highlightLanguage: 'python',
  highlightStyle: 'tomorrow-night-bright', 
  highlightSpans: true,
  highlightLines: false,
});

      // Setup MathJax
      MathJax.Hub.Config({
          tex2jax: {
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
          inlineMath: [['$','$'], ['\\(','\\)']]
          }
      });

      MathJax.Hub.Configured();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.7/mermaid.min.js"></script>
<link rel="stylesheet" href="./mermaid.css">
<script>mermaid.initialize({startOnLoad:true});</script>

</body>
</html>