forked from girldevelopit/gdi-featured-git-github
/
index.html
798 lines (754 loc) · 36.6 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
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intro to Git and Github ~ Girl Develop It</title>
<meta name="description" content="This is the official Girl Develop It Core Intro to Git and GitHub course. Material based on original material by Kim Moir, Daniel Fischer, Aurelia Moser, Carina C. Zona and Izzy Johnston.
The course is meant to be taught in a two-hour workshop. Each of the slides and practice files are customizable according to the needs of a given class or audience.">
<meta name="author" content="Girl Develop It">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="reveal/css/reveal.css">
<link rel="stylesheet" href="reveal/css/theme/gdidefault.css" id="theme">
<!-- For syntax highlighting -->
<!-- light editor--><link rel="stylesheet" href="lib/css/light.css">
<!-- dark editor<link rel="stylesheet" href="reveal/lib/css/dark.css">-->
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Opening slide -->
<section>
<img src = "images/gdi_logo_badge.png" style=
"background: transparent; border:none; box-shadow: none;">
<h3>Intro to Git and Github</h3>
</section>
<!-- Welcome-->
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
<p class ="green">Some "rules"</p>
<ul>
<li>We are here for you!</li>
<li>Every question is important</li>
<li>Help each other</li>
<li>Have fun</li>
</ul>
</div>
</section>
<section>
<h3>Welcome!</h3>
<div class = "left-align">
<p class = "blue">Tell us about yourself.</p>
<ol>
<li>Who are you?</li>
<li>Favorite local restaurant?</li>
<li>OPTIONAL: What drew you to take this class?</li>
</ol>
</div>
</section>
<section>
<h3>What we will cover in this workshop</h3>
<ul>
<li class ="fragment">What is version control and why should we care?</li>
<li class ="fragment">Basics of git: the essential commands</li>
<li class ="fragment">GitHub (or, a little git between friends)</li>
</ul>
</section>
<!-- Installation and Setup-->
<section>
<section>
<h3>Installation and Setup</h3>
<a href = "http://git-scm.com/downloads" alt ="Download latest version of Git" target ="_blank">
<p>Install git</p>
<img src = "images/install-git.png" alt = "Download latest version of Git"/>
</a>
<a href="https://help.github.com/articles/set-up-git/" style="display: block;">Setup steps on GitHub</a>
</section>
<section>
<h3>Installation and Setup</h3>
<p>Setup name and email in gitconfig</p>
<pre><code class ="command-line">
$ git config --global user.name "Your Name Here"
# Sets the default name for git to use when you commit
</code></pre>
<pre><code class ="command-line">
$ git config --global user.email "your_email@example.com"
# Sets the default email for git to use when you commit
</code></pre>
<pre><code class ="command-line">
$ git config --list
</code></pre>
</section>
<section>
<h3>Setup: Setting the default text editor</h3>
<p> By default git is set up to use Vim as the text editor.</p>
(<span class="green">esc</span> + <span class="green">:q</span> or <span class="green">:q!</span> to get out of Vim)
<p>Follow <a href="https://help.github.com/articles/associating-text-editors-with-git/">these instructions</a> to change your default text editor to whatever you prefer. </p>
</section>
<section>
<h2>Setup!</h2>
<img src="images/letsdothis.gif" alt="Let's do this thing!"/>
<div>
<a href="https://help.github.com/articles/set-up-git/">Instructions on GitHub for reference</a>
<p>BONUS LEVEL: Set up your GitHub account and authentication from Git.</p>
</div>
</section>
</section>
<!-- Version control-->
<section>
<section>
<h3>What is version control?</h3>
<p>Version control is a tool that allows you to...</p>
</br>
<div class="fragment">
<h4>Collaborate</h4>
<p>Create anything with other people, from academic papers to entire websites and applications.</p>
</div>
</br>
<div class="fragment">
<h4>Track and revert changes</h4>
<p>Mistakes happen. Wouldn't it be nice if you could see the changes that have been made and go back in time to fix something that went wrong?
</div>
</section>
<section>
<h3>You already manage versions of your work!</h3>
<p> Do you have files somewhere that look like this?</p>
<pre><code>
Resume-September2016.docx
Resume-for-Duke-job.docx
ResumeOLD.docx
ResumeNEW.docx
ResumeREALLYREALLYNEW.docx
</code></pre>
<div class="fragment">You invented your own version control!</div>
</section>
</section>
<section>
<section>
<h3>Brief history of Version Control</h3>
<p><span class ="green">1990s</span> — CVS (Concurrent Version Systems)</p>
<p><span class ="green">2000s</span> — SVN (Apache Subversion)</p>
<p><span class ="green">2005</span> — Git </p>
</section>
<section>
<h3>Chapter 1: Git is Born</h3>
<p>The first commit, April 2005</p>
<pre>
<code>
commit e83c5163316f89bfbde7d9ab23ca2e25604af29
Author: Linus Torvalds <torvalds@ppc970.osdl.org>
Date: Thu Apr 7 15:13:13 2005 -0700
Initial revision of "git", the information manager from hell
</code>
</pre>
</section>
<section>
<h2>Types of Version Control Systems</h3>
</section>
<section>
<h3>Centralized Version Control</h3>
<img src="images/centralized-vc.png" alt = "one central server with each person pushing changes to the main server"/>
<p>One central server, each client (person) checks out and merges changes to main server</p>
<p class="pink">Examples: CVS, Subversion (SVN)</p>
</section>
<section>
<h3>Distributed Version Control</h3>
<img src="images/distributed-vc.png" alt="each person works on her own local copy; each copy is reconciled with the main copy on the server" />
<p>Each client (person) has a local repository, which they can then reconcile with the main server.</p>
<p class="pink">Examples: Git, Mercurial</p>
</section>
</section>
<!-- Git-->
<section>
<section>
<h3>Why Use Git?</h3>
<ul>
<li><span class="green">Fast!</span> Access information quickly and efficiently.</li>
<li><span class="green">Distributed!</span> Everyone has her own local copy.</li>
<li><span class="green">Scalable!</span> Enables potentially thousands (millions!) of developers to work on single project.
<li><span class="green">Local!</span> You don't need a network connection to use it. You only need a remote server if you want to share your code with others (e.g., using GitHub).</li>
<li><span class="green">Branches!</span> Keep your coding experiments separate from code that is already working.</li>
<li>Everyone has a local copy of the <span class="green">shared files</span> and the <span class="green">history.</span></li>
</ul>
</section>
<section>
<h3>What should I use version control for?</h3>
<h4>Anything. But not everything.</h4>
<img src="images/allthethings.jpg"/ alt="version control ALL THE THINGS!" style="margin-top: 50px;">
</section>
<section>
<h3>Gitignore</h3>
<p>You decide what goes into version control.You can, and should, leave some things out.</p>
<p class="green">libraries, .dotfiles, api keys...</p>
<img src="images/ronignore.gif"/>
<p>The<a href="https://help.github.com/articles/ignoring-files/">.gitignore</a> file at the root of your project directory</p>
<p>Check out <a href="https://www.gitignore.io/">gitignore.io</a> for some suggestions.</p>
</section>
</section>
<!-- Git terms and commands-->
<section>
<section>
<h3> Git has its own Vocabulary </h3>
<ul>
<li> A <span class="green">repository</span> is where you keep all the files you want to track.</li>
<li> A <span class="green">branch</span> is the name for a separate line of development, with its own history.</li>
<li> A <span class="green">commit</span> is an object that holds information about a particular change. </li>
<li> <span class="green">HEAD</span> refers to the most recent commit on the current branch.</li>
</ul>
</section>
<section>
<h3>Some Basic Git Commands</h3>
<ul style="font-family: monospace;">
<li>init</li>
<li>add</li>
<li>commit</li>
<li>status</li>
<li>log</li>
<li>branch</li>
<li>checkout</li>
<li>fetch</li>
<li>merge</li>
<li>pull</li>
<li>push</li>
<li>clone</li>
</ul>
</section>
<section>
<h3>Create a Local Repository</h3>
<p>1. Go to your home directory</p>
<pre><code class ="command-line">
$ cd
OR
$ cd Users/username
</code></pre>
<p>2. Create a new "working directory" and <span class="green">cd</span> into it</p>
<pre><code class ="command-line">
$ mkdir my-repo
$ cd my-repo
</code></pre>
<p>3. Initialize it as a local Git repository</p>
<pre><code class ="bash">
# make sure you are in the right directory!
$ pwd
$ git init
$ git status
</code></pre>
</section>
<section>
<h3>Add files</h3>
<p>1. Create a new file in your new folder named <span class="green">kitten.txt</span></p>
<pre><code class ="command-line">
$ touch kitten.txt
</code></pre>
<p>2. Check the status of your repo with <span class="green">git status</span></p>
<pre><code class ="command-line">
$ git status
</code></pre>
<p>3. Tell Git to track our new file with <span class="green">git add</span></p>
<pre><code class ="command-line">
$ git add kitten.txt
$ git status
</code></pre>
<p><span class="blue">Success!</span> The file you just added is now tracked by Git</p>
</section>
<section>
<h3>Changes and commits</h3>
<p>1. Open <span class="green ">kitten.txt</span>, add some text, and save it</p>
<pre><code class ="command-line">
$ git status
</code></pre>
<p>2. Stage the change and check the status</p>
<pre><code class ="command-line">
$ git add kitten.txt
$ git status
</code></pre>
<p>3. Commit the change with a good commit message that explains and describes what you did </p>
<pre><code class ="command-line">
$ git commit -m "First commit. Added kitten.txt to repository."
</code></pre>
</section>
</section>
<!-- Explanation-->
<section>
<section>
<h3>Whoa.</h3>
<h3>What did we just do??</h3>
<div class="fragment"><h5>How is all this different from just saving a file?</h5></div>
<ul>
<li class="fragment">When we <span class ="green">add</span> a new file, we tell Git to add the file to the repository to be tracked. </li>
<li class="fragment">This is also called <span class ="green">staging</span> a file. A snapshot of our changes is now in the <span class ="green">staging area</span> (aka the <span class ="green">index</span>, aka the <span class ="green">cache</span>), ready to be saved.</li>
<li class="fragment">A <span class ="green">commit</span> saves the <span class="blue">changes</span> made to a file, not the file as a whole. The commit will have a unique ID so we can track which changes were committed when and by whom.</li>
</ul>
</section>
<section>
<h3>Look at your progress</h3>
<pre><code class ="command-line">
$ git log
</code></pre>
<pre><code class ="command-line">
commit 6853adc0b6bc35f1a8ca0a6aa5e59c978148819b
Author: Your name <you@your-email.com>
Date: Tues May 23 16:01:22 2017 -0700
First commit. Added kitten.txt to repository.
</code></pre>
</section>
<section>
<h3>Congratulations. <br>You are now using Git.</h3>
<img src="images/Liz-Lemon-giving-herself-high-five.gif" alt="Give yourself a high five, like Liz Lemon." />
</section>
<section>
<h2>Now try...</h2>
<ul>
<li>Make changes to <span class="green">kitten.txt</span> and make some more commits.</li>
<li>Add another file (or image!) to your project and commit that.</li>
<li>Change more than one file at a time, and practice making commits where you stage only one file, or both files together.</li>
<li>Try the <a href="https://git-scm.com/docs/git-diff" style="font-family: monospace;">git diff</a> command when you have unstaged changed.</li>
<li>Look at your history with <span class="green"style="font-family: monospace;">git log</span> as you add more commits (and try adding the <span class="green"style="font-family: monospace;">--oneline</span> option) </li>
</ul>
<h4 style="margin-top: 30px;"> Don't forget to run <span class="green">git status</span> regularly so that you can see what is happening at each stage!</h4>
</section>
</section>
<!-- Git Structure -->
<section>
<section>
<h3>The Magical Realms of Git</h3>
<img src="images/git_index_structure.png" style="height:550px;"/>
</section>
<section>
<h3>The Workspace</h3>
<h4>Working Tree</h4>
<img src="images/git_index_structure.png" style="height:400px;"/>
<p>What you see in your editor and where you make your changes</p>
</section>
<section>
<h3>The Staging Area </h3>
<h4>Index / Cache</h4>
<img src="images/git_index_structure.png" style="height:400px;"/>
<p>A snapshot of your working tree at a particular point in development</p>
<p>lets you gather changes for the next commit</p>
</section>
<section>
<h3>Your Local Repo</h3>
<img src="images/git_index_structure.png" style="height:400px;"/>
<p>Your copy of a project, initialized as a git repository</p>
<p>(i.e., it has a <span class="green">.git</span> directory)</p>
</section>
<section>
<h3>The Remote Repo</h3>
<img src="images/git_index_structure.png" style="height:350px;"/>
<p>The shared copy of the repo that lives on a remote server</p>
<p>Very often this is GitHub, but it doesn't have to be.</p>
<p>Conventionally named <span class="green">origin</span> but doesn't have to be.</p>
</section>
</section>
<section>
<h3>It's all about the history</h3>
<img src="images/history.png" style="height: 550px; border: none;" />
</section>
<!-- Undoing changes -->
<section>
<section>
<h3>We all make mistakes</h3>
<img src="images/mistakes-were-made.jpg" alt="Those WERE the Droids I was looking for!"/>
<p class="fragment">Don't worry. Git is your friend.</p>
</section>
<section>
<h3>Undoing changes in your working copy</h3>
<p class="blue">If you haven't added/committed yet</p>
<div class = "fragment">
<p>Open <span class="green">kitten.txt</span> and make some changes or add something new. Then:</p>
<pre><code class ="command-line">
$ git checkout kitten.txt
</code></pre>
</div>
<p class="fragment">Look at <span class="green">kitten.txt</span> in your editor: your changes are gone (you've gone back to the previous commit state).</p>
</section>
<section>
<h3>Un-staging a file</h3>
<ol>
<li>In your text editor, create a new file, and name it <span class="green">possum.txt</span></li>
<li>Switch back to your terminal.</li>
</ol>
<pre><code class ="command-line">
$ git add possum.txt
$ git status
$ git reset possum.txt
$ git status
</code></pre>
<p class-"fragment">The file is removed from staging, but your working copy will be unchanged.</p>
</section>
<section>
<h3>Undoing changes you've already staged</h3>
<div class = "fragment">
<p>Open <span class="green">kitten.txt</span> in your editor and add some new text.</p>
<pre><code class ="command-line">
$ git add kitten.txt
$ git reset HEAD kitten.txt
$ git status # the file has been unstaged.
$ git checkout kitten.txt
# resets the working copy to its state at the last commit
</code></pre>
</div>
<p class="fragment">Now look at the same file in your editor again: your changes are gone, and the file is removed from staging. </p>
</section>
<section>
<h3>Er, what if I already committed it?</h3>
<h4>Undoing committed changes</h4>
<p>Git lets you go back to any previous commit.</p>
<div class = "fragment">
<p>Open <span class="green">kitten.txt</span> and add some new text</p>
<pre><code class ="command-line">
$ git add kitten.txt
$ git status
$ git commit -m "Make a change I will soon regret making"
$ git log --oneline
# you should see (at least) two commits here at this point
# copy the short form of the hash id
</code></pre>
</div>
</section>
<section>
<h3> Git Revert </h3>
<h4>Undoing committed changes</h4>
<pre><code class ="command-line">
$ git revert 53d23c4
# Your default editor will open here
# you can just save it and close it as is.
$ git log --oneline
</code></pre>
<p >Notice that the original, regrettable commit is still there, but now you also have <span class="green">another commit that undoes the changes</span> introduced by the original one.</p>
</section>
</section>
<!-- Branches-->
<section>
<section>
<h3>Branching</h3>
<img src="images/branches.jpg" alt="blue birds on branhces" />
<p >A branch is essentially another copy of your repo that will allow you to isolate changes and leave the original copy untouched. You can later choose to combine these changes in whole or part with the "master" copy, or not. </p>
</section>
<section>
<h3>Branching</h3>
<ul>
<li>Develop different code on the <span class="pink">same base</span></li>
<li>Conduct <span class="pink">experimental work</span> without affecting the work on master branch</li>
<li>Incorporate changes to your master branch <span class="pink">only if and when you are ready</span>...or discard them easily</li>
</ul>
<p class= "fragment green"> Branches are cheap!</p>
</section>
<section>
<h3>Branching</h3>
<p>Create a new branch called <span class="green">feature</span></p>
<pre><code class ="command-line">
$ git checkout -b feature
</code></pre>
<p>Add new lines to <span class="green">kitten.txt</span></p>
<pre><code class ="command-line">
$ git add kitten.txt
$ git commit -m "Adding changes to feature"
$ git log --oneline
</code></pre>
</section>
<section>
<h3>Branching</h3>
<h4>Switching branches</h4>
<p>See all your local branches. Your active branch, the one you're "on," is marked with an * </p>
<pre><code class ="command-line">
$ git branch
</code></pre>
<p>Switch to master branch and look at the commit history</p>
<pre><code class ="command-line">
$ git checkout master
$ git log --oneline
</code></pre>
<p>Switch to feature branch and look at the commit history</p>
<pre><code class ="command-line">
$ git checkout feature
$ git log --oneline
</code></pre>
</section>
</section>
<!-- Merging-->
<section>
<section>
<h3>Merging</h3>
<h4>Merge to get changes from one branch into another</h4>
<p>Switch to master and merge changes</p>
<pre><code class ="command-line">
$ git checkout master
$ git merge feature
$ git log --oneline
</code></pre>
</section>
<section>
<h3>What could possibly go wrong?</h3>
<img src="images/merge_conflicts_are_coming.jpg"/>
</section>
<section>
<h3>What is a merge conflict?</h3>
<img src="images/merge-conflict.png"/>
</section>
<section>
<h3>what a merge conflict looks like</h3>
<p>You will see this in the affected file your text editor</p>
<pre><code>
Here are lines that are either unchanged from the common ancestor,
or cleanly resolved because only one side changed.
<<<<<<< yours:sample.txt
Your changes are reflected here in this section.
=======
Their changes are here in this section, in conflict with yours.
>>>>>>> theirs:sample.txt
And here is another line that is cleanly resolved or unmodified.
</code></pre>
</section>
<section>
<h3>Merging</h3>
<h4>Merge conflicts</h4>
<p>Change the first line in <span class="green">kitten.txt</span> in <span class="pink">master</span> branch</p>
<pre><code class ="command-line">
$ git add kitten.txt
$ git commit -m "Changing kitten in master"
</code></pre>
<p>Now change the first line in <span class="green">kitten.txt</span> in <span class="pink">feature</span> branch</p>
<pre><code class ="command-line">
$ git checkout feature
# open kitten.txt and change the first line
$ git add kitten.txt
$ git commit -m "Changing kitten in feature"
</code></pre>
</section>
<section>
<h3>Merging</h3>
<h4>Merge conflicts, cont.</h4>
<p>Merge the changes from <span class="pink">master</span> into the <span class="pink">feature</span> branch</p>
<pre><code class ="command-line">
$ git merge master #remember, you are on the feature branch here
</code></pre>
<p class ="fragment">You will be notified of a conflict. Go to the file in your editor and fix the problem. Then add and commit your edits.</p>
</section>
</section>
<!-- Begin Class Two -->
<section>
<h3>The big picture</h3>
<img src="images/basic-remote-workflow.png" style="height:550px;"/>
</section>
<!-- GitHub-->
<section>
<section>
<h3><a href = "http://www.github.com" alt="GitHub homepage">Share Your Code on GitHub</a></h3>
<img src="images/github.jpg" alt="github is social coding" style="height: 500px;"/>
</section>
<section>
<h3>Git + Friends = GitHub</h3>
<p>GitHub has over <span class="green">20 million users</span>, <br>and over <span class="green">57 million repositories</span></p>
</section>
<section>
<h3>What is GitHub for?</h3>
<ul>
<li class = "fragment">GitHub allows users to <span class = "green">host Git repositories</span> publicly and privately</li>
<li class ="fragment"><span class ="green">Open source projects</span> host or mirror their repositories on GitHub</li>
<li class ="fragment"><span class ="green">Push your own code up</span> for others to use or contribute to</li>
<li class ="fragment">Read, copy, and <span class ="green">learn</span> from the code in other people's repositories</li>
<li class="fragment"><span class="green">Contribute to open source projects</span> (like the <a href="https://github.com/girldevelopit/gdi-new-site"> Girl Develop It website</a>!)</li>
</ul>
</section>
</section>
<!-- New repository-->
<section>
<section>
<h3>GitHub</h3>
<h4>Create your first remote repository</h4>
<p>You will need to be logged into your GitHub account to do this.</p>
<img src = "images/repo-create.png" alt ="image from GitHub help pages"/>
</section>
<section>
<h3>GitHub</h3>
<h4><a href="https://help.github.com/articles/create-a-repo/">Create your first repository</a></h4>
<img src = "images/bootcamp_2_repoinfo.png" alt ="How to create a new repository. Image from https://help.github.com/articles/create-a-repo"/>
</section>
<section>
<h3>GitHub</h3>
<h4>Set up remote repo to sync with your local repo</h4>
<p> After you click the big green button to create your repo, follow GitHub's instructions for next steps. </p>
<pre><code class ="command-line">
$ git remote add origin https://github.com/YOUR-GITHUB-USERNAME/REPO.git
$ git push -u origin master
# that -u is an option that signals that you are setting
# a tracking reference to the remote branch as the default;
# you only need to use this flag the first time
</code></pre>
<p class ="fragment">Now check out your GitHub repo online!</p>
</section>
</section>
<!-- Fork a repository-->
<section>
<section>
<h3>What can I do with a GitHub Account?</h3>
<p>
<p> <a href="https://help.github.com/articles/fork-a-repo/">FORK</a> a repo: Find some code you want to use and grab a copy of it. </p>
<p> (Then you'll also need to <a href="http://git-scm.com/docs/git-clone">CLONE</a> the repo — that is, make your own local copy of it)</p>
<p> <a href="https://help.github.com/articles/pushing-to-a-remote/" >PUSH</a> to a remote repo you own: post some code you want others to see.</p>
<p> submit a <a href="https://help.github.com/articles/creating-a-pull-request/" >PULL REQUEST</a> to the owner of a repo you'd like to contribute to. </p>
</section>
<section>
<h3>Forking</h3>
<p>This</p> <img src="images/fork-in-the-road.jpg" style="border: 0;" />
<p>not this</p>
<img src="images/fork.jpg" style="height:200px; border: 0;" />
</section>
<section>
<h3><a href="https://help.github.com/articles/fork-a-repo/">Forking</a></h3>
<p>If you want to <span class = "green">use</span> or <span class = "green">contribute</span> to a repository, you can fork it. </p>
<p>A fork is just a copy of a repository, saved to GitHub.</p>
<a href="https://github.com/amygori/tiny-repo"> Let's practice forking! </a>
<img src = "images/fork_button.jpg" alt ="How to fork a repository. Image from https://help.github.com/articles/fork-a-repo/"/>
</section>
<section>
<h3>Cloning</h3>
<p>To get a local copy of the fork you just made, use the <span class="green">git clone</span> command.</p>
<pre><code class ="command-line">
$ cd ../
$ git clone https://github.com/your-github-username/tiny-repo.git
$ cd tiny-repo
$ git remote -v
</code></pre>
</section>
<section>
<h3>Wait...what?</h3>
<div class = "fragment">
There are now THREE copies of this repo that you have access to.
</div>
<img src="images/three_kittens.jpg" class="fragment">
<br>
<div class = "fragment">
the original (on Github) => <span class="green">upstream</span>
</div>
<div class = "fragment">
your fork (on GitHub) => <span class="green">origin</span>
</div>
<div class = "fragment">
your clone => <span class="green">your local repo</span>, just like you're used to
</div>
</section>
<section>
<h3>Establishing a connection to an upstream repo </h3>
<p>To sync your fork with the original repo, you need to add another remote named upstream</p>
<pre style="width: 100%;"><code>
$ git remote -v
$ git remote add upstream https://github.com/amygori/tiny-repo.git
$ git fetch upstream
</code></pre>
Downloads git references not present in your local repository, but does not modify your files (think of it like getting a table of contents rather than the contents themselves)
</section>
<section>
<h3>Shared Repos</h3>
<p>If team members are contributing to a single repo, each member of the team will want to make sure that she has everyone else's changes before pushing her own changes to the GitHub repo.</p>
<div class="fragment">
<h4 class="green">Always pull before you push!</h4>
</div>
</section>
<section>
<h3>Pulling</h3>
Commit local changes first
<pre><code class ="command-line">
$ git commit -m "My latest commit"
</code></pre>
Get changes that have been pushed to the remote repo
<pre><code class ="command-line">
$ git pull origin master
</code></pre>
Git may prompt you to fix any conflicts, then commit
<pre><code class ="command-line">
$ git commit -m "Fixing merging conflicts"
</code></pre>
Now you are ready to push local changes to GitHub
<pre><code class ="command-line">
$ git push origin master
</code></pre>
</section>
</section>
<!-- Pull requests-->
<section>
<section>
<h3><a href="https://help.github.com/articles/creating-a-pull-request/">Pull Requests</a></h3>
<ul>
<li class = "fragment">After you fork and clone a repository all pushed changes will go to your fork.</li>
<li class = "fragment">These changes will not affect the original [upstream] repository!</li>
<li class = "fragment">If you would like your changes to be incorporated into the original repo, you can submit a pull request.
<li class = "fragment">A <span class="green">pull request</span> is a GitHub feature that lets you ask the owner of the upstream repo to pull your changes in (since you don't have permission to push)</li>
</ul>
</section>
<section>
<h3>Starting a pull request</h3>
<p>You need to do this on GitHub, not from the command line.</p>
<img src = "images/click-pull-request.png" alt ="How to initiate a pull request. Image from https://help.github.com/articles/using-pull-requests"/>
</section>
<section>
<h3>Previewing and sending pull request</h3>
<img src = "images/pull-request.png" alt ="How to preview and send a pull request. Image from https://help.github.com/articles/using-pull-requests"/>
</section>
<section>
<h3>Managing pull requests</h3>
<p>If you are the owner of repo, you will review and decide whether to merge in the pull requests you receive.</p><br>
<p>You can learn more from the <br><a href = "https://help.github.com/categories/collaborating/" target ="_blank" alt = "Links to information on GitHub about pull requests and collaboration">Github Collaborating Tutorials.</a> </p>
</section>
</section>
<section>
<section>
<h3>Git Learning Resources</h3>
<ul>
<li><a href="https://try.github.io">Try Git</a> from CodeSchool.com</li>
<li><a href="http://git-scm.com/doc">The Official Docs</a></li>
<li><a href="http://ndpsoftware.com/git-cheatsheet.html">Git Cheatsheet</a>: There are lots of cheatsheets out there, but this one is a visual illustration of git structure and commands.</li>
<li><a href="http://gitimmersion.com/">Git Immersion</a>: a great in-depth tutorial with hands-on exercises.</li>
<li><a href="http://git-scm.com/book/en/v2">Pro Git</a>: a very thorough reference. If Git can do it, you'll find it here.</li>
<li><a href="https://www.atlassian.com/git/tutorials">Atlassian's Git Tutorials</a>: from the creator of (among other things) <a href="https://www.atlassian.com/software/sourcetree/overview">SourceTree</a>, a free visual git tool for Mac & Windows.</li>
<li><a href="https://www.atlassian.com/git/tutorials/comparing-workflows/#!workflow-gitflow">Git Workflows</a>: an overview of different ways that teams can use git.</li>
</ul>
</section>
</section>
<!-- -->
<section>
<h2>Questions?</h2>
<img src = "images/git_hamster.jpg" alt ="Git Push Origin Hamster"/>
</section>
</div>
<footer>
<div class="copyright">
Intro to Git and Github ~ Girl Develop It ~
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div>
</footer>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>