電子內容管理
使用Git 與 Github 2
By Alan Tsai 2017-07-05
最好展示能力的平台,讓老闆在面試前就了解你的能力
可不是只有程式設計師才用GITHUB
關於我
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
Agenda
3
▰介紹Github
▻註冊帳號
▻基本功能介紹
▰建立一個repo
▻Push
▻Pull
▻Markdown
▰建立一個線上CV
Github
展現自我能力的平台
4
Github
5
▰https://github.com/
▰從2011創辦
▻希望有個地方提供大家可以放repo
▰整個git火紅起來
▰吉祥物
▻Octocat(章魚貓)
Github好處
6
▰學習展現自我的平台
▻180天每天建立一個網站
▰開放原始碼
▻找到資源
▻請大家幫你一起檢視
▻要注意別把有版權疑慮的東西放上去
Github帳號模式
7
▰如果是公開的repo
▻完全免費
▰假設要有非公開(私人)的repo
▻最低從每個月7美金開始
▻學生期間有給你免費用7美金版本
▻申請方式
▰https://github.com/pricing
有沒有免費但是有提供私人repo
8
▰Visual Studio Team Service
▻微軟帳號
▻5人以下免費
▻搭配看板和敏捷 – 最好的免費整合
▰GitLab
▻不限制人數免費
▻可以自己架設
▰Bitbucket
▻5人以下免費
Github
建立帳號
9
申請github – 帳號密碼
10
▰https://github.com/join?source=header
▰輸入內容
▻Username
▻使用者名稱 – 會成為網址一部分
▻https://github.com/alantsai
▻Email Address
▻主要使用的email地址
▻Password
▻密碼
申請github - 帳號類型
11
▰預設
▻Unlimited Public Repositories for free
▰Continue
申請github – 小小問卷
12
申請github – 建立完成
13
▰Profile 頁面
▻https://github.com/{username}
▰可以看到目前情況
Github
重要設定
14
Github設定 – 兩步驗證
15
▰除了輸入帳號密碼還要輸入一個簡訊碼
▰不用擔心帳號密碼被偷
▰Setting -> Security -> Two-factor Authentication
Github設定 – 兩步驗證
16
▰可以用一個app或者寄送sms
Github設定 – 兩步驗證 - SMS
17
▰輸入完電話
▰得到簡訊
▰把簡訊碼放進去
Github設定 – 兩步驗證 – 備用碼
18
▰如果手機不在
▰可以輸入備用碼
▰一定要點過:Download、Print、Copy
▰下面綠色才可以點
▰啟用完成
Github設定 – 兩步驗證 – 結束
19
▰2步驗證的碼可以加另外一隻手機
▰或者結合Facebook
Github設定 - email
20
▰還記得commit之前有設定姓名和email
▰上github的時候如何把email和你設定的結合
▰Setting -> Emails
Github
建立一個repo
21
建立Repo
22
建立Repo – 輸入名稱
23
建立repo – 完成
24
把內容送到Repo
25
▰把修改送到repo
▻送上去就是 push(推送)
▻抓下來就是 pull(拉取)
push
26
▰選擇
▻管理
▻把網址貼進去
▻新增/儲存
push
27
Push – 驗證帳號密碼
28
▰輸入帳號密碼
▰假設有兩步驗證會跳出來
▰輸入從手機得到的驗證碼
兩步驗證自動建立token
29
▰剛剛輸入完其實在github有建立了一個token
▰Settings -> Personal Access Token
▰把它delete掉就沒辦法push了
Windows記錄Token的位置
30
▰控制台(Control Panel)-> 憑證管理(Credential Manager)
Push 完成
31
Clone 從線上repo開始
32
一個專案至少要有的內容
33
一個專案至少需要的東西
34
▰ReadMe.md
▻介紹目的和如何使用
▰LICENSE.md
▻授權模式 - https://choosealicense.com/
▰.gitignore
▻忽略檔案
▰其他檔案可以參考:
▻https://github.com/alantsai/mhat-common-boilerplate-repo
加入LICENSE.md
35
Pull 把修改抓下來
36
從Repo取得修改
37
▰當github上面有修改
▰可以透過pull把內容抓下來
▰例子
▻在github加入License檔案
▻透過pull把內容抓下來
TortoiseGit pull
38
Pull之前
39
▰記得保持乾淨
▻不要有任何修改
Pull之後
40
▰可能出現衝突
▰不過目前沒有和人一起協同
▰不太可能發生
▰進階在介紹
Markdown
41
Markdown是什麼
42
▰網頁都是html
▻但是寫起來繁瑣
▻<strong>重要</strong> vs **重要**
▰Markdown 最終還是轉換成為html
▻只是更容易撰寫
▰早期論壇提供 BBCode
▻一樣概念
▻<strong>重要</strong> vs [b]重要[/b]
ReadMe.md
43
▰每個專案都應該要有的檔案
▻目的
▻如何使用
▻License資訊
▻貢獻者
安裝Visual Studio Code
44
▰強大的編輯器
▰https://code.visualstudio.com/Download
▰有整合git – 方便確認修改
▰打開Markdown 預覽來看到效果
標題
45
▰# + 空格 {內容} – 標題1
▰幾個#字號就是標題幾
▰例如
# h1標籤
## h2標籤
###### h6標籤
文字
46
▰直接輸入
▰空完整一行表示另外一段
▰假設同一段但是要斷行
▻空一行,然後在上一行最後面加2個空白(.代表空白)
這是第一段
這是第二段
這是第一段..
這也是第一段
文字格式
47
▰粗體
▻用 兩個底線或者兩個星號包住
▰斜體
▻用 一個底線或者一個星號包住
**{內容}**
__{內容}__
*{內容}*
_{內容}_
列表式
48
▰數字式
▻數字加一個點
▻假設有縮排,加4個空白
▰符號式
▻符號 * 、-、+
1. 第一個內容
2. 第二個內容
1. 縮排
2. 縮排2
- 第一個
* 第二個
+ 第三個
鏈接
49
▰[鏈接文字](實際點下去到的鏈接)
[google](http://www.google.com)
[google](/abc.md)
圖片
50
▰![圖片替代文字](圖片位置)
![markdown logo ](https://github.com/adam-p/markdown-
here/raw/master/src/common/images/icon48.png)
![markdown logo ](/image.png)
分割線
51
▰3個以上減號
---
程式碼
52
▰文字的一段 用 `` (鍵盤1的旁邊)包住
▰一段程式碼 用 ```{語言} 包住
程式碼 `aaa` 作用
``` csharp
Public abc …
```
引言
53
▰針對某些內容做回復
▰前面加上大於(>)
> 回復
> 回復
對於上面的內容
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
目的
56
▰建立一個頁面能夠加入關於自己的資訊
▰可以分享給他人去看
▰運用版控概念
最後呈現效果
57
▰https://alantsai-samples.github.io/Orbit-Theme/
▰請注意,範例的內容不一定都是真實的哦
▻僅供參考
▻例如:學歷,我不是逢甲畢業的哦
如何開始
58
▰Fork專案
▻https://github.com/alantsai-samples/Orbit-Theme
建立你的issue
59
▰頭像
▰名稱
▰聯絡資訊
▰學歷
▰語言和興趣
▰自我介紹
▰工作經驗
▰專案
▰技術能力
開始修改
60
▰從
▻Index.html
▰一個部分一個部分調整
▰最後網址
▻https://{username}.github.io/{reponame}/
頭像、名稱、頭銜
61
Imagesprofie.png 代表頭像的位置 – 換掉即可
名稱 兩個地方
第二個下面則是頭銜
聯絡資訊
62
▰每一個li就是一個聯絡資訊
▰裡面的 <i> 則是icon的設定(更多參考 fontawesome)
學歷、語言和興趣
63
▰學歷 – 多個就可以複製修改框起來處
▰語言 – 每一個 li就是一個語言
▰興趣 – 每一個 li就是一筆
自我介紹
64
▰這邊是用列表的方式列出每個重點
▰可以搭配其他html標籤
工作經驗
65
1. 工作標題
2. 期間
3. 公司
4. 詳細描述
專案
66
▰Class=“project-title” – 專案的標題
▰Class=“project-tagline” – 專案的副標
技術能力
67
1. 技術名稱
2. 技術能力的百分比 – 影響條狀呈現
更改色系
68
▰修改 styles.css的檔案來改色系 ▰總共有 6 種
結語
69
開始使用版控
70
▰這兩天讓大家有感
▻開始會希望用版控管理文件
▰了解可以送到遠端
▻同等於一個備份
▰歷史的重要性
▻以史為鏡,可以知興替
接下來
71
▰碰到了30%左右的功能
▰最強大的功能 - 分支尚未接觸
▻開另外一個時間線
▰和外部如何做協同工作
▻協同的模式
72
Q&A
感謝大家
任何問題都可以在
contact@alantsai.net
FB、部落格
找到我
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

電子內容管理 使用Git 與 github 2