1.
電子內容管理
使用Git 與 Github
By Alan Tsai 2017-07-04
人人都要會的技能，如何對電子內容做好版管理
可不是只有程式設計師才需要GIT

2.
關於我
2
▰Alan Tsai 蔡孟玹
▰後端(攻城獅)工程師
▻Web Developer - 主要使用 .Net/C# 和 Asp .Net Mvc
▰看小說
▰找到我 – contact@alantsai.net
▻http://blog.alantsai.net - Alan Tsai 的學習筆記
▻{服務}.alantsai.net
▻http://fb.alantsai.net - fb
▻http://ln.alantsai.net – linkedin
▻http://ss.alantsai.net - slideshare

3.
為什麼要有版控 – 文件撰寫
3
需求
撰寫
檢閱修正
完成
▰問題點
▻撰寫和那個需求有關？
▻送出檢閱是那個版本？
▻修正過後和檢閱版本差異在哪裡？
▻階段性完成和下個需求差距有多
少？
▻協同合作 – 誰修改了什麼？

4.
為什麼要有版控
4
▰問題點
▻請問那個版本是最新的？
▻請問送出的版本是哪一個？
▻假設送出之後又有來調整，那個
是修改過的？
▻每一個修改之間的原因是什麼？
▻是誰修改的？

5.
為什麼要有版控
5

6.
Agenda
6
▰版控基本介紹
▰環境準備
▰開始使用
▻版本記錄
▻查看歷史
▻打標籤

7.
介紹篇
7

8.
沒有版控 – 無法協同工作
8

9.
第一代 – 一個人的時代
9
▰沒版控最大問題是，同時修改怎麼辦？
▰使用Lock技術
▻同時只能一個人來
▰軟體都是由少數個人寫出來的
▰不能協同工作？
▰大型軟體怎麼辦？ 來源：Pro Git P28 Figure1-1

10.
第二代 – CVCS（Centralized） 集中式版控
10
▰有個中央Server記錄版本
▻可以多人使用
▰第一代問題是容易雙方互等
▻在commit（提交）的時候針對有重複的去做修正
▰典型程式有
▻Subversion (SVN),
Team Foundation Server (TFS),
CVS, SourceSafe,
來源：Pro Git P29 Figure1-2

11.
第三代 – D(Distributed)VCS – 分散式版控系統
11
▰不再只有一個中央系統
▻任何人裡面有記錄就是一個Repository
▻隨時可以commit
▻merge before commit
來源：Pro Git P30
Figure1-3

12.
黑暗時代 – 沒有版控的世界
12
▰遊戲世界來說就像

13.
黑暗時代 – 沒有版控的世界
13
▰遊戲世界來說就像

14.
第二代 – 問題
14
▻沒網路要開發怎麼辦？
▻不同團隊如何並行開發？
▻Server掛掉怎麼辦？

15.
第三代
15
▰模擬器
▰遊戲外面可以存檔

16.
為什麼選git
16
▰隨時存檔 – 不用擔心影響別人
▰速度快
▻建立分支變態的快
▰不需要任何其他裝備就可以開始使用
▰可以接其他的版控
▻git svn - 開始使用git - 用git操作svn repo
▻Git tfs

17.
為什麼選git
17
https://insights.stackoverflow.com/survey/2017#technology

18.
為什麼選git
18
▰微軟的Windows Code轉git
▰世界上最大的repo
▻300GB
▰2周後的survey
https://blogs.msdn.microsoft.com/bharry/2017/05/24/th
e-largest-git-repo-on-the-planet/

19.
Git 適合什麼類型的檔案
19
▰任何類型的專案
▰純文字類型的檔案較好
▻比對比較容易
▻Word就比較不適合
▻Markdown的崛起
▰預設不適合（但是有額外套件幫忙處理）
▻大型檔案、Binary（exe）、圖片

20.
版控 VS Google doc
20
▰版控 vs 一般文件
版控 Google Doc 評價
歷史記錄 永久 有時間限制 版控
隨時回復版本 永久 有時間限制 版控
任意版本比對修改 可以 不可以 版控
記錄修改的目的和版號 可以 不可以 版控
及時協同作業 非及時 及時 Google Doc

21.
Gitbook – 打造電子書
21
▰https://www.gitbook.com/
▰Markdown撰寫
▰柯文哲【柯Ｐ新政】市政白皮書
▻https://www.gitbook.com/book/doctorkowj/kppolicy/details

22.
gist – 打造自己的snippet管理器
22
▰Github 的服務
▻https://gist.github.com/
▰例如 用powershell排序資料夾
▻排序的片段程式碼
▰Gistbox

23.
準備篇
23

24.
準備篇
24
▰ 需要了解
▻ 安裝git
▻ CLI – 指令（命令提示窗）
▻ Gui
▻ 設定Git
▻ 必須的設定
▻ 常見設定

25.
準備篇
安裝Git
25

26.
安裝git
26
▰Git 本身是CLI工具
▰安裝內容
▻CLI工具 – 必要
▻Posh-git – 讓Powershell作為CLI界面 – 非必要
▻GUI界面 – 非必要

27.
Git的功能（相對值）
27
▰CLI
▻100%功能
▰GUI
▻60%~80%
▰IDE類型整合
▻Visual Studio Code
▻Eclipse
▻40%~60%

28.
使用組合
28
▰ CLI (powershell) + TortoiseGit
▻ CLI做一般操作
▻ TortoiseGit 做 歷史查詢（log），檔案比對（diff）和處理
conflict
▰ Source Tree + TortoiseGit
▻ Source Tree有點ide的感覺
▻ TortoiseGit在歷史查詢比較清楚

29.
安裝git – CLI工具
29
▰Git for Windows
▰包含git.exe、git bash、 git gui 、git lfs、git flow和Windows Credential Manager
▻https://git-scm.com/download/win
▻chocolate
#沒安裝過choclate 用 admin開啟 cmd 然後執行
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object
System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))"
&& SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin"
choco install git.install -params ‘“/NoShellIntegration”'

30.
Git for Windows 安裝1
30
▰Windows Explorer Integration
▻建議不要勾，因為其他Gui工具就有提供

31.
Git for Windows 安裝2
31
▰Use Git from Git Bash only
▻只有Git Bash能夠跑Git
▰Use Git from the Windows Command prompt（建議）
▻在Path上面加git – cmd就可以執行git
▰Use Git and optional Unix tools from Windows Command
Prompt
▻在Path加上git 和 安裝一些Unix工具

32.
Git for Windows 安裝3
32
▰Windows 斷行吃 CRLF 而Unix吃 LF
▻Windows建議選第一個
▻Unix建議選第二個
▰這邊是設定版控儲存的斷行方式
▰這個可以安裝完成之後透過 git config設定
git config --system core.autocrlf “true” #第一個選項
git config --system core.autocrlf ”input” #第二個選項
git config --system core.autocrlf ”false” #第三個選項

33.
powershell作為替代工具（非必要）
33
▰我是powershell和gui交叉使用
▻Gui用來看log和做diff(比對)和merge(合併)
▻Powershell 用來做其他操作
▰Posh-git (https://github.com/dahlbyk/posh-git )
▻對git的一些指令有tab completion
▻Prompt提供詳細資訊

34.
posh-git安裝方式 1（非必要）
34
▰Chocolate
▰或
▰Powershell Gallery
▻預設Windows 10 有安裝 – 其他需要到Powershell Gallery做下載
choco install poshgit
Set-ExecutionPolicy RemoteSigned
Install-Module posh-git -Scope CurrentUser

35.
posh-git安裝方式 2（非必要）
35
▰重開powershell
▰試試看指令
▰是否會自動補全變成fetch
▰如果沒有執行
git fe <tab>
Import-Module posh-git
Add-PoshGitToProfile -AllHosts

36.
Git Gui
36
▰TortoiseGit （俗稱 小烏龜，TortoiseSvn）
▻支援Windows
▻https://code.google.com/p/tortoisegit/
▰SourceTree
▻支援Windows 和 Mac
▻https://www.atlassian.com/software/sourcetree/overview
▰GitHub For Windows
▰ 更多 Gui 工具
▻ https://git-scm.com/downloads/guis

37.
Tortoisegit 1
37

38.
TortoiseGit 2
38

39.
TortoiseGit 3
39

40.
TortoiseGit 4 快速設定
40

41.
TortoiseGit 5
41

42.
TortoiseGit 6
42

43.
準備篇
設定篇
43

44.
設定檔案的層級和位置
44
System 層級
Unix - /etc/gitconfig
Windows – {Git安裝路徑}etcgitconfig
使用者層級
Unix - ~/.gitconfig 或者 ~/.config/git/config
Windows - %userprofile%.gitconfig
專案層級
在專案下的 .git/config
輕

45.
設定檔案修改的方式
45
▰CLI
▻Powershell

46.
設定檔案的層級和位置
46
System 層級
Unix - /etc/gitconfig
Windows – {Git安裝路徑}etcgitconfig
使用者層級
Unix - ~/.gitconfig 或者 ~/.config/git/config
Windows - %userprofile%.gitconfig
專案層級
在專案下的 .git/config
輕git config –-system {參數}
git config –-global {參數}
git config {參數}

47.
設定檔案修改的方式
47
▰CLI
▻Powershell
▰Gui
▻TortoiseGit
▰直接改檔案
▻檔案位置直接改
▻注意 檔案斷行是 LF（Unix系統）
▻Notepad會斷行錯誤
▻新的編輯器就正常：Visual Studio Code 、Notepad++

48.
必設定參數
48
▰姓名和Email為必設欄位
▻Cmd
▻透過TortoiseGit
▻透過直接改檔案
▻路徑 - %userprofile%.gitconfig
git config --global user.name“Alan Tsai“
git config --global user.email “alan@alantsai.net”

49.
基本介紹
49

50.
建立本機Repository
50
▰Repository像是整個版控的資料庫
▻要開始使用git要先建立Repository
▰建立方式
▻使用指令
▻使用TortoiseGit
git init

51.
.git 資料夾
51
▰執行完之後多出一個 .git資料夾
▻如果沒有看到，打開系統檔案和顯示副檔名
▻這個資料夾絕對不能刪掉 – 刪掉就沒任何記錄了
Windows 10 設定
Windows 7 設定
（圖片取自網路）

52.
作業流程
52
沒有任何
修改
修改檔案
準備要上
版的內容
儲存
git status
git diff
git add .
git commit

53.
加入一個檔案到版控 - TortoiseGit
53
▰先在資料夾加一個叫做 ReadMe.md 的檔案
▰[右鍵] -> [Git commit -> “master”]
▰選擇ReadMe.md
▰ 輸入commit訊息
▰[Commit]

54.
基本介紹
檢查修改內容
54

55.
TortoiseGit – Check Modification
55

56.
FAQ 為什麼看不到資料夾修改
56
▰Q
▻為什麼我加入了一個資料夾，但是修改清單沒有列出來呢？
▰A
▻git是管理檔案內容 – 所以假設只是為了建立資料夾結構，可
以在那個資料夾下面建立一個空檔案
▻習慣使用 .gitkeep 作為空檔案

57.
基本介紹
決定那些要做版控
57

58.
TortoiseGit add
58

59.
設定忽略檔案 - .gitignore
59
▰並不是所有檔案都要進入版控
▻原則上能夠重新產生出來都不要進去
▻例如編譯過的dll、exe
▰放在和.git同一個層級，建立.gitignore檔案即可
▰全域可以用
▰gitignore 檔案可以參考：
https://github.com/github/gitignore
git config --global core.excludesfile “{路徑}”

60.
基本介紹
復原修改
60

61.
TortoiseGit revert
61

62.
基本介紹
儲存到版控（commit）
62

63.
如何寫好commit 訊息
63
▰訊息字數
▻標題 每行 50 個字
▻標題和內文空一行
▻內文每行72個字
▰訊息內容
▻寫 為什麼 而不是 做了什麼
▻結合Issue Tracking的號碼 – 例如 fix #211 –表示關掉issue 211

64.
基本介紹
查看歷史
64

65.
Git log –歷史
65
▰用git log指令可以看到歷史記錄
▻這個指令有很多參數
git log
git log --oneline --abbrev-commit --all --graph

66.
用TortoiseGit的Show log
66

67.
比對工具設定
67

68.
TortoiseGit 在對office文件比對
68
▰雖然說git版控office文件容易造成空間大
▰但是以TortoiseGit來說
▰比對的時候會呼叫原生word做比對
▰因此版控office文件變得容易
▻其他gui也可以透過設定達到類型效果

69.
基本操作
建立標籤
69

70.
打版號
70
▰階段性完成可以打個標籤（版號）記住目前位置
▰有了這個標籤未來容易找到

71.
71
▰標籤
▻顯示在log的名稱
▻常見的有 v1.0.0
▰記錄訊息
▻加上一些更詳細說明
▻例如完成什麼，到了什麼階段
▰強制
▻假設要更新標籤的位置才勾選

72.
IDE類型很適合日常的操作
72
▰例如VS Code
▻Commit
▻比對
▻切換分支

73.
進階指令
73

74.
兇手就是你
74
▰有時候要針對當一個檔案每一行修改的時間和誰修
改
▰請使用git blame
▰更進階可以用
▻DeepGit
▰更適合純文字類型

75.
提供檔案給別人
75
▰匯出（Export）

76.
Best Practise
76

77.
多久commit一次
77
▰請記住一個原則
▰每一個commit是minimum working unit
▻意思是最小可運作的單位
▻換句話說，至少能夠build即可
▰請不要一個commit裡面有3~4個不同性質功能的
修改
▰建立好的commit歷史記錄對於未來很有幫助

78.
Commit 訊息很重要
78
▰請參考commit 篇
▰不管用什麼CVS，請記住一定要寫
▻因為太重要了，因此git逼你一定要寫
▰寫的好在3個月回來看你才容易知道什麼時間改了什麼，為什麼
改
▻在debug很有幫助
▰我個人習慣會在前面用先表示是什麼功能
▻例如：[前台][首頁]左邊banner跑版調整

79.
結語
79

80.
版控的重要性
80
▰版控是一切的基石
▰只有版控做好了，其他地方才能夠往下做
▰早幾年提到ALM的時候，版控就是其中一塊，也是
比較容易開始的一塊
https://blogs.msdn.microsoft.com/africaapps/2013/05/2
9/application-lifecycle-management-part-1-of-5/

81.
其他資源
81
▰Git官網 https://git-scm.com/
▻Pro Git https://git-scm.com/book/en/v2
▰Git指令圖解說明
▻http://marklodato.github.io/visual-git-guide/index-en.html
▰連猴子都能夠懂的Git入門指南
▻http://backlogtool.com/git-guide/tw/
▰關注我的部落格 – 特別是git標籤
http://blog.alantsai.net/search/label/Git
▰更詳細的投影片
大家應該都要會的工具 Git 從放棄到會用1-基礎篇

82.
下一次
82
▰使用github
▻建立帳號
▻功能介紹
▰Markdown語法介紹
▻Visual Studio Code工具介紹
▰用github建立一個自己線上履歷頁
▻不懂html也可以做

83.
83
Q&A
感謝大家
任何問題都可以在
contact@alantsai.net
部落格-Alan Tsai 的學習筆記
找到我

84.
CREDITS
Special thanks to all the people who made and
released these awesome resources for free:
▰ Presentation template by SlidesCarnival
▰ Photographs by Startup Stock Photos
84