-
Notifications
You must be signed in to change notification settings - Fork 29
/
Copy pathindex.html
323 lines (237 loc) · 13.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
<!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 Git & GitHub</title>
<link rel="stylesheet" href="reveal/css/reveal.css">
<link rel="stylesheet" href="reveal/css/theme/simple.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="reveal/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 ) ? 'reveal/css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Introduction to <span style="color:#f05033;">Git</span></strong> & <span style="color:#79dbf2;">GitHub</span></h2><br/>
<p>Vicky Rampin</p>
<img src="imgs/dataservices.png" width="30%" height="30%" align="middle"><br/>
<div class='footer'>
<hr/>
<p>Vicky's ORCID: <a href="http://orcid.org/0000-0003-4298-168X/">0000-0003-4298-168X</a><br/>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>.</p>
</div>
</section>
<section>
<h2>1st Thing: Git != GitHub</h2>
<div style="float:left; width:45%">
<img src="imgs/git-logo.png" width="48%" height="48%">
<p><span style="color:#f05033;">Git</span> is a revision control system, a program to manage your source code history. It is strictly a command-line tool.</p>
</div>
<div style="float:right; width:45%">
<img src="imgs/github-logo.png" width="40%" height="40%">
<p><span style="color:#79dbf2;">GitHub</span> is a website where you can upload a copy of your Git repository. It allows people to collaborate via Git along with some other features.</p>
</div>
</section>
<section>
<h2>What is Version Control?</h2><br/>
<p>From <a href="https://en.wikipedia.org/wiki/Version_control">Wikipedia</a>: "the management of changes to documents, computer programs, large web sites, and other collections of information."</p>
<p>Basically, it's a way for us to compare, restore, and merge changes to our stuff.</p>
</section>
<section>
<h2>Why Version Control?</h2>
<p>To avoid this:</p>
<img src="imgs/final-doc.jpg" width="40%" height="40%" align="middle">
</section>
<section>
<h2>Where do we see version control?</h2>
<p>If you've collaborated via Google Docs, Sheets, or Slides, you have used version control!</p>
<img src="imgs/google-version.png" width="22%" height="22%" align="middle">
</section>
<section>
<h2>Basic Git Overview</h2>
<p>The purpose of Git is to manage a project, or a set of files, as it changes over time. Git stores this information in a data structure called a <span style="color:#f05033;">repository</span>.</p>
<p>A Git repository contains, among other things, the following:</p>
<ul>
<li>Snapshots of your files (text, images, whatever)</li>
<li>References to these snapshots, called heads</li>
</ul>
<p>The Git repository is a hidden sub-folder in your project folder, called .git. You probably won't have to touch this ever.</p>
</section>
<section>
<h2>Basic Git Overview: Branches</h2>
<p>Git works on branches, which represent independent lines of development, as each snapshot is linked to a 'parent' one it built upon. By default, everyone's repositories are on a "master" branch.</p>
<img src="imgs/git-branches.png" width="60%" height="60%">
<p>We won't go over this in class, but <a href="http://hades.github.io/2010/01/git-your-friend-not-foe-vol-2-branches/">this tutorial</a> (where the above img came from) and <a href="https://www.atlassian.com/git/tutorials/using-branches/">this tutorial</a> are really great.</p>
</section>
<section>
<h2>How Git Does Version Control</h2>
<p>There are 3 states that your objects can be in:</p>
<img src="imgs/git-stages.png" align="middle">
</section>
<section>
<h2>How Git Does Version Control</h2>
<p>When you <em> add </em> objects, you are telling Git that you made changes you want to track.</p>
<img src="imgs/git-stages1.png" align="middle">
</section>
<section>
<h2>How Git Does Version Control</h2>
<p>When you <em>commit</em> your changes, you tell Git that it is the latest version of your objects.</p>
<img src="imgs/git-stages2.png" align="middle">
</section>
<section>
<h2>Why GitHub?</h2>
<p>GitHub is an easy way to collaborate with others on shared Git repositories. GitHub will host it for us, and we can then sync our local copies with changes made and pushed to the shared one.</p>
<p>It's also the number one website for "social coding" and collaboration now...</p>
<ol>
<li>SO: does everyone have a GitHub account?</li>
<ul><li>If not, please go ahead and <a href="https://github.com/join?source=header-home">make one</a>.</li>
<li>If yes, please <a href="https://github.com/login?return_to=%2Fjoin%3Fsource%3Dheader-home">sign in</a>!</li></ul>
</ol>
</section>
<section>
<h2>We are going to start in GitHub, and then work locally on our own computers!</h2>
</section>
<section>
<h2>Creating a Repository</h2>
<p>When you are logged into <a href="https://github.com">github.com</a>, you should be able to see a + sign in the top right-hand corner.</p>
<img src="imgs/github-repo.png">
</section>
<section>
<h2>Creating a Repository</h2>
<p>Name your new repository <mark>hello-world</mark>, initialize it with a README, and hit "Create Repository":</p>
<img src="imgs/github-repo1.png" width="50%" height="50%">
</section>
<section>
<h2>Yay, you have an almost blank repo!</h2>
<img src="imgs/blank-repo.png" width="50%" height="50%">
</section>
<section>
<h2>Let's add some content in-browser</h2>
<p>Please click the pencil icon for your README -- let's add some better description here.</p>
<img src="imgs/edit-README.png" width="50%" height="50%">
</section>
<section>
<h2>What's a README?</h2>
<p>A README file broadly contains information about other files in a directory. It is usually in a plain text format, like markdown (.md) or text (.txt). It typically contains:</p>
<ul>
<li>TITLE/SUMMARY: What does your project do? How is it used?</li>
<li>AUTHORS: Credit the people working on the project :)</li>
<li>GETTING STARTED: installation & dependency instructions</li>
<li>LICENSE: copyright and licensing info</li>
<li>CONTRIBUTING: guide for people who might want to contribute to the project</li>
<li>THANKS: acknowledge those who made it possible!</li>
</ul>
</section>
<section>
<h2>Editing the README</h2>
<p>So add at least a sentence or two in your README file -- if you're not familiar with Markdown, it's basically a way to format plain text. Click the preview tab to see how your changes look before we commit to them:</p>
<img src="imgs/edit-README2.png" width="50%" height="50%">
</section>
<section>
<h2>Committing changes in-browser</h2>
<p>Remember how we looked at how git does version control? Since GitHub relies on git for a lot, we can see that you still need to commit changes even though we aren't in the terminal. Let's look at how we commit our changes in GitHub:</p>
<img src="imgs/commit-README.png" width="50%" height="50%">
</section>
<section>
<h2>Now we can see our changes and our commit history of 2!</h2>
<img src="imgs/updated-repo.png" width="50%" height="50%">
</section>
<section>
<h2>Collaborating via GitHub</h2>
<p>I'll note here that there are many ways to collaborate on GitHub, from contributing code to discussing things in issues!</p>
<p>There are two main ways to collaborate on code: asking for permission to the repository from the owner (or, if you're doing group work, having one repo for that!) or forking a repository to which you do not have permissions</p>
<p>Let's start with forking and pull requests, since many of us do not have permission to many repos out there!</p>
</section>
<section>
<h2>Forking & Pull Requests</h2>
<p>A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.</p>
<p>A pull request is when you want to integrate the changes you made into the original repository you forked. You describe the changes you made and make sure your changes don't conflict with the original repo's code.</p>
</section>
<section>
<h2>Intial Fork</h2>
<img src="imgs/github-fork.png">
<img src="imgs/github-fork1.png">
</section>
<section>
<h2>Creating your copy...</h2>
<img src="imgs/github-fork2.png">
</section>
<section>
<h2>Now you have a copy of their repo!</h2>
<img src="imgs/github-fork3.png">
</section>
<section>
<h2>Follow the Same Instructions</h2><br/>
<p>You can edit and commit files, everything the same, because it's now under your account!</p>
<p> When you want your changes to be integrated into the official repo, you make a pull request!</p>
</section>
<section>
<h2>Make a Pull Request</h2>
<img src="imgs/github-fork4.png">
</section>
<section>
<h2>Compare your PR to their Repo</h2>
<img src="imgs/github-fork5.png">
</section>
<section>
<h2>Describe Your Changes</h2>
<img src="imgs/github-fork6.png">
</section>
<section>
<h2>Submit the Pull Request!</h2>
<img src="imgs/github-fork7.png">
</section>
<section>
<h2>Now you try!</h2>
<p>Fork my repository: <a href="https://github.com/VickySteeves/hello-world">https://github.com/VickySteeves/hello-world</a></p>
<p>Make a change to my README file</p>
<p>Make a pull request and ask that I integrate your change into my repository!</p>
<p>I will wait until there are 5 pull requests on my repository before moving on.</p>
</section>
<section>
<h2>Collaborating with others on a central repo!</h2>
<p>Since the joy of GitHub comes from sharing, let's discover how to collaborate with those <strong>we give permission to</strong> on here.</p>
<ol>
<li>You and the person to your right are now partners. People on the ends, wrap around the right.</li>
<li>Decide who is "A" and who is "B".</li>
<li>You will be syncing changes ONLY to person A's repository. Don't do anything yet</li>
<li>Put up the blue sticky note when you are all set!</li>
</ol>
</section>
<section>
<h2>First Tasks:</h2>
<p>Person A: add person B as your collaborator on GitHub using their GitHub name or email address:</p>
<img src="imgs/github-collab.png">
</section>
<section>
<h1>BREAK</h1><br/>
<h2>Take 5 minutes to stretch and then we'll start with <a href="git.html">Git</a> locally!</h2>
</section>
</div>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'reveal/plugin/markdown/marked.js' },
{ src: 'reveal/plugin/markdown/markdown.js' },
{ src: 'reveal/plugin/notes/notes.js', async: true },
{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>