-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·438 lines (367 loc) · 17.2 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Intro to Git | Women Who Code DC</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/solarized.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[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">
<section>
<img src="img/wwcodedc.jpg" width="25%" />
<h1>Intro to Git and Github</h1>
<code>http://nupurkapoor.github.io/intro-to-git</code>
</section>
<section>
<section>
<h2>What on earth is git?</h2>
<p>
<ul>
<li>Version control</li>
<li>Backing up code</li>
<li>Code sharing</li>
</ul>
</p>
</section>
<section>
<h2>So what is "version control"?</h2>
<img src="img/computer-throw.gif" width="200%" height="200%" alt="Fuck computers">
</section>
<section>
<h2>"Version Control"</h2>
<ul>
<li>Manage changes to a project without overwriting any part of that project</li>
<li>History of your changes</li>
<li>Give a little message about changes on save</li>
<li>Go back in history</li>
<li>Multiple versions of code with <code>branches</code></li>
</ul>
</section>
</section>
<section>
<section>
<h2>Backing up code</h2>
<ul>
<li>'Remote repositories'</li>
<li><code>push</code>-ing, <code> pull</code>-ing</li>
<li>Dropbox for code</li>
</ul>
</section>
<section>
<ul>
<li>Git is like Dropbox except that with git, you're backing up the <em>history</em> of your files too</li>
<li>We call each project a <em>repository</em> or a <em>repo</em></li>
<li>To get code from it and to put new code on it, we use the verbs <em>push</em> and <em>pull</em>.</li>
</ul>
</section>
</section>
<section>
<section>
<h2>Sharing Code</h2>
<ul>
<li>Code is better with friends!</li>
<li>Work remotely with a team</li>
</ul>
<img src="img/babies.gif" width="200%" height="200%" alt="Fuck computers">
</section>
</section>
<section>
<h2>Recap on why you should use git</h2>
<ul>
<li>Save yourself from losing code</li>
<li>Back up your code because it's smart</li>
<li>Work with other devs because code is more fun with friends</li>
</ul>
</section>
<section>
<section>
<h2>So what is Github, then?</h2>
<ul>
<li>Github: <font color="blue">https://github.com/</font></li>
<li>Website where you can backup your code (like Dropbox)</li>
<li>See other people's code (open-source)</li>
<li>Manage your code (repositories)</li>
<li>Work with other devs to make stuff (<code>pull requests</code>)</li>
</ul>
</section>
<section>
<h3>How do git and github talk to each other?</h3>
<ul>
<li><b>Command Line: </b>The computer program we use to input Git commands. <b>Terminal</b> for MAC and <b>git bash</b> for Windows</li>
<li><b>GUI Tools: </b> <font color="blue">https://windows.github.com/</font> OR <font color="blue">https://mac.github.com/</font></li>
</ul>
</section>
<section>
<h2>Common terminology</h2>
<ul>
<li><b>Repository: </b>A directory or storage space where your projects can live. Shorten to 'repo'. You can keep code files, text files, image files inside a repository.</li>
<li><b>Commit: </b> This is the command that gives Git its power. When you commit, you are taking a “snapshot” of your repository at that point in time, giving you a checkpoint to which you can reevaluate or restore your project to any previous state.</li>
<li><b>Branch: </b> In multiple-user project scenerios, users “branch off” of the main project with their own versions with changes they themselves have made. After they’re done, it’s time to “merge” that branch back with the “master,” the main directory of the project.</li>
</ul>
</section>
</section>
<section>
<section>
<h2>So, let's try it.</h2>
<li>If you don't already have one, create an account on Github</li>
<li>Navigate to <font color="blue">https://github.com/join</font></li>
<li>Fill out the form</li>
<li>Password requires a minimum of 7 characters and needs at least one number</li>
<li>After form submission, chose the <b>Free</b> plan for now (default selection)</li>
<li>Congratulations!! You now have an account on <a href="https://github.com/">Github</a></li>
</section>
<section>
<h2>Create a new <b>repository</b></h2>
<img src="img/create-new.png" />
</section>
<section>
<img src="img/create-new-repo.png" width="200%" height="200%" />
</section>
<section>
<img src="img/sample-project.png" />
</section>
<section>
<img src="img/git-push-command.png" />
</section>
</section>
<section>
<h3>Setting up git on your local machine</h3>
<ul>
<li>GitHub won’t work on your local computer if you don’t install git.</li>
<li>Install Git for Windows, Mac or Linux as needed from <font color="blue">http://git-scm.com/downloads</font></li>
<li>Now it’s time to go over to the command line.</li>
</ul>
</section>
<section>
<section>
<h3>Guide to git for Windows machine</h3>
<ul>
<li>Go to <font color="blue">http://git-scm.com/downloads</font> and install the git for Windows package.</li>
<li>Along the way, you’ll be asked to choose how you want to use git.</li>
<li>Select the context menu with Git Bash and Git GUI. </li>
</ul>
</section>
<section>
<h3>Guide to git for Windows machine</h3>
<ul>
<li>Then you’ll get the following screen, chose the first option:</li>
</ul>
<img src="img/ms-git-usage-1.png" />
</section>
<section>
<h3>Guide to git for Windows machine</h3>
<ul>
<li>Also when asked in another dialog, choose to make git bash show up in the context menu when you right click a windows folder.</li>
<li>What is “git bash”? Turns out it’s just a command line interface!</li>
</ul>
</section>
</section>
<section>
<h3>How and WHERE to Run Git</h3>
<p>Git tracks files in a folder. Any kind of files in a folder and its subfolders. So you don’t need to have any particular directory structure or any particular file type for it to work.</p>
</section>
<section>
<section>
<h3>MAC only</h3>
<ul>
<li>Search for 'terminal' on your mac</li>
<li>Open application</li>
</ul>
<img src="img/terminal.png" />
</section>
<section>
<h3>MAC only</h3>
<p>Setup a dedicated place on your machine for your project</p>
<ul>
<li><code class="code-large"> <font color="#971F12">mkdir</font> code</code> <br /></li>
<li><code class="code-large"> <font color="#971F12">cd</font> code</code> <br /></li>
<li><code class="code-large"> <font color="#971F12">mkdir</font> sample-project</code> <br /></li>
<li><code class="code-large"> <font color="#971F12">cd</font> sample-project</code></li>
</ul>
</section>
</section>
<section>
<img src="img/prepare.gif" />
</section>
<section>
<section>
<h3>For Windows</h3>
<ul>
<li>Create a folder with similar directory structure as we discussed earlier</li>
<li>Now we need to run git inside the “sample-project” folder. </li>
<li>Navigate to the 'sample-project' folder</li>
<li>Right click on an empty space in the Window, and select “Git Bash”</li>
<li>This will open a command prompt that’s already in the folder you want. </li>
</ul>
</section>
<section>
<p>Git bash for windows</p>
<img src="img/git-bash.png" />
<img src="img/git-bash-screen.png" alt="not my screen">
</section>
</section>
<section>
<section>
<h3>Common git-specific commands</h3>
<ul>
<li><code class="code-large"><font color="#971F12"> git init</font></code><br /></li>
<li><code class="code-large"><font color="#971F12"> git config</font></code> <br /></li>
<li><code class="code-large"><font color="#971F12"> git help</font></code> <br /></li>
</ul>
</section>
<section>
<h3>Common git-specific commands</h3>
<ul>
<li><code class="code-large"><font color="#971F12"> git status</font></code></li>
<li><code class="code-large"><font color="#971F12"> git add</font></code></li>
<li><code class="code-large"><font color="#971F12"> git commit</font></code></li>
<li><code class="code-large"><font color="#971F12"> git checkout</font></code></li>
<li><code class="code-large"><font color="#971F12"> git push</font></code></li>
</ul>
</section>
</section>
<section>
<section>
<h3>Set up your project internally</h3>
<ul>
<li><code class="code-large"> <font color="#971F12">touch</font> README.md</code><br /></li>
<li><code class="code-large"> <font color="#971F12">git init</font></code> <br /></li>
<li><code class="code-large"> <font color="#971F12">git status</font></code> <br /></li>
</ul>
<img src="img/git-status.png">
</section>
<section>
<h3>Set up your project internally</h3>
<ul>
<li><code class="code-large"> <font color="#971F12">git status</font></code> <br /></li>
<li><code class="code-large"> <font color="#971F12">git add</font> README.md</code> <br /></li>
<li><code class="code-large"> <font color="#971F12">git commit -m</font> "Our first file"</code></li>
</ul>
</section>
</section>
<section>
<section>
<p>We now need to link the project/folder we set up on our machine with the repository we created on Github!</p>
</section>
<section>
<p>Remember this..??</p>
<img src="img/git-push-command.png" />
<p>Lets link them both! Copy, paste and run these two commands - one at a time!</p>
</section>
<section>
<ul>
<li>The command <code><font color="#971F12">git remote add origin [email protected]:username/name-of-repository.git</font></code> creates a new remote called origin located at [email protected]:username/name-of-repository.git</li>
<li>Once you do this, in your push commands, you can push to origin instead of typing out the whole URL!!</li>
</ul>
</section>
<section>
<ul>
<li>The <code><font color="#971F12">git push -u origin master</font></code> command says "push the commits in the local branch named master to the remote named origin".</li>
<li>Remember we just named our branch <b>origin</b> in previous step! So remotes are like nicknames for the URL of a repository.</li>
</ul>
</section>
<section>
<ul>
<li>The <font color="#971F12">.git</font> at the end of the repository name is just a convention.</li>
<li>On git servers repositories are kept in directories named project.git</li>
</ul>
</section>
</section>
<section>
<h2>And when you refresh github...</h2>
<img src="img/sample-project-repo.png" />
</section>
<section>
<section>
<h2>Let's make another file</h2>
<ul>
<li><code class="code-large"><font color="#971F12">touch</font> index.html</code> <br /></li>
<li><code class="code-large"><font color="#971F12">git add</font> --all</code> <em>Shorthand for 'add everything'</em> <br /></li>
<li><code class="code-large"><font color="#971F12">git commit -m</font> "Commit message"</code> <br /></li>
<li><code class="code-large"><font color="#971F12">git push -u origin master</font></code></li>
</ul>
</section>
<section>
<h2>And when you refresh github again...</h2>
<img src="img/pushed.png" />
</section>
</section>
<section>
<code class="code-inline"><b>git log</b></code>: <code class="code-large"><font color="#971F12">git log</font></code><br />
<p>Shows the commit logs</p>
<img src="img/git-log.png" />
</section>
<section>
<h2>Moving forward...</h2>
<img src="img/now_what_finding_nemo.gif" />
</section>
<section>
<h2>Resources</h2>
<p>
<a href="http://try.github.io">Try Git in your Browser</a> <br />
<a href="https://help.github.com/articles/create-a-repo">Create a Repo</a> <br />
<a href="https://help.github.com/categories/54/articles">Github Bootcamp</a> <br />
<a href="http://help.github.io">Github Help</a> <br />
</p>
</section>
<section>
<img src="img/thumbs-up.gif" />
<h3>@kapoornupur</h3>
<h3>@kgibilterra</h3>
<hr/>
<h3>@womenwhocodedc</h3>
<p><a href="http://nupurkapoor.github.io/intro-to-git">http://nupurkapoor.github.io/intro-to-git</a></p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.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,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>