forked from cmt77/Easy-Git-Tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
439 lines (413 loc) · 20.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
439
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta content="keywords" name="git tutorial">
<meta content="description" name="git tutorial">
<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/photobox.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/carousel.js"></script>
<script src="js/scrollside.js"></script>
<script src="js/photobox.js"></script>
<title>Basic Git Tutorial</title>
</head>
<body class="well fluid">
<header >
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a href="index.html" class="brand" style="margin-left:4em;margin-right:30em">Git 教學研究站</a>
<ul class="nav" id="scroll_side">
<li class="active" id="learn"><a href="#learning">教學文件</a></li>
<li id='shirei'><a href='shirei.html'>Git 的基本指令</a></li>
<li id="start"><a href="start.html">開始使用</a></li>
<li id="try"><a href="try.html">自我練習</a></li>
<li id="sld"><a href="slide.html">教學資源</a></li>
</ul>
</div>
</nav>
</header>
<article id="main" class="fluid">
<section id="learning">
<nav id="scroll_down">
<ul class="span3 nav nav-pills nav-stacked navbar-fixed-left" >
<li class="active" id="first"><a href="#ver_con" class="scroll">版本控制</a></li>
<li><a href="#name_intro" class="scroll">Git 名詞解釋</a></li>
<li><a href="#git_structure" class="scroll">Git 基本結構</a></li>
<li><a href="#github_tutorial" class="scroll">Github 教學</a></li>
<li><a href="#git_application" class="scroll">Git 的應用</a></li>
<li><a href="https://github.com">GitHub</a></li>
</ul>
</nav>
<!-- Apply scroll down to hash tag and automatically change the active class-->
<script>
var main = main = $('#scroll_down ul');
$('.scroll').click(function(event) {
event.preventDefault();
var full_url = this.href,
parts = full_url.split('#'),
trgt = parts[1],
target_offset = $('#'+trgt).offset(),
target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 500);
/* Remove active class on any li when an anchor is clicked */
main.children().removeClass();
/* Add active class to clicked anchor's parent li */
$(this).parent().addClass('active');
});
</script>
<div class="row" id="ver_con">
<div class="span3"></div>
<div class="span6" style="margin-left:8em">
<h2>版本控制</h2>
<hr/>
<p>
版本控制（Revision control）是維護工程藍圖的標準作法，能追蹤工程藍圖從誕生一直到定案的過程。此外，版本控制也是一種軟體工程技巧，藉此能在軟體開發的過程中，確保由不同人所編輯的同一程式檔案都得到同步。
</p>
<h3 style="text-align:center">為什麼使用版本控制？</h3>
<div>
在軟體開發的過程中，程式碼每天不斷地產出，過程中會發生以下情況：
<ul style="margin-top:1em">
<li>檔案被別人或自己覆蓋，甚至遺失</li>
<li>想復原前幾天寫的版本</li>
<li>想知道跟昨天寫的差在哪裡</li>
<li>是誰改了這段程式碼，為什麼</li>
<li>軟體發行，需要分成維護版跟開發版</li>
</ul>
因此，我們希望有一種機制，能有幫助我們：
<ul style="margin-top:1em">
<li>可以隨時復原修改，回到之前的版本</li>
<li>多人協作時，不會把別人的東西蓋掉</li>
<li>保留修改歷史記錄，以供查詢</li>
<li>軟體發行時，可以方便管理不同版本</li>
</ul>
</div>
<h3>定義</h3>
<div>
<p>
一個版本控制系統 Version Control System (VCS)，通常有以下功能
<ol>
<li>建立 Repository (儲存庫)，用來保存程式碼。</li>
<li>方便散佈程式給團隊，有效率協同開發 </li>
<li>記錄誰改變什麼、在什麼時候、因為什麼原因 </li>
<li>Branch(分支)，可因不同情境分開開發</li>
<li>Tag(標籤) 重要里程碑，以便參照</li>
</ol>
那麼，什麼東西要存進Repository呢? 簡單來說，就是所有跑起來這個專案需要的東西，包括所有原始碼、範例設計檔、文件等等。而像是暫存檔、log 檔案、build files 等編譯後的產物則不需要存進 Repository。
</p>
</div>
<h3>演進歷史</h3>
<div>
<p>
版本控制系統從古至今，有幾種不同的模式：
<ol>
<li>Local VCS</li>
<li>Centralized VCS (Lock型，悲觀鎖定)</li>
<li>Centralized VCS(Merge型，樂觀鎖定)</li>
<li>Distributed VCS</li>
</ol>
<hr>
<div >
<strong style="font-size:1.8em">Local VCS</strong><br>
在本地端使用 copy paste 進行資料夾管理，例如 rcs。當然，缺點是無法協同開發。
<a href="http://i.imgur.com/RsNQ9eP.png" >
<img src="http://i.imgur.com/RsNQ9eP.png" style="margin-left:6em; margin-top:1em"/>
</a>
</div>
<hr>
<div >
<strong style="font-size:1.8em">Centralized VCS (Lock型，悲觀鎖定)</strong>
<br>
有一個中央團隊共用的Repository，當有人要編輯某個檔案時，進行鎖定，以避免其他人也同時編輯造成衝突。<br>
雖然可以避免衝突，但是很不方便。其他人得排隊才能編輯檔案，萬一先取出的人寫很久或忘記 解除鎖定，後果將不堪設想。<br>
<a href="http://i.imgur.com/nn6hX2F.png">
<img src="http://i.imgur.com/nn6hX2F.png" style="margin-left:2.5em;margin-top:1em">
</a>
</div>
<hr>
<div>
<strong style="font-size:1.8em">Centralized VCS(Merge型，樂觀鎖定)</strong><br>
也是有一個中央團隊共用的Repository，但是不用Lock來避免衝突，而是事後發現如果有別人也修改同一個檔案(稱作衝突)，再進行手動編修解決。有非常多的VCS屬於這一型，包括CVS, Subversion, Perforce等等。Centralized VCS 的共同缺點是做什麼事都要跟伺服器連線，會比較慢。另外也有單點故障的風險(Single point of failure)，只要伺服器壞掉，大家就不用作事了。<br>
<a href="http://imgur.com/RWbDy85.png">
<img src="http://i.imgur.com/RWbDy85.png" style="margin-top:1em;margin-left:2.5em"/>
</a>
</div>
<hr>
<div>
<strong style="font-size:1.8em">Distributed VCS</strong><br>
分散式版本控制系統讓本地端也擁有完整的Repository，就沒有上述集中式的問題，即使沒網路，照常可以 commit 和看 history log，也不用擔心server備份。例如 Git, Mercurial(Hg), Bazaar 等就是屬於分散式版本控制系統。<br>若要說有什麼缺點，就是能力越大，功能就越複雜，一開始學習上會比較辛苦一點。
<a href="http://imgur.com/8p82DMS.png">
<img src="http://i.imgur.com/8p82DMS.png" style="margin-top:1em;margin-left:2.5em"/>
</a>
</div>
</p>
</div>
</div>
</div>
<script>
$('#ver_con').photobox('a');
// or with a fancier selector and some settings, and a callback:
$('#ver_con').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
function imageLoaded(){
console.log('image has been loaded...');
}
</script>
<div class="row" id="name_intro" >
<div class="span3" ></div>
<div class="span6" style="margin-left:8em">
<h2>Git 名詞解釋</h2>
<hr>
<div>
<h3>物件模式(Object Mode)</h3>
Git 中一共有四種模式 : Blob﹑Tree﹑Commit﹑Tag。
<ul style="margin-top:1em">
<li><b>Blob</b>: 只是用來儲存檔案內容，連檔案名字都沒有。</li>
<li><b>Tree</b>: Tree 可以儲存文件名，同時也允許儲存一組檔案。所有内容以 Tree 或 Blob儲存，其中 Tree 對應於 UNIX 中的目錄，Blob 則大致對應於 inodes 或檔案内容。</li>
<li><b>Commit</b>: Commit 為你保存了關於誰、何時以及為何保存了這些快照的訊息。</li>
<li><b>Tag</b>: Tag 非常像一個 Commit ——包含一個標籤，一組數據，一個消息和一個指針。最主要的區别就是 Tag指向一個 Commit 而不是一個 tree。它就像是一個分支引用，但是不會變化——永遠指向同一個 Commit，僅僅是提供一個更加友好的名字。</li>
</ul>
<blockquote style="background:#E5E4E2">
Note : 可以把<b>Blob</b> 看作是檔案，<b>Tree</b> 看作是資料夾，<b>Commit </b>看作是每次的更新，<b>Tag</b> 為大事件
</blockquote>
<a href="http://marcusahnve.org/git_presentation/file/internals/object_model.svg">
<img src="http://marcusahnve.org/git_presentation/file/internals/object_model.svg">
</a>
</div>
<hr>
<div>
<h3>Git 參照 ( Git References )</h3>
你可以執行像<pre> git log 1a410e </pre>這樣的命令來查看完整的歷史，但是這樣你就要記得 1a410e 是你最後一次提交，這樣才能在提交歷史中找到這些物件。你需要一個檔案來用一個簡單的名字來記錄這些 SHA-1 值，這樣你就可以用這些指針而不是原來的 SHA-1 值去檢索了。在 Git 中，我們稱之為“參照”（references or refs）。
<ol style="margin-top:1em">
<li><b>head</b>: 是一個指向你當前所在分支的引用標示符號。</li>
<li><b>tag</b>: tag 是一個物件也是一個引用，我們在之前已經做過了詳細的說明。</li>
<li><b>remote</b>: 是一個標示符號指向你最後一次和伺服器的通訊的分支。</li>
<li><b>branch</b>: 是一個指向每個分支最前面 commit 的指標，告訴使用者分支名稱。</li>
</ol>
</div>
<hr>
<div>
<h3></h3>
</div>
</div>
</div>
<script>
$('#name_intro').photobox('a');
// or with a fancier selector and some settings, and a callback:
$('#name_intro').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
function imageLoaded(){
console.log('image has been loaded...');
}
</script>
<div class="row" id="git_structure">
<div class="span3" ></div>
<div class="span6" style="margin-left:8em">
<h2>Git 基本結構</h2>
<hr>
<div id='gallery'>
<h3>檔案的三種狀態</h3>
任何檔案在 Git 内都有三種狀態：
<ol style="margin-top:1em">
<li><b style="color:red">已提交（committed）</b>: 表示該檔案已經被安全地保存在本地資料庫中了。</li>
<li><b style="color:red">已修改（modified）</b>: 修改了某個檔案，但還没有提交保存。</li>
<li><b style="color:red">已暫存（staged）</b>: 把已修改的檔案放在下次提交时要保存的清單中。</li>
</ol>
<br>
而在 Git 之中檔案會在三種不同的工作區中轉移，下面分別介紹三種不同工具區<br>
<ol style="margin-top:1em">
<li><b style="color:red">Working Directory</b>: 所有的修改、變動都發生在這個階段。</li>
<li><b style="color:red">Staging area</b>: 作為一個中繼的工作區，在將檔案放入資料庫之前做確認及檢查的工作區，確認無誤後就可以將檔案轉移至資料庫。</li>
<li><b style="color:red">Repository</b>: 資料庫，儲存著更新的 commit，而線上資料庫會和本機的這個區域進行同步。</li>
</ol>
<a href="http://imgur.com/LBM6SN7.png">
<img src="http://i.imgur.com/LBM6SN7.png" title="Hosted by imgur.com" style="margin-left:5em"/>
</a>
</div>
</div>
</div>
<!--script for gallery-->
<script>
$('#gallery').photobox('a');
// or with a fancier selector and some settings, and a callback:
$('#gallery').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
function imageLoaded(){
console.log('image has been loaded...');
}
</script>
<div class="row" id="github_tutorial">
<div class="span3"></div>
<div class="span6" style="margin-left:8em">
<h2>Github 教學</h2>
<hr>
<h3>簡介</h3>
<hr>
<div id="gallery01">
<p>
Github 是一個 git 的拖管網站，他可以讓開發人把自己的專案儲存到線上，與全世界分享，我們可以方便的使用 Git 在本機進行管理專案。<br/>
GitHub 同時提供付費帳號和為開源項目提供的免費帳號。根據在 2009 年的 Git 用戶調查，GitHub 是最流行的 Git 存取站點。它提供了像 feeds、followers 和顯示開發者們怎樣在他們版本庫上的版本工作的網路圖表。
GitHub 也提供一個黏貼風格的站點，個人信息庫和網頁使用 Wiki，通過一個 git repository 即可對這些頁面進行編輯。
</p>
<hr/>
<h3>建立帳號</h3>
<hr>
<p>
<a href="http://i.imgur.com/dBiVqte.png" alt="建立帳號">
<img src="http://i.imgur.com/dBiVqte.png" style="margin-left:-2em"/>
</a>
</p>
<hr>
<h3>建立新repository</h3>
<hr>
<p>
在和本機的 repository 連動之前，先給自己的專案取個名字吧，這會是你專案之後的名字，也會是其他人搜尋你專案的時候的關鍵字，好的專案一定有一個好的名字。
<a href="http://i.imgur.com/bGEBbhJ.png?1" alt="建立新 repository">
<img src="http://i.imgur.com/bGEBbhJ.png?1" style="margin-left:8.5em">
</a>
</p>
<hr>
<h3>綁定機器的 SSH KEY</h3>
<hr>
<p>
因為要讓 Github 知道是我們這台電腦上傳的專案，所以我們要和 Github 之間建立一種默契，這個默契就是使用 ssh 協定時的 public key，我們給 Github 我們本機的 ssh public key ，告訴 Github 拿著這個 key 的電腦才是這個帳號的使用者， 如此一來就只能由這台電腦進行管理，才不會造成其他人來我們的帳號亂上傳東西的窘境。
</p>
<p>
首先，點選右上角的工具按鈕，進入帳號設定頁面，在頁面的左下角點選 SSH KEY<br>
<a href="http://i.imgur.com/Rs74P6k.png?1" alt="SSH KEY">
<img src="http://i.imgur.com/Rs74P6k.png?1" style="margin-top:1em">
</a>
</p>
<br>
<p>
這個時候需要打開終端機產生本機的 SSH KEY，並將產生的 SSH KEY 加入到 Github 的帳號之中，若是不知道產生 SSH KEY的方法，可以參考以下的
<a href="https://help.github.com/articles/generating-ssh-keys">網頁</a>
</p>
<hr>
<h3>將本機 repository 和 Github repository 同步</h3>
<hr>
<p>
打開空的 repository，Github 會指示你如何將本機 repository remote 到 Git 的 repository
進入到本機的 repository 資料夾之中，並輸入以下指令，即可連線並把目前的 repository 同步到 Github 上面了。<br>
<pre>
git remote add origin [email protected]:your_account/sandbox.git<br>
git push -u origin master<br>
</pre>
之後只需要<br>
<pre>
git push<br>
</pre> 即可
</p>
<hr>
<h3>Folk 其他使用者的專案</h3>
<p>
Fork 是一個較為特殊的稱呼方式，意思是講其他使用者的 repository 複製到本機，我也可以直接透過他的 repository 來自己修改這個專案，讓這個專案更好。<br>
如果你有寫入權限的話(被加入成Collaborators)，就可以用 SSH 協定 Clone 下來：<br>
<pre>
git clone [email protected]:Username/repository.git <br><br>
</pre>
如果沒有寫入權限 (Collaborators)的話，因為這個專案是公開的，所以你還是可以用 Git 協定 Clone 下來：<br>
<pre>
git clone git://github.com/Username/repository.git<br>
</pre>
<br>
如果有防火牆問題，改用 HTTPS 協定：<br>
<pre>
git clone https://github.com/Username/repository.git
</pre>
</p>
<hr>
<h3>Pull - 從遠端更新</h3>
<hr>
<p>
<pre>
git pull 或 git pull origin master<br>
</pre>
實際作用是先 git fetch 遠端的 branch，然後與本地端的 branch 做 merge，產生一個 merge commit 節點
</p>
<hr>
<h3>Push - 將 Commit 送出去</h3>
<hr>
<p>
<pre>
git push 或 git push origin master<br>
</pre>
實際的作用是將本地端的 master branch 與遠端的 master branch 作 fast-forward 合併。如果出現 [rejected] 錯誤的話，表示你必須先做 pull。
</p>
<hr>
</div>
</div>
</div>
<!-- The photo gallery -->
<script>
$('#gallery01').photobox('a');
// or with a fancier selector and some settings, and a callback:
$('#gallery01').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
function imageLoaded(){
console.log('image has been loaded...');
}
</script>
<div class="row" id="git_application">
<div class="span3"></div>
<div class="span6" style="margin-left:8em">
<h2>Git 的應用</h2>
<hr>
<div id ="Linux kernel">
<h4>Linux kernel</h3>
Git 是由 Linux 的發明人 Linus Torvalds 所發明的，其目的就是為了更好的管理 Linux Kernel，所以 Linux kernel 可以算是應用方面最有說服力的例子了<br><br>
<a href="http://i.imgur.com/hz3iQbE.png">
<img src="http://i.imgur.com/hz3iQbE.png">
</a>
<br><br>
Linux kernel on Github:<br>
<pre>
https://github.com/torvalds/linux
</pre>
</div>
<div id="g0v.tw">
<p>
<h4>台灣零時政府</h4>
<a href="http://g0v.tw/imgs/g0v-full.png">
<img src="http://g0v.tw/imgs/g0v-full.png" style="margin-left:12em"/>
</a><br>
政策瞎，官員混，立委貪，政府爛，總統笨……
除了生氣翻桌，到底還能做什麼？讓我們來寫程式改造社會！
<br>
g0v.tw 是一個致力於打造資訊透明化的社群。g0v.tw 的參與者來自四方，
有程式開發者、設計師、社會運動工作者、教育工作者、文字工作者、
公民與鄉民等來自各領域的人士。這些人聚在一起，
希望資訊透明化可以更進一步的改善台灣的公民環境。
只要有心想用自己的專業及能力來參與，就可以加入 g0v.tw。
<br>
有心想要參與的同學們，可以參考<a href="http://g0v.tw/">這個網站</a>
，看看可以為我們的社會付出什麼。
<br><br>
g0v.tw 的 Github Repository:<br>
<pre>
https://github.com/g0v
</pre>
</p>
</div>
</div>
</div>
<script>
$('#git_application').photobox('a');
// or with a fancier selector and some settings, and a callback:
$('#git_application').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
function imageLoaded(){
console.log('image has been loaded...');
}
</script>
</section>
</article>
<hr/>
<footer class="row-fluid" style="margin-left:35em">
<div class="container">
<p>
<i class="icon-check icon-black"></i>
本網站資料感謝<a href="http://ihower.tw/git/"> ihower 前輩</a>、<a href="https://zh.wikipedia.org/wiki/Git">維基百科</a>及<a href="https://help.github.com/articles/set-up-git">Github</a>提供
</p>
</div>
</footer>
</body>
</html>