-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
414 lines (411 loc) · 16.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
<html>
<head>
<title>黒い画面とかよくわからない人のための、ゆるふわgit入門</title>
<meta charset="Shift_JIS" />
</head>
<body>
<style>
*{margin:0;padding:0}
@font-face {
font-family: "Tenjin";
src: url("font/Tenjin.otf");
}
body{font-size:14px;color:#333;margin:40px 20px 20px;background:#efefef url(img/back.gif) 50% -15px no-repeat;}
h1{font-size:50%;margin-bottom:2em;}
h1{_font-size:300%;}
h1:before{display:block;font-family: "Tenjin", serif;content:"Git Tutorial For Designers";font-size:1000%;margin-right:30px;line-height:0.7;margin-bottom:0.2em;}
.box05{font-family: "Tenjin", serif;font-size:200%;margin-bottom:2em;}
.box05 span{_display:none;}
h2{font-size:150%;margin-bottom:0.3em;position:relative;padding-bottom:5px;}
h2:before{display:block;content:"";height:1px;width:100%;position:absolute;bottom:0;background:#efefef url(img/back.gif) 50% -15px no-repeat;}
h3{font-size:125%;margin-bottom:0.2em;}
p,ol,ul{margin-bottom:0.5em;line-height:1.6;}
img{width:500px;border:2px solid #ccc;}
ol{list-style:decimal;list-style-position:inside;margin-left:1.5em;}
ul{list-style:disc;list-style-position:inside;margin-left:1.5em;}
.box{background:#fff;margin-bottom:4em;border:1px solid #ccc;padding:20px;border-radius:10px;}
.box01{background:#efefef;padding:20px;margin-bottom:2em;font-size:125%;border-radius:5px;}
.box01 li{margin-bottom:2em;}
.box03 li{margin-bottom:0.5em;}
.box04{margin-bottom:2em;}
</style>
<h1>黒い画面とかよくわからない人のための、ゆるふわgit入門</h1>
<p class="box05">by SHOKO OYAMADA (<a href="http://twitter.com/chocolatina" target="_blank">chocolatina</a>) @ paperboy&co.<span>{</span></p>
<div class="box">
<h2>この資料の対象</h2>
<ul>
<li>Subversionを使ったことがある人</li>
<li>Gitとかよくわからない人</li>
<li>でもgithubのアカウントは持ってる人</li>
<li>Windowsユーザーのデザイナー</li>
</ul>
</div>
<div class="box">
<h2>gitとは？</h2>
<p>SVNのようなバージョン管理システムのいまどきのやつ<br />
使えるとモテるらしい。けどモテた覚えがない。<br />
SVNとはリポジトリの持ち方などがちょっと違う<br />
別にプログラムじゃなくてもいろんな更新履歴を管理してよい。</p>
</div>
<div class="box">
<h2>バージョン管理とは？</h2>
<p>更新履歴や差分が混乱しないように、<br />
みんなが仲良く開発できるように使っている機能。<br />
※でも実際は混乱したりもしますね。</p>
</div>
<div class="box">
<h2>リポジトリとは？</h2>
<p>更新履歴をためておく場所です。<br />
gitでは、リポジトリには2種類あります。<br />
「自分の作業用リポジトリ」と<br />
「公開用リポジトリ」です。</p>
<p>今日は、<br />
hetemlサーバ＝自分の作業用リポジトリ<br />
github＝公開用リポジトリ<br />
として話をします。</p>
</div>
<div class="box">
<h2>githubとは？</h2>
<p>gitで管理した更新履歴を置いておく場所。<br />
完成したものを見せるんじゃなく、<br />
開発途中の履歴を見せる。<br />
普段見えない裏側のソースコードも見える。<br />
履歴をちょこちょこ送れるので、開発してる！感が出せるのでエンジニアに人気。<br />
人のソースコードに手を入れて送ったりもできるらしい。<br />
別にプログラムじゃなくてもいろんな更新履歴を管理してよい。<br />
でも交換日記とかを管理するのはやめましょう。</p>
</div>
<div class="box">
<h2>今日の目標？</h2>
<p>hetemlに置いたサイトを<br />
gitでバージョン管理して<br />
githubにpushして<br />
モテよう<br />
※モテるかどうかは分からない</p>
<p><img src="img/img01.gif" alt="" /></p>
</div>
<div class="box">
<h2>流れ</h2>
<ol class="box04">
<li><a href="#flow00">必要なものを用意</a></li>
<li><a href="#flow01">hetemlでSSHを設定し、Poderosaでhetemlに接続し、鍵をつくる</a></li>
<li><a href="#flow02">鍵をgithubに登録しよう</a></li>
<li><a href="#flow03">登録できたかテストしてみよう</a></li>
<li><a href="#flow04">さぁ、githubにpushしよう</a></li>
<li><a href="#flow05">何か更新したら、またaddしてコミットしてpushしてみよう</a></li>
</ol>
<ol>
<li class="box03" id="flow00">
<h3>必要なものを用意</h3>
<ul class="box03">
<li><a href="http://ja.poderosa.org/download.html" target="_blank">Poderosa</a>（インストールしておいてください）</li>
<li><a href="https://github.com/" target="_blank">github</a>（アカウントを作成してください）</li>
<li><a href="https://admin.heteml.jp/" target="_blank">hetemlのコンパネ</a>（heteml契約してください）</li>
<li><a href="https://webftp.heteml.jp/dir/root/" target="_blank">hetemlFTP</a></li>
</ul>
</li>
<li class="box01" id="flow01">
<h3>hetemlでSSHを設定し、Poderosaでhetemlに接続し、鍵をつくる</h3>
<ol>
<li>
<p>hetemlでSSH設定をする</p>
<p><img src="img/5ac034839a7870d7b5cfc34b2bf83322.png" alt="" /></p>
</li>
<li>
<p>Poderosaを開いて、ファイル＞新規Telnet/SSH接続＞で<strong>hetemlのSSH情報</strong>を入力し、hetemlにつなぐ。</p>
<p> <img src="img/d2c8c675202ed34e8437de1dad55b03e.png" alt="" /></p>
</li>
<li>
<p>「<strong>はい</strong>」</p>
<p> <img src="img/04b1719cff925e3e39d93ae4a21de245.png" alt="" /></p>
</li>
<li>
<p>SSHでhetemlに入ったら、ためしに<strong>pwd</strong>と打つ。自分がいまいる場所がわかる。</p>
<p> <img src="img/ca8d849be6fd4fc3db50386eef630329.png" alt="" /></p>
</li>
<li>
<p>ためしに<strong>cd web</strong>とかしてみる。webフォルダに移動できる。<br>
移動したらまた<strong>pwd</strong>と打つ。自分がいまいる場所がわかる。</p>
<p> <img src="img/91914320f67a00d337a658e11cdaa076.png" alt="" /></p>
</li>
<li>
<p><strong>cd ../</strong> ってすると上のディレクトリに移れる。コマンドの練習おわり。</p>
<p> <img src="img/b1dba7a7908a16d4f9827a67c7c4c7a1.png" alt="" /></p>
</li>
<li>
<p><strong>cd ~/.ssh</strong> って打つ。<br>
<em>No such file or directory（そんなファイルもフォルダもないよ）</em>って言われたらOK。</p>
<p> <img src="img/569d1db91ec92037f3908f9ae823b3fa.png" alt="" /></p>
</li>
<li>
<p>鍵をつくります。<strong>ssh-keygen -t rsa -C "自分のメールアドレス"</strong></p>
<p> <img src="img/16e7a49ab52c06ae22461c450779d461.png" alt="" /></p>
</li>
<li>
<p><em>鍵を保存する場所を選べ</em>って言われますが、そのままでいいので、<br />
<strong>何も入力せずにEnter</strong>。</p>
<p> <img src="img/90bbc6c857327e7acb4789aa4940b879.png" alt="" /></p>
</li>
<li>
<p>passphrasesは<strong>何も打たずにEnter</strong>押してよい<br />
（本当は何か入れてほうがセキュリティ上はいいけど、後でめんどくさくなる）</p>
<p> <img src="img/6766dc6a2186110af449c758e7fd0a25.png" alt="" /></p>
</li>
<li>
<p><em>passphrasesは二回入力しろ</em>、と言われるので<strong>もう一度Enter</strong>を押す</p>
<p> <img src="img/89e28f9a831146b70e289ee9da347744.png" alt="" /></p>
</li>
<li>
<p>鍵ができました。</p>
<p> <img src="img/4975d8a8db1ae570ff602bf1b25aecd6.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box01" id="flow02">
<h3>鍵をgithubに登録しよう</h3>
<ol>
<li>
<p> 出来た鍵を見る。hetemlFTPを開いて、/.sshフォルダ内の <em>id_rsa.pub</em> ってついてるほうを見る。</p>
<p> <img src="img/ff173c50ba22241b55a11804517cdfd2.png" alt="" /></p>
<p> <img src="img/c11ae83311116c6a12fe654fab99a244.png" alt="" /></p>
</li>
<li>
<p> hetemlFTP上では見られないので、「<strong>ダウンロード</strong>」を押して自分のデスクトップに保存する。</p>
<p> <img src="img/875aa2e7a6c5c57e98f67a5009d091fe.png" alt="" /></p>
</li>
<li>
<p> 保存された鍵。</p>
<p> <img src="img/9e99afd5fd7de6c5c7bbcfbcf3bac233.png" alt="" style="width:200px;" /></p>
</li>
<li>
<p> メモ帳or秀丸で開いて確認。</p>
<p> <img src="img/0fb6109ec45c01e6b94773a6763d2bd0.png" alt="" /></p>
</li>
<li>
<p> この鍵を登録したいので、githubに行く。</p>
<p> <img src="img/379fa3ffaefc063ef883929cbf2523e3.png" alt="" /></p>
</li>
<li>
<p> 右上のセッティングボタンから、<strong>SSH Keys</strong>のページに行く。</p>
<p> <img src="img/58ab8027558f64bd21f13a52ce3c0a66.png" alt="" /></p>
</li>
<li>
<p> <strong>コピペ。保存。</strong></p>
<p> <img src="img/a9db9785e56d3cfd501c938c6e344db7.png" alt="" /></p>
</li>
<li>
<p> 保存したあとパスワードを聞かれるので、<strong>hetemlのパスワードを入力</strong>。</p>
<p> <img src="img/d1bdba81842588e8cc7cc359394699ee.png" alt="" /></p>
</li>
<li>
<p> 登録できました。これでgithubとhetemlが通信できます。</p>
<p> <img src="img/7589a632418365f0f5e57412f9b8912a.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box01" id="flow03">
<h3>登録できたかテストしてみよう</h3>
<ol>
<li>
<p><strong>$ ssh -T [email protected]</strong> と打つ。</p>
<p> <img src="img/9605c850395a8f77dd4e363d62dbd449.png" alt="" /></p>
</li>
<li>
<p> ためらうことなく<strong>yes</strong></p>
<p> <img src="img/c327ba0703e17b1818fbe57b515e22d3.png" alt="" /></p>
</li>
<li>
<p> <em>Hi ユーザー名！</em>と言われたら成功！</p>
<p> <img src="img/04f986b6339753e4e2cb70ad756b9faf.png" alt="" /></p>
</li>
<li>
<p> <strong>https://github.com/ユーザー名</strong> で、「<strong>New repository</strong>」をクリック</p>
<p> <img src="img/eeb97e3c7645f5b0e22b6cff7dde57dc.png" alt="" /></p>
</li>
<li>
<p> リポジトリ名は<strong>何でもいい</strong>。ここでは「<strong>chcltntest.github.com</strong>」とする。<br />
<strong>Create repository</strong>をクリック。</p>
<p> <img src="img/aa3a3a62e0a1476fe745fd6f11c4f4f3.png" alt="" /></p>
</li>
<li>
<p> なんかよくわかんない画面になる。これでOK。</p>
<p> <img src="img/0e6b6358d7ffdaf2ea98f59dde0f7fb1.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box01" id="flow04">
<h3>gitの設定</h3>
<ol>
<li>
<p>名前とメールアドレスをgitに設定します。<br />
Poderosaで、<strong>git config --global user.name "あなたの名前"</strong> と打ちます。</p>
<p> <img src="img/4dd58d0f271405c55604ffd9d2f5a60e.png" alt="" /></p>
</li>
<li>
<p> 次に、<br />
<strong>git config --global user.email "あなたのメールアドレス"</strong><br />
と打ちます。</p>
<p> <img src="img/cfbaaff442176cb0de6a1deb4dda3cca.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box01" id="flow05">
<h3>さぁ、githubにpushしよう</h3>
<ol>
<li>
<p>Poderosaに戻って、webフォルダに移る。<strong>cd web</strong>と打ちます。</p>
<p><img src="img/1634554811bb1a5c858ad211f3c55465.png" alt="" /></p>
</li>
<li>
<p> webフォルダの中に、「chcltntest.github.com」フォルダを作ります。<br />
フォルダを作るにはmkdirを使います。<br />
<strong>mkdir chcltntest.github.com</strong> と打ちます。</p>
<p> <img src="img/2dfed130874462d7e07f398256559747.png" alt="" /></p>
</li>
<li>
<p> ディレクトリが出来たか確認してみましょう。</p>
<p> <img src="img/c6d25df1291d46e52021e30f7b22b92a.png" alt="" /></p>
</li>
<li>
<p> 出来たディレクトリに移動します。<br />
<strong>cd chcltntest.github.com</strong> と打ちます。</p>
<p> <img src="img/bbbbb71355ed9fdaa7f4ea5aad530b7f.png" alt="" /></p>
</li>
<li>
<p> ここをgit管理するよ―、と宣言します。<br />
宣言するには <strong>git init</strong> と打ちます。</p>
<p> <img src="img/323e440749e83494c794a3ad4f8df771.png" alt="" /></p>
</li>
<li>
<p> git管理するためのフォルダが出来ました。<br />
これは今後、触らないようにしましょう。</p>
<p> <img src="img/b5bbea3cf3c6857b3e3e9850d2e68f51.png" alt="" /></p>
</li>
<li>
<p> ためしに<strong>git status</strong>と打ってみます。<br />
これは、「いまgit的にはどういう状態ですか」と聞くものです。</p>
<p> <img src="img/5d636086b588c3bad3732eff050eadcb.png" alt="" /></p>
</li>
<li>
<p> 変更されたファイルや追加されたファイルがまだない場合は、<br />
「コミットするものは何もないですよ」と言われます（<em>nothing to commit</em>）</p>
<p> <img src="img/8f6108a4ba41d55d7f8c4cab8dbd6559.png" alt="" /></p>
</li>
<li>
<p> さて、ここで何かを公開してみましょう。<br />
<strong>index.htmlをアップ</strong>してみます。</p>
<p> <img src="img/e21d6bd402a6e9127bf332011d64fce7.png" alt="" /></p>
<p> <img src="img/f94a6a576ed79de3e16bdf457fc42483.png" alt="" /></p>
<p> <img src="img/c32a8981b4e667c1e76ddf97dc5a28e1.png" alt="" /></p>
</li>
<li>
<p> もういちど、<strong>git status</strong>と打ってみます。<br />
いまアップしたindex.htmlが表示されます。</p>
<p> <img src="img/bd7c24a1072fae583d248aaaca7288c3.png" alt="" /></p>
</li>
<li>
<p> アップできたら、さぁ、addしてコミットしてpushしよう。<br />
まず、addします。addとは、「いまからコミットしますよー」と宣言することです。<br />
<strong>git add .</strong> と打ちます。「.（ドット）」は「変更されたものすべて」という意味です。</p>
<p> <img src="img/32b5787993509e7fd2d0f04040855c95.png" alt="" /></p>
</li>
<li>
<p> addに成功しても何もでません。<br />
基本的に黒い画面は、成功しても何も言ってくれません。<br />
冷たいですね。<br />
恋人にはしたくないタイプです。<br />
とにかく成功しました。</p>
<p> <img src="img/b466a26b264a1937bfad635ad83f6575.png" alt="" /></p>
</li>
<li>
<p> addしたらすぐさまコミットしましょう。<br />
<strong>git commit -m "最初のコミットです。"</strong><br />
と打ちます。<br />
メッセージは後からわかりやすいものを書きましょう。</p>
<p> <img src="img/c88f4c25cfda02362a7f7eb5bf7ba96f.png" alt="" /></p>
</li>
<li>
<p> 準備オッケー！pushします。<br />
はじめてのpushのときには以下を打ちます。<br />
<strong>git remote add origin [email protected]:あなたのgithubアカウント名/リポジトリ名.git</strong><br />
2回目以降は打たなくてよいです。</p>
<p> <img src="img/f39fc6e471fd1faa7321cd52f431fa88.png" alt="" /></p>
</li>
<li>
<p> 準備完了。pushします。<br />
<strong>git push -u origin master</strong> と打ちます。<br />
gitさん、pushしてね、origin（github）の master（branch）に。という意味です。</p>
<p> <img src="img/867daff6c09d952a051602cf8794d12e.png" alt="" /></p>
</li>
<li>
<p> <strong>yes</strong>と打ちます。</p>
<p> <img src="img/27db137e02100b929a262816fca02a9d.png" alt="" /></p>
</li>
<li>
<p> こうなったらpush完了！<br />
<em>「error」や「refused」</em>という単語が見えたら失敗。</p>
<p> <img src="img/acfb561d0750deeba7217b67fed97443.png" alt="" /></p>
</li>
<li>
<p> hetemlFTP側ではこうなってるはず</p>
<p> <img src="img/a3dd60abe76553ece8126ba2e2437a4f.png" alt="" /></p>
<p> <img src="img/cbc87f3577fcb97cd8389aff6ddf5936.png" alt="" /></p>
</li>
<li>
<p> github側ではこうなってるはず</p>
<p> <img src="img/7f95c97d44193d705828b552f91bc8a7.png" alt="" /></p>
</li>
</ol>
</li>
<li class="box01" id="flow06">
<h3>何か更新したら、またaddしてコミットしてpushしてみよう</h3>
<ol>
<li>
<p> hetemlFTPでちょこっとファイルをいじってみる。</p>
<p> いじったら保存しましょう。</p>
<p> <img src="img/58fa0a696e83f717b6535fad4ae72eca.png" alt="" /></p>
</li>
<li>
<p> Poderosaで「いまgit的にはどうですか」と聞く。<strong>git status</strong><br />
「<em>index.htmlが修正されたよ</em>」と言われる。</p>
<p> <img src="img/7a9a36baedc221dab6d2738114bc3b9a.png" alt="" /></p>
</li>
<li>
<p> じゃあそれをaddしてコミットします。<br />
addとコミットを一度にやるには&&でつなげればOK。<br />
<strong>git add . && git commit -m "修正した理由"</strong> と打つ。</p>
<p> <img src="img/a54b4293d0bbf225861499ec5bded2dd.png" alt="" /></p>
</li>
<li>
<p> 変更したものをpushします。<br />
<strong>git push -u origin master</strong></p>
<p> <img src="img/67bb9c49de0eff01077d75f1d06af8ba.png" alt="" /></p>
</li>
<li>
<p> githubにpushされました。</p>
<p> <img src="img/8ae20fa57c633713656bc2fdb5cad4b7.png" alt="" /></p>
</li>
<li>
<p> pushした履歴は「<strong>history</strong>」から見られます。</p>
<p> <img src="img/0b23ad9c1e71a76e6a124f5f77bc0b84.png" alt="" /></p>
</li>
</ol>
</li>
</ol>
</div>
<div class="box">
<h2>今日のまとめ</h2>
<p>最初に一度だけ、鍵を登録してgitの設定をする。<br>
それが終わったらaddしてコミットしてpushを繰り返す、が主な流れ。<br>
複数人で開発するときは、他にpullやbranchなどを使って作業します。</p>
</div>
<div class="box">
<h2>おまけ</h2>
<ul>
<li><a href="http://www.slideshare.net/to_ueda/git-6821390" target="_blank">１５分でわかるGit入門</a></li>
<li><a href="http://blog.asial.co.jp/894" target="_blank">イラストでわかる！git入門の入門</a></li>
</ul>
</div>
<p class="box05">by SHOKO OYAMADA (<a href="http://twitter.com/chocolatina" target="_blank">chocolatina</a>) @ paperboy&co.<span>{</span></p>
</body>
</html>