逢甲大學暑假期間逢甲大學校輔室與Study4TW合作，提供有需要的學生免費的技術概論課程 這個部分是給非資訊內容介紹git和如何在他們日常使用 介紹github、open source、如何搭配使用issue tracking做到簡易專案管理。最後有個成品是建立一個履歷網站。 給學生有往下研究的動力 課程總結： http://to.alantsai.net/20170725-blog-slideshare 課程相片：https://www.facebook.com/Study4.tw/photos/a.241568189262415.58655.233737566712144/1389644971121392/?type=3&theater&notif_t=like&notif_id=1499475929918955

1. 電子內容管理
使用Git 與 Github 2
By Alan Tsai 2017-07-05
最好展示能力的平台，讓老闆在面試前就了解你的能力
可不是只有程式設計師才用GITHUB

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. Agenda
3
▰介紹Github
▻註冊帳號
▻基本功能介紹
▰建立一個repo
▻Push
▻Pull
▻Markdown
▰建立一個線上CV

4. Github
展現自我能力的平台
4

5. Github
5
▰https://github.com/
▰從2011創辦
▻希望有個地方提供大家可以放repo
▰整個git火紅起來
▰吉祥物
▻Octocat（章魚貓）

6. Github好處
6
▰學習展現自我的平台
▻180天每天建立一個網站
▰開放原始碼
▻找到資源
▻請大家幫你一起檢視
▻要注意別把有版權疑慮的東西放上去

7. Github帳號模式
7
▰如果是公開的repo
▻完全免費
▰假設要有非公開（私人）的repo
▻最低從每個月7美金開始
▻學生期間有給你免費用7美金版本
▻申請方式
▰https://github.com/pricing

8. 有沒有免費但是有提供私人repo
8
▰Visual Studio Team Service
▻微軟帳號
▻5人以下免費
▻搭配看板和敏捷 – 最好的免費整合
▰GitLab
▻不限制人數免費
▻可以自己架設
▰Bitbucket
▻5人以下免費

9. Github
建立帳號
9

10. 申請github – 帳號密碼
10
▰https://github.com/join?source=header
▰輸入內容
▻Username
▻使用者名稱 – 會成為網址一部分
▻https://github.com/alantsai
▻Email Address
▻主要使用的email地址
▻Password
▻密碼

11. 申請github - 帳號類型
11
▰預設
▻Unlimited Public Repositories for free
▰Continue

12. 申請github – 小小問卷
12

13. 申請github – 建立完成
13
▰Profile 頁面
▻https://github.com/{username}
▰可以看到目前情況

14. Github
重要設定
14

15. Github設定 – 兩步驗證
15
▰除了輸入帳號密碼還要輸入一個簡訊碼
▰不用擔心帳號密碼被偷
▰Setting -> Security -> Two-factor Authentication

16. Github設定 – 兩步驗證
16
▰可以用一個app或者寄送sms

17. Github設定 – 兩步驗證 - SMS
17
▰輸入完電話
▰得到簡訊
▰把簡訊碼放進去

18. Github設定 – 兩步驗證 – 備用碼
18
▰如果手機不在
▰可以輸入備用碼
▰一定要點過：Download、Print、Copy
▰下面綠色才可以點
▰啟用完成

19. Github設定 – 兩步驗證 – 結束
19
▰2步驗證的碼可以加另外一隻手機
▰或者結合Facebook

20. Github設定 - email
20
▰還記得commit之前有設定姓名和email
▰上github的時候如何把email和你設定的結合
▰Setting -> Emails

21. Github
建立一個repo
21

22. 建立Repo
22

23. 建立Repo – 輸入名稱
23

24. 建立repo – 完成
24

25. 把內容送到Repo
25
▰把修改送到repo
▻送上去就是 push（推送）
▻抓下來就是 pull（拉取）

26. push
26
▰選擇
▻管理
▻把網址貼進去
▻新增/儲存

27. push
27

28. Push – 驗證帳號密碼
28
▰輸入帳號密碼
▰假設有兩步驗證會跳出來
▰輸入從手機得到的驗證碼

29. 兩步驗證自動建立token
29
▰剛剛輸入完其實在github有建立了一個token
▰Settings -> Personal Access Token
▰把它delete掉就沒辦法push了

30. Windows記錄Token的位置
30
▰控制台（Control Panel）-> 憑證管理（Credential Manager）

31. Push 完成
31

32. Clone 從線上repo開始
32

33. 一個專案至少要有的內容
33

34. 一個專案至少需要的東西
34
▰ReadMe.md
▻介紹目的和如何使用
▰LICENSE.md
▻授權模式 - https://choosealicense.com/
▰.gitignore
▻忽略檔案
▰其他檔案可以參考：
▻https://github.com/alantsai/mhat-common-boilerplate-repo

35. 加入LICENSE.md
35

36. Pull 把修改抓下來
36

37. 從Repo取得修改
37
▰當github上面有修改
▰可以透過pull把內容抓下來
▰例子
▻在github加入License檔案
▻透過pull把內容抓下來

38. TortoiseGit pull
38

39. Pull之前
39
▰記得保持乾淨
▻不要有任何修改

40. Pull之後
40
▰可能出現衝突
▰不過目前沒有和人一起協同
▰不太可能發生
▰進階在介紹

41. Markdown
41

42. Markdown是什麼
42
▰網頁都是html
▻但是寫起來繁瑣
▻<strong>重要</strong> vs **重要**
▰Markdown 最終還是轉換成為html
▻只是更容易撰寫
▰早期論壇提供 BBCode
▻一樣概念
▻<strong>重要</strong> vs [b]重要[/b]

43. ReadMe.md
43
▰每個專案都應該要有的檔案
▻目的
▻如何使用
▻License資訊
▻貢獻者

44. 安裝Visual Studio Code
44
▰強大的編輯器
▰https://code.visualstudio.com/Download
▰有整合git – 方便確認修改
▰打開Markdown 預覽來看到效果

45. 標題
45
▰# + 空格 {內容} – 標題1
▰幾個#字號就是標題幾
▰例如
# h1標籤
## h2標籤
###### h6標籤

46. 文字
46
▰直接輸入
▰空完整一行表示另外一段
▰假設同一段但是要斷行
▻空一行，然後在上一行最後面加2個空白(.代表空白)
這是第一段
這是第二段
這是第一段..
這也是第一段

47. 文字格式
47
▰粗體
▻用 兩個底線或者兩個星號包住
▰斜體
▻用 一個底線或者一個星號包住
**{內容}**
__{內容}__
*{內容}*
_{內容}_

48. 列表式
48
▰數字式
▻數字加一個點
▻假設有縮排，加4個空白
▰符號式
▻符號 * 、-、+
1. 第一個內容
2. 第二個內容
1. 縮排
2. 縮排2
- 第一個
* 第二個
+ 第三個

49. 鏈接
49
▰[鏈接文字](實際點下去到的鏈接)
[google](http://www.google.com)
[google](/abc.md)

50. 圖片
50
▰
![markdown logo ](https://github.com/adam-p/markdown-
here/raw/master/src/common/images/icon48.png)

51. 分割線
51
▰3個以上減號
---

52. 程式碼
52
▰文字的一段 用 `` （鍵盤1的旁邊）包住
▰一段程式碼 用 ```{語言} 包住
程式碼 `aaa` 作用
``` csharp
Public abc …
```

53. 引言
53
▰針對某些內容做回復
▰前面加上大於(>)
> 回復
> 回復
對於上面的內容

54. Markdown 參考資料
54
▰https://github.com/adam-p/markdown-
here/wiki/Markdown-Cheatsheet
▰https://guides.github.com/features/mastering-
markdown/
▰Github Flavour Markdown（GFMD）
▻擴增一些其他，例如table，或者 目錄（TOC）

55. 專題 – 打造自己的線上履歷
55

56. 目的
56
▰建立一個頁面能夠加入關於自己的資訊
▰可以分享給他人去看
▰運用版控概念

57. 最後呈現效果
57
▰https://alantsai-samples.github.io/Orbit-Theme/
▰請注意，範例的內容不一定都是真實的哦
▻僅供參考
▻例如：學歷，我不是逢甲畢業的哦

58. 如何開始
58
▰Fork專案
▻https://github.com/alantsai-samples/Orbit-Theme

59. 建立你的issue
59
▰頭像
▰名稱
▰聯絡資訊
▰學歷
▰語言和興趣
▰自我介紹
▰工作經驗
▰專案
▰技術能力

60. 開始修改
60
▰從
▻Index.html
▰一個部分一個部分調整
▰最後網址
▻https://{username}.github.io/{reponame}/

61. 頭像、名稱、頭銜
61
Imagesprofie.png 代表頭像的位置 – 換掉即可
名稱 兩個地方
第二個下面則是頭銜

62. 聯絡資訊
62
▰每一個li就是一個聯絡資訊
▰裡面的 <i> 則是icon的設定（更多參考 fontawesome）

63. 學歷、語言和興趣
63
▰學歷 – 多個就可以複製修改框起來處
▰語言 – 每一個 li就是一個語言
▰興趣 – 每一個 li就是一筆

64. 自我介紹
64
▰這邊是用列表的方式列出每個重點
▰可以搭配其他html標籤

65. 工作經驗
65
1. 工作標題
2. 期間
3. 公司
4. 詳細描述

66. 專案
66
▰Class=“project-title” – 專案的標題
▰Class=“project-tagline” – 專案的副標

67. 技術能力
67
1. 技術名稱
2. 技術能力的百分比 – 影響條狀呈現

68. 更改色系
68
▰修改 styles.css的檔案來改色系 ▰總共有 6 種

69. 結語
69

70. 開始使用版控
70
▰這兩天讓大家有感
▻開始會希望用版控管理文件
▰了解可以送到遠端
▻同等於一個備份
▰歷史的重要性
▻以史為鏡，可以知興替

71. 接下來
71
▰碰到了30%左右的功能
▰最強大的功能 - 分支尚未接觸
▻開另外一個時間線
▰和外部如何做協同工作
▻協同的模式

72. 72
Q&A
感謝大家
任何問題都可以在
contact@alantsai.net
FB、部落格
找到我

73. 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
73