-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
494 lines (351 loc) · 15.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Intro to Git & GitHub</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/sky.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-markdown>
# Intro to Git and GitHub
Note:
- By show of hands. How many people have used Git and or GitHub before?
- This workshop is designed for people who are new to Git and GitHub and is created in the context of Code for Greensboro's workflow
</section>
</div>
<div class="slides">
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
# About This Workshop
## Goal
- Using Git to track changes in a project
- Using Git to undo changes in a project
- Using GitHub to collaborate with others
<!-- TODO: Objectives -->
<!-- TODO: Application -->
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
# What is Git?
## According to XKCD:
## According to git-scm.com:
> Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
## But what does that mean and what problem does Git solve?
### Have you ever worked on project that starts out like this?
```bash
project
└── my_project_2018-09-25.txt
```
Note: Have you ever worked on a paper or a project where maybe after you finished your first draft and got some feedback and before you start working on the next draft you name the file something like `my_project_2018-09-25.txt`
Then you start on the next draft and you repeat the process and name it like `my_project_2018-10-18.txt`
And so on and so forth and eventually you end up with a directory that looks like this:
### And after a few iterations your project looks like this?
```bash
project
├── my_project_2018-09-25.txt
├── my_project_2018-10-18.txt
├── my_project_final.txt
├── my_project_final_final.txt
└── my_project_final_final_THIS_ONE.txt
```
Note: Now imagine you and a team were working on this project and you were saving files like this and each person was making their own changes and sharing the files back and forth.
## Git provides a way to track incremental changes and share those changes with others
And, when using Git correctly it gives you the confidence to break stuff
Note:
In our example what would happen if two people made changes to the same file at the same time?
They would have to manually figure out what to keep and what to get rid of. Git can do this automatically and when it can't it provides a convient interface for doing it yourself.
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
# What is GitHub?
and how is it different from Git?
## According to GitHub's website:
> GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside 31 million developers.
# What does that even mean?
Basically GitHub is a cloud based Git server. It provides a place for developers to `push` and store their Git projects and it makes it easier for multiple people to work on the same project.
## Confused?
Let's get started!
Note: This is all still a little confusing and highlevel so lets get started on a project and hopefully that will clarify things.
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Step 0 - Fork the Repo
- Go to this url: https://github.com/codeforgso/github-workshop-site
- Click the `Fork` button in the upper right corner <!-- TODO: Screenshot? -->
### "What did I just do?"
#### You forked a repo! <!-- .element: class="fragment" data-fragment-index="1" -->
#### Forking: Copying another person's project remotely. <!-- .element: class="fragment" data-fragment-index="2" -->
Note:
Forking is Git terminology for copying another person's project.
It provides a place for you to make your own changes and if you want you can later give your changes back to the original repo.
When contributing to projects in a team (and especially in open source) this is the first step
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template>
## Step 1 - Clone your newly forked repo
Mac/Linux - Open terminal
Windows - Open Git Bash Type the following
```sh
git clone https://github.com/YOUR_GITHUB_USERNAME/github-workshop-site.git
# You can copy the URL from GitHub page
cd github-workshop-site
ls -a # List all files in the directory
```
<!-- Note: -->
<!-- These are bash/terminal commands. Type these into Git bash or your Terminal. The hashes/hashtags/octothorpe indicate comments. You don't need to type these. -->
<!-- Alright, so you have the project on your machine and it's time for you to make some changes to it -->
<!-- Let's assume your team wants you to _change something on the website_. Using Git, how do we go about this? -->
<!-- Note: there are many ways to do this with Git, but we are making the assumption that your are working on a team. And for that assumption, this is a common workflow you would see.-site # Change directory to project -->
### "What did I just do?"
#### You cloned a repo! <!-- .element: class="fragment" data-fragment-index="2" -->
Cloning is when you download a copy of a Git project to your computer
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
# "Wait! this is confusing! How is cloning different from forking?!"
- Cloning: Downloading a project
- Forking: Creating your own copy of a project remotely
Note:
Cloning is different because you are downloading the project to your machine.
With forking you are creating your own copy of the project remotely.
If there is ever a project you just want to use and not contribute to, you'd often skip forking it and would just clone it.
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Open the index.html file in your browser
To find where your project is type `pwd` in your terminal
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Step 2 - Branches
## So I downloaded the project. Now what?
Note:
Alright, so you have the project on your machine and it's time for you to make some changes to it
Let's assume your team wants you to _change something on the website_. Using Git, how do we go about this?
there are many ways to do this with Git, but we are making the assumption that you're are working on a team. And for that assumption, this is a common workflow you would see.
### Let's make a change!
```bash
git branch my-changes # Creates a branch called my-changes
git branch # Shows you a list of all your local branches. Press `q` to exit
git checkout my-changes # Switches from your current branch to the my-changes branch
```
### "What did I Just do?"
You created a branch!
Note:
A branch is just code that _branches_ from the another development branch.
A lot people use branching for something called "feature branching". This means you create a new branch for each logical group of changes.
For example your working on a website and your boss asks you to add the navbar.
You might then create a branch called `add-navbar`. This would allow you to create and push as many changes as you want without affecting the main development branch.
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
# Branches and Forks and Repos. Oh My!
Note:
We've covered several terms so far and they all sound kind of similar. So lets take a moment to recap and clarify things
### Terms
>
- Repo (repository) -> This is your project
- Fork -> Creating a repo by copying another repo
- Branches -> Groups of logical code changes (Or, groups of commits)
## An analogy
A **repo** is like a tree
**Forking** is making copy of another person's tree
**Branches** are (kind of) like real life branches
Note:
Maybe an analogy would make things clearer:
A repo is a tree.
When you fork someone's repo, you make an identical copy of their tree and plant it in your front yard.
The branches on the tree represent your Git branches. These branches stem from the trunk (typically called the `master` branch) and in Git - unlike a real tree - these branches will rejoin the `master` or another branch
## Is that any clearer?
</textarea>
</section>
<!-- <section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Step 3 - Commits
First, lets make a change to our `index.html` file.
Open the `index.html` file in your favorite editor.
Look at the comment around line 54 and replace it with today's date
From the command line run:
```sh
git status
```
Do you see this?
```bash
On branch my-changes
Your branch is up to date with 'origin/master'.
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: index.html
no changes added to commit (use "git add" and/or "git commit -a")
```
### Notice the suggestions
Note:
Git is very good about providing help with what it thinks you're trying to do.
In this case Git is telling us how to stage the file or delete our changes
Let's go remove this change
```bash
git checkout -- index.html
git status
```
You should see something like the following:
```bash
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
(use "git push" to publish your local commits)
nothing to commit, working tree clean
```
</textarea>
</section> -->
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Let's make change
- Let's make a change
- Open the `index.html` file in your favorite editor.
Note:
Using VS Code type `code .`
Using Windows Notepad.exe type `notepad.exe`
Around line 61 change the project URL to your GitHub url:
```bash
git add index.html
git status
```
## You should see something like this:
```bash
On branch my-changes
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: index.html
```
When you run `git add` you stage your change. this means you are ready to commit the file to the repo. Run the following:
```bash
git commit -m "Add my repo url"
```
### What did that do?
You just made your first commit! Commits are how you save your changes to a project.
Type `git log` to show a list of commits in the current branch. Press `q` to exit.
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Let's revert this commit
Note: So you made your first commit and that's great. But let's pretend your boss or project manager comes to you and says they no longer want your change. How do you go back to a previous commit?
```bash
git revert HEAD --no-edit # `no-edit` tells git that you want the commit message to stay the same
# If you are in nano type Ctrl+X then type y
git log
```
Note:
You should see something that says "Revert" then your commit message
This will undo your most recent change. If you need to revert to something several commits back checkout the atlassian resource at the end of the presetation
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Let's make one more commit, and this time we are going to leave it
### Checkout master
```bash
git checkout master
```
### Run
```bash
# Checkout a new branch
git checkout -b add-github-username
```
Note: `checkout -b` is just a shorter way of creating a new branch and checking it out
Go to line 129 or so and add your Github username and a link to your profile with the listed template
Example:
```html
<li>
<a href="https://github.com/SchaeStewart">SchaeStewart</a>
</li>
```
Run
```bash
git add index.html
git commit -m "Add GitHub username"
```
### Time to upload your change
```bash
git checkout master
git merge add-github-username
git push origin master
```
Note:
What did this do?
You moved back to your master branch and merged you changes with it. Then you pushed your changes to GitHub.
</textarea>
</section>
<section data-markdown data-separator-vertical="^\n\n">
<textarea data-template >
## Make A Pull Request
- Go back to your GitHub repository page
- Click the `Pull requests` tab
- Click the green `New pull request` button
- Write a title and body
- Submit your Pull Requests
### Now what?
Note:
I now have to approve your pull request
</textarea>
</section>
<section data-markdown data-separtor-vertical="^\n\n">
<textarea data-template >
## Additional Resources
- `man git`
- `git --help`
- Attlassian - atlassian.com/git/tutorials
- Git SCM - git-scm.com/docs/gittutorial
</textarea>
</section>
</div>
</div>
</textarea>
</div>
</section>
</section>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.configure({
slideNumber: true
})
Reveal.initialize({
history: true,
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>