forked from paschalitooo/github-workshop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
342 lines (275 loc) · 14 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
<!DOCTYPE html>
<html>
<head>
<title>Git & GitHub workshop</title>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/reveal.js/css/reveal.css">
<link rel="stylesheet" href="css/theme/lofman.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="bower_components/reveal.js/lib/css/zenburn.css">
</head>
<body>
<main class="reveal">
<article class="slides">
<section data-state="section-title">
<h1>Git & GitHub</h1>
</section>
<section>
<section>
<p>Get the slides at<br/><a href="https://hackfsu.com/links">hackfsu.com/links/</a></p>
</section>
<section>
<p><b>This is a basement slide.</b></p>
<p>You can find all kinds of goodies in the basement slides!</p>
</section>
</section>
<section>
<section>
<h2>Scope</h2>
<ul>
<li>up and running with <code>git</code></li>
<li><code>git</code> as a standalone user</li>
<li><code>git</code> as a participant</li>
</ul>
</section>
<section>
<h2>Command Syntax</h2>
<p><code>command</code> <code class="fragment">subcommand</code> <code class="fragment">-o</code> <code class="fragment">--option</code></p>
</section>
<section>
<h2>Navigating the file system</h2>
<ul>
<li><code>cd</code> - change directory</li>
<li><code>ls</code> - list files & directories</li>
<li><code>mkdir</code> - make directory</li>
</ul>
</section>
<section>
<h2>Notation</h2>
<p>You will often see things like <code>[something]</code> in this talk; this is a placeholder for some value that you have to define or provide.</p>
</section>
</section>
<section><h2>What is <code>git</code>?</h2></section>
<section data-background-image="img/bad-VC.png" data-background-size="100vw"></section>
<section data-state="section-title"><h1>Up and Running</h1></section>
<section>
<section>
<h1>Installation</h1>
<p><a target="external" href="https://git-scm.com/download/win">git-scm.com/download/<b>win</b></a></p>
<p><a target="external" href="https://git-scm.com/download/mac">git-scm.com/download/<b>mac</b></a></p>
<p><a target="external" href="https://git-scm.com/download/linux">git-scm.com/download/<b>linux</b></a></p>
<p class="fragment fade-up"><small><i>Linux usually comes with <code>git</code> installed</i></small></p>
</section>
<section>
<h1>Linux</h1>
<small><h2>(Ubuntu/Debian)</h2></small>
<img alt="`sudo apt-get install git`" src="img/gif/linux-install-git.gif"/>
</section>
</section>
<section>
<section>
<h1>Getting Help</h1>
<p><small><code>git help</code> or documentation at <a target="external" href="https://git-scm.com/doc">git-scm.com/doc</a></small></p>
<img alt="git help" src="img/gif/git-help.gif"/>
</section>
<section>
<p>You can get help for individual commands with<br/><code>git help [command]</code></p>
<img alt="git help status" src="img/gif/git-help-status.gif"/>
</section>
<section>
<p>Git also has an extensive manual with<br/><code>man git</code></p>
<img alt="man git" src="img/gif/man-git.gif"/>
</section>
</section>
<section>
<section>
<h1>Configuration</h1>
<p><small><code>git</code> needs to know who you are.</small></p>
<img alt="git config --global user.name [name] && git config --global user.email [email]" src="img/gif/git-config-user.gif"/>
</section>
<section>
<h2>Why does <code>git</code> need my name?</h2>
<p>Git associates every change with a name and email so you can tell who changed what.</p>
</section>
</section>
<section id="standalone" data-state="section-title"><h1>Using <code>git</code> as a standalone developer</h1></section>
<section>
<h1>A mental model for staging</h1>
<p>You don't want to make a commitment until everything is ready.</p>
</section>
<section>
<h2>The <code>git commit</code> workflow</h2>
<ul>
<li>Each commit is a patch</li>
<li>You must prepare a commit before finalizing it</li>
<li>Each commit is a unit of work, put related changes together.</li>
</ul>
</section>
<section>
<p>A git repository is a directory on your computer.</p>
<img alt="git init" src="img/gif/git-init.gif"/>
<p><small>Your <b><code>.git</code></b> folder holds the internals of git.</small></p>
</section>
<section>
<section>
<p><code>git status</code> shows the status of your repository.</p>
<img alt="git status" src="img/gif/git-status-hello-world.gif"/>
</section>
<section>
<p><code>git status</code> gives suggestions about what to do next.</p>
<img alt="git status suggestions" src="img/gif/git-st-suggestions.gif"/>
</section>
</section>
<section>
<p><code>git diff</code> shows untracted changes inside your files</p>
<img alt="git diff" src="img/gif/git-diff.gif"/>
</section>
<section>
<section>
<p><code>git add</code> stages changes</p>
<img alt="git add" src="img/gif/git-add.gif"/>
<p><small>Stage relevant changes together</small></p>
</section>
<section>
<p><code>git add -p</code> let's you add parts of a file.</p>
<img alt="git add -p" src="img/gif/git-add-p.gif"/>
</section>
</section>
<section>
<p><code>git reset HEAD -- </code> unstages changes</p>
<img alt="git reset HEAD --" src="img/gif/git-reset-HEAD.gif"/>
</section>
<section>
<p><code>git commit</code> adds a change to the history</p>
<img alt="git commit" src="img/gif/git-commit.gif"/>
<p><small>Apply all of your staged changes. <code>esc :x</code> leaves the editor.</small></p>
</section>
<section>
<p><code>git commit</code> takes a message that describes the patch. Writing a good message is <i>key</i>:</p>
<small class="fragment" data-fragment="1">
<ul>
<li>Write in present imperative, for example:</li>
<ul>
<li><code>Add README.md to describe project</code></li>
<li><code>Implement improved error handling, fixes #13</code></li>
</ul>
<li class="fragment" data-fragment="2">Think of commit messages like emails</li>
<li class="fragment" data-fragment="2">Describe not just what, but why</li>
</ul>
</small>
</section>
<section>
<p><code>git log</code> shows your past changes.</p>
<img alt="git log" src="img/gif/git-log.gif"/>
</section>
<section>
<p><code>git revert</code> undoes changes</p>
<img alt="git revert" src="img/gif/git-revert.gif"/>
</section>
<section id="participant" data-state="section-title">
<h1>Using <code>git</code> as a participant</h1>
</section>
<section>
<h2><code>git</code> is distrubuted version control.</h2>
<p>Different participants in a project can share changes between each-other</p>
</section>
<section>
<p><code>git branch</code> lets you work on changes in isolation</p>
<img alt="git branch" src="img/gif/git-branch.gif"/>
<p>One feature to rule them all!</p>
</section>
<section>
<section>
<h2>A mental model for branches</h2>
<p>Like a branch on a family tree.</p>
</section>
<section>
<p><b>NOTE</b>: checking out a branch changes the files in your repository.</p>
<p><code>git stash</code> let's you save changes for later</p>
<img alt="git stash" src="img/gif/git-stash-save.gif"/>
</section>
<section>
<p>To bring changes back from your stash: <code>git stash apply</code></p>
<img alt="git stash apply" src="img/gif/git-stash-apply.gif"/>
</section>
</section>
<section>
<h1>Manipulating Branches</h1>
</section>
<section>
<h2>How do I get changes from one branch to another?</h2>
<ul class="fragment">
<li><code>git merge</code></li>
<li><code>git rebase</code></li>
</ul>
</section>
<section data-state="subsection-title"><h2>Merging</h2></section>
<section><p>Integrate changes</p></section>
<section data-background-image="img/png/a-commit.png" data-background-size="100vw"></section>
<section data-background-image="img/png/a-branch.png" data-background-size="100vw"></section>
<section data-background-image="img/png/another-commit.png" data-background-size="100vw"></section>
<section data-background-image="img/png/a-merge.png" data-background-size="100vw"></section>
<section><p>Sometimes git can fast-forward</p></section>
<section data-background-image="img/png/pre-fast-forward.png" data-background-size="100vw"></section>
<section data-background-image="img/png/fast-forward.png" data-background-size="100vw"></section>
<section id="git-merge">
<p><code>git merge</code> incorporates changes another branch</p>
<img/>
</section>
<section>
<h2>Merge Conflicts</h2>
<p>Scary at first, but utlimately simple.</p>
</section>
<section>
<p>Sometimes we want to automatically favor our changes or their changes.</p>
<p>Saves time going through code.</p>
</section>
<section>
<p><code>git merge -Xtheirs</code> will favor their changes</p>
</section>
<section>
<p><code>git merge -Xours</code> will favor our changes</p>
</section>
<section data-state="subsection-title"><h2>Rebase</h2></section>
<section><p>Transplant branches of a tree</p></section>
<section data-background-image="img/png/pre-rebase.png" data-background-size="100vw"></section>
<section data-background-image="img/png/post-rebase.png" data-background-size="100vw"></section>
<section id="git-rebase">
<p><code>git rebase <branch></code> transplants the current branch onto <code><branch></code></p>
<img alt="git rebse" src="img/gif/git-rebase.gif"/>
</section>
<section>
<p><code>git rebase</code> rewinds your changes and adds them somwhere else.</p>
<p>This may remove files you've added until you finish the rebase.</p>
<p>Sometimes rebase will run into conflicts just like merge, and you have to fix them one commit at a time.</p>
</section>
<section>
<p><code>git rebase --abort</code> will stop a rebase in progress</p>
</section>
<section>
<p><code>git rebase -Xtheirs</code> will automatically favor our changes</p>
</section>
<section>
<p><code>git rebase -Xours</code> will automatically favor their changes</p>
</section>
<section>
<p><b>Note:</b> this is the opposite behavior compared to <code>git merge -X</code></p>
</section>
<section data-state="subsection-title">
<h2>Now to the GitHub part!</h2>
</section>
<section>
<h2>Let's get interactive!</h2>
<p><small>Sign up at <a href="https://github.com/join">GitHub.com/join</a></small></p>
</section>
<section id="feedback"><h1><a href="https://github.com/glfmn/github-workshop/issues/3">Feedback!!!!</a></h1></section>
</article>
</main>
<script src="bower_components/reveal.js/lib/js/head.min.js"></script>
<script src="bower_components/reveal.js/js/reveal.js"></script>
<script>
Reveal.initialize()
Reveal.configure({ slideNumber: 'h.v' });
</script>
</body>
</html>