-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
233 lines (232 loc) · 12.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GitHub for Cats</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="css/stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="banner" class="hidden-phone"><a href="https://github.com/remixz/github-for-cats" target="_blank">Fork me on GitHub</a></div>
<div class="container" id="top">
<div class="page-header">
<h1>
GitHub For Cats
<small>
Because cats just wanna have forks.
</small>
</h1>
</div>
<div class="contents">
<ul>
<li class="title"> Table of Contents </li>
<li> <a href="#introduction"> Introduction </a> </li>
<li> <a href="#running"> Getting Up and Running </a> </li>
<li> <a href="#social"> Getting Social </a> </li>
<li> <a href="#lay"> The Lay of the Land </a> </li>
<li> <a href="#issue"> An Issue </a> </li>
<li> <a href="#forks"> Forks For Cats </a> </li>
<li> <a href="#pull"> Pull Requests </a> </li>
<li> <a href="#create"> Creating a Repository </a> </li>
<li> <a href="#adding"> Adding to your Repository </a> </li>
<li> <a href="#editing"> Editing Files in your Repository </a> </li>
<li> <a href="#conclusion"> Conclusion </a> </li>
<li> <a href="#attributions"> Attributions </a> </li>
<li> <a href="#credits"> Credits </a> </li>
</ul>
</div>
<h3 id="introduction">
Introduction:
</h3>
<p>
If you're a cat, you probably haven't heard of GitHub. Maybe your human companion has, but they don't really know how to explain it to you. (Which, as a cat, is extremely frustrating.) GitHub is a website that allows content creators, whether it be via programming, blogging, or issue-reporting, to collaborate together and to learn from each other. It's powered by a "distributed version control system" called git. A "distributed version control system" sounds pretty complicated, but it really isn't. What it really means is that lets you, a cat, manage all of the stuff you have made (like maybe some <a href="http://jsforcats.com" target="_blank">JavaScript</a>?) in one place, and be able to go back in time to see what you did before. It also lets other cats (or maybe humans) see what you've done, and help you out with it. This guide will get you introduced to the world of GitHub through the adventures of <em>беда the Super-Cat</em>, also known as <a href="https://github.com/supercat9000" target="_blank">supercat9000</a>, and it might even help your poor, misinformed human companion as well!
</p>
<h3 id="running">
Getting Up and Running:
</h3>
<p>
<em>
You may stay laying down though, as you are a cat.
</em>
</p>
<p>
The best way to get started with GitHub is to create a GitHub account!
</p>
<p>
<img alt="Signup" src="img/github.png" />
</p>
<p>
That was easy. You're now logged into your GitHub account, where you can do anything!
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="social">
Getting Social:
</h3>
<p>
Before you tackle the code-y parts of GitHub, a great way to start is to find others' code. One way to find lots of cool projects is by checking out the <a href="https://github.com/explore" target="_blank">Explore</a> page. The projects featured here are all top-notch, so see what interests you! (Probably the shiniest ones.) You can also follow people, to see all of their activity. (Maybe you want to follow <a href="https://github.com/remixz" target="_blank">this sharp fellow?</a>) Finally, once you find a project you like, you can "star" it, which makes code-writers feel really awesome about themselves. It's that same feeling you might get when a new can of tuna is opened. Slightly less fishy-smelling, though.
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="lay">
The Lay of the Land:
</h3>
<p>
GitHub is split into a lot of pages. The first one we can look at is a repository. Let's look at <a href="https://github.com/supercat9000/supercatrepo" target="_blank">supercat9000's repo</a>.
</p>
<p>
<img alt="Repo" src="img/repository.png" />
</p>
<p>
You'll notice a lot at first. You can see there's one file, called fish.jpg. You'll see in the picture it says "remixz authored 2 minutes ago." I authored this for Super Cat, because even though she is a super-cat, she was too lazy to upload the fish. He did create an account though, which is a very super-cat like thing to do. I had to download the fish though, because Super Cat fell asleep. Because I am a nice human companion, I think I'm going to help improve his code. This, in essence, is what GitHub is all about!
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="issue">
An issue:
</h3>
<p>
The first thing I will do is create an issue. I think Super Cat needs a picture of a cat toy. So, I will click the <em>Issues</em> button at the top of the page, and choose the <em>New Issue</em> button.
</p>
<p>
<img alt="Issue" src="img/issue.png" />
</p>
<p>
As you can see, I've filled out an issue. I've added a title, to quickly show what this is about. I also filled out the text, and added an image, which I did by dragging and dropping it in. I finally added a label, to let Super Cat know this is an enhancement to his repository. I'll click <em>Submit new Issue</em>, and I've filed the first issue!
</p>
<p>
Another thing I want to do for him is make him a README. I can do this by creating a "fork" of his repository, and then submitting him a "pull request." Let's walk through that now.
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="forks">
Forks For Cats:
</h3>
<p>
Unlike a real fork, GitHub forks are much more cat friendly. A fork is essentially like copying a folder on your computer; you choose the folder, copy it, and paste it somewhere else. With a fork, you find the repository, press the <em>Fork</em> button on the repository, and...
</p>
<p>
<img alt="Forked" src="img/fork.png" />
</p>
<p>
My own fork (or copy) of Super Cat's repo! Now I can help him out. GitHub files can be edited in a variety of ways, but for ease of use, I'm going to use the built-in online file editor. To access this, click the document icon with the + symbol in it. You'll get a page that looks like this:
</p>
<p>
<img alt="File Editor" src="img/create-readme.png" />
</p>
<p>
Now that I've done that, I'll just press <em>Commit new file</em> at the bottom, and I've added a README file to my fork.
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="pullrequest">
Pull Requests:
</h3>
<p>
Though there is a shiny new README in my fork of the repository, Super Cat doesn't have it. Because this is Super Cat's repository, I want to give it back to him. So, I will open a pull request! A pull request lets you take code you've written in a forked repository, and send it back to the original. On my repository page, I will hit <em>Pull request</em>.
</p>
<p>
<img alt="Pull Request" src="img/pull-request.png" />
</p>
<p>
I've added a title and a description, which tells Super Cat what this pull request is. I will hit <em>Send pull request</em>, and now Super Cat can choose to merge it in!
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="create">
Creating a Repository:
</h3>
<p>
Now, this has been fine and dandy, working with other cats' work. However, you want to do your own stuff! Thankfully, you're reading this guide. Let's make a new repository. Press the <em>Create a new repo</em> button on the top of your browser, right next to your name. Enter any name and description you want, and make sure to check <em>Initialize this repository with a README</em>.
</p>
<p>
<img alt="New repo" src="img/create-repository.png" />
</p>
<p>
Well done! You now have your own repository. Now, let's add something to it.
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="adding">
Adding to your Repository:
</h3>
<p>
It turns out that along with being a super-cat, Super Cat is also a poet. Sort of. He can add his own poems to his new repository, caticalpoems. Press the new file button like you did with the fork earlier, and write up something:
</p>
<p>
<img alt="Great poetry" src="img/create-poem.png" />
</p>
<p>
We'll commit the file, and you now have a poem!
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="editing">
Editing Files in your Repository:
</h3>
<p>
It turns out Super Cat made a mistake. He didn't space his lines enough. Thankfully, with the power of GitHub, we can change that. Click on the file, and choose <em>Edit</em>. You now have the same editor again, so make your changes:
</p>
<p>
<img alt="Edit file" src="img/edit-poem.png" />
</p>
<p>
And now Super Cat has an awesome poem.
</p>
<p>
<img alt="Finished poem" src="img/final-poem.png" />
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="conclusion">
Conclusion:
</h3>
<p>
You now know the basics of GitHub! This is a very simple guide, as it is meant for you, a cat. GitHub, and git itself, can do a lot more. However, you now know a lot more than your neighborhood stray cat does. Feel good about that!
</p>
<p>
Feel free to try all of these demos on your own repositories, or on supercat9000's. I'm sure she'd appreciate any help she could get.
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="attributions">
Attributions:
</h3>
<ul>
<li>
беда the Super-Cat's photo is from <a href="https://github.com/maxogden">@maxogden's</a> <a href="https://github.com/maxogden/cats" target="_blank">cats</a> repository, as I am a dog owner. The real Super-Cat is <a href="https://twitter.com/selenamarie">@selenamarie's</a> cat!
</li>
<li>
This guide is based off of <a href="https://github.com/maxogden">@maxogden's</a> <a href="http://jsforcats.com" target="_blank">JavaScript for Cats</a>. Go Max!
</li>
<li>
If you work at GitHub, thanks for making such an awesome site.
</li>
</ul>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
<h3 id="credits">
Credits:
</h3>
<p>
This guide is written by Zachary Bruggeman. You can see his dapper site <a href="http://zachbruggeman.me" target="_blank">here</a>, with links to his Twitter, GitHub, and email. You can also make this guide way better on (of course) <a href="https://github.com/remixz/github-for-cats" target="_blank">GitHub.</a> Thank you for reading!
</p>
<div class="bttop">
<a href="#top">Back to top</a>
</div>
</div>
</body>
</html>