狠狠撸

電子內容管理
使用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 – 帳號密碼
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設定 – 兩步驗證
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

建立Repo – 輸入名稱
23

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

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

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

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

Windows記錄Token的位置
30
?控制台（Control Panel）-> 憑證管理（Credential 惭补苍补驳别谤）

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

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

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

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

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

Markdown是什麼
42
?網頁都是html
?但是寫起來繁瑣
?重要 vs **重要**
?Markdown 最終還是轉換成為html
?只是更容易撰寫
?早期論壇提供 BBCode
?一樣概念
?重要 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就是一個聯絡資訊
?裡面的 則是icon的設定（更多參考蹿辞苍迟补飞别蝉辞尘别）

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

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

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

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

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

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

開始使用版控
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 狠狠撸sCarnival
? Photographs by Startup Stock Photos
73

狠狠撸

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

Recommended

More Related Content

What's hot (20)

Similar to 電子內容管理使用Git 與 github 2 (17)

More from Alan Tsai (20)

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

狠狠撸

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

Recommended

More Related Content

What's hot (20)

Similar to 電子內容管理 使用Git 與 github 2 (17)

More from Alan Tsai (20)

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

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

Similar to 電子內容管理使用Git 與 github 2 (17)

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