Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
使 ⽤用 G I T
淺 談 版 本 控 制 與 網 ⾴頁 部 署
銘 傳 ⼤大 學 - 資 通 訊 軟 體 創 新 ⼈人 才 推 升 推 廣 計 畫 短 期 課 程
痞客邦 PIXNET - W i n Yu
Platform Softwar...
余 晟 麟 Win Yu
關 於 我
Platform Software Engineer
kylinyu.win
♘ 經 歷
痞客邦 PIXNET
IBM Taiwan
Engineer Intern
♘ 學 歷
國立臺灣師範⼤大學
國立⾼高...
https://www.slideshare.net/kylinfish/build-personal-website-via-hugo
上⼀一次,我們產⽣生了了⾃自⼰己的網站
⽬目 錄
• 為何要使⽤用版本控制?
• 從設定開始 GIT
• 基本教學
• 什什麼是 GitHub?
• 如何透過 GitHub 部署個⼈人網⾴頁
為 何 要 使 ⽤用 版 本 控 制 ?
為 什什 麼 要 使 ⽤用 版 本 控 制 ?
• 新增/修改不同版本的檔案⽂文件
• ⽅方便便管理理,容易易追本朔源
• 多⼈人協同合作管理理
• 備份
Google 雲端硬碟的 Office 應⽤用
⼀一 般 的 版 本 控 制 應 ⽤用
GitHub 上的檔案管理理
程 式 碼 中 的 版 本 控 制
什什 麼 是 G I T ?
• 現在軟體⼯工程師必備技能
• 分散式版本控制系統
• 本地跟遠端可以分開儲存管理理
• 分散式儲存架構,提供本地(機)儲存
⽤用 S V N 與 G I T 來來 說 明 分 散 式 差 異異
ref. https://www.teaching-materials.org/github-desktop/github
S V N - 集 中 式
ref. http://thepilcrow.net/explaining-basic-concepts-git-and-github/
G I T - 分 散 式
ref. http://thepilcrow.net/explaining-basic-concepts-git-and-github/
從 設 定 開 始
V I M 為 G I T 預 設 編 輯 器
$ v i m t e s t . t x t 以 v i m 建 立 ( 編 輯 ) ⼀一 個 檔 案 名 稱 為 t e x t . t x t
• 任務⼀一:使⽤用 vim 撰寫⼀一段簡易易...
V I M 的 延 伸 指 令 練 習
Command 模式
: 進入輸入指令模式
:wq 存檔後離開
:w! 強制存檔
Normal 模式
hjkl 移動游標
gg 游標移動到第⼀一⾏行行
G 游標移動到最後⼀一⾏行行
Visual 模式
v...
進 入 正 題 - 從 設 定 開 始
1. 下載 git 基本設定到你的家⽬目錄
2. 設定你的Email (橘⾊色的字串串記得改成你的資料喔)
3. 以及你的 username (同上)
$ c d ~ /
$ g i t c o n f ...
實 際 演 練 前 把 這 張 圖 的 關 係 印 在 腦 中
ref. http://gitbook.tw/chapters/using-git/working-staging-and-repository.html
⽤用 T RY G I T 來來 預 熱 吧 !
• https://try.github.io
初 始 化 儲 存 庫 - g i t i n i t
$ m k d i r w o r k s h o p
$ c d w o r k s h o p
$ g i t i n i t
建 立 w o r k s h o p ⽬目 錄
切 換...
檢 查 檔 案 狀狀 態 - g i t s t a t u s
$ e c h o " H e l l o Wo r l d " > h e l l o _ w o r l d . t x t
$ g i t s t a t u s
將 雙 ...
添 加 欲 提 交 的 檔 案 - g i t a d d
$ g i t a d d h e l l o _ w o r l d . t x t
$ g i t s t a t u s
使 ⽤用 a d d 來來 把 檔 案 加 入 s t ...
檔 案 狀狀 態
提 交 修 改 - g i t c o m m i t
$ g i t c o m m i t - m " a d d h e l l o _ w o r l d . t x t "
$ g i t l o g
針 對 這 次 提 交 做 訊 ...
ref. http://mropengate.blogspot.tw/2015/04/git-github.html
什什 麼 是 G i t H u b ?
G i t H u b
• GitHub 以 Git 為核⼼心的線上協作平臺
• ⽤用來來存放以 Git 操作的專案 庫
• 讓開發者能更更有效率的進⾏行行版本控制
• 提供線上合作、討論專案
• GitHub 分享程式碼,亦即所謂的開源
• ...
可 以 不 ⽤用 G i t H u b 管 理理 嗎 ?
• 可以的
• Bitbucket 允許 free private repository
可 以 不 ⽤用 G i t H u b 管 理理 嗎 ?
• 可以的
• ⾃自⾏行行架設 Git Server 管理理
如 何 透 過 G i t H u b 部 署 個 ⼈人 網 ⾴頁
添 加 S S H K e y 來來 進 ⾏行行 G i t H u b 授 權
• Git Server 會選擇使⽤用 SSH Public Key 來來進⾏行行授權
• 每個使⽤用者都必須提供⼀一個公開⾦金金鑰⽤用於授權
• 接著來來學著產...
產 ⽣生 S S H K e y
$ r m - r f ~ / . s s h
$ s s h - k e y g e n - t r s a - b 4 0 9 6 - C " e m a i l a d d re s s "
$ e v ...
添 加 ⾄至 G i t H u b
1.
2.
3.
4.
貼上後取個名字,⽅方便便⽇日後管理理
這個 key 是從哪個機器來來操作的
測 試 S S H K e y 能 否 與 G i t H u b 連 線
$ s s h - T g i t @ g i t h u b . c o m
使 ⽤用 G i t H u b 部 署 個 ⼈人 網 站
⽅方法⼀一:
建立⼀一個 <username>.github.io 的 repository 並將網⾴頁的入⼝口點
(index.html) 放在根⽬目錄推上 GitHub
⽅方法⼆二...
在 G i t H u b 上 建 立 新 的 專 案
在 G i t H u b 上 建 立 2 個 新 的 專 案
<username>.github.io hugo_blog
記得把黃⾊色字串串改成⾃自⼰己的帳號!!
上 傳 到 h u g o _ b l o g
$ r m - r f p u b l i c 如 果 你 有 產 ⽣生 過 網 ⾴頁 ⽬目 錄 請 先 刪 除
$ g i t i n i t
$ g i t a d d - A
$ g i t...
$ g i t s u b m o d u l e a d d g i t @ g i t h u b . c o m : < u s e r n a m e > / < u s e r n a m e > . g i t h u b . i ...
你 成 功 了了 嗎 ! ?
瀏覽你的 https://<username>.github.io
專 案 狀狀 況
h u g o _ b l o g
< u s e r n a m e > . g i t h u b . i o
Hugo 專案,這裡開發網⾴頁的內容、部落落格⽂文章
產⽣生後的網⾴頁放在這,你的個⼈人網⾴頁伺服器
來來 練 習 g i t p u l l 拉 檔 案
• 練習在非本地的位置做提交,體驗分散式的情境
• 於 GitHub 上新增⼀一個檔案練習模擬
點我
在 GitHub 上使⽤用新增檔案並且提交,
使⽤用情境其實跟你在本機操作是相同的概念念
接 著 使 ⽤用 g i t p u l l 來來 同 步 檔 案
$ g i t p u l l
從 遠 端 把 儲 存 在 g i t s e r v e r 上 的 資 料 拉 下 來來 本 地 端
• 在多⼈人協作的情況下,⼤大家在各⾃...
⼩小 總 結
• GIT 易易學難精,⽤用法其多
• 延伸學習可以探索分⽀支 (branch) 的⽤用法
• 不同的公司環境使⽤用的⽅方法也不盡相同
• 多看看不同的網路路教學
• 回想⼀一下所有指令做了了什什麼及背後的精神
推 薦 - 為 ⾃自 ⼰己 學 G I T
http://gitbook.tw/
Thank You.
kylinyu.win
把履歷寄過來來吧!
📧 techjob@pixnet.tw
Upcoming SlideShare
Loading in …5
×

使用 Git 淺談版本控制與網頁部署

644 views

Published on

1. https://www.slideshare.net/kylinfish/build-personal-website-via-hugo
2. deploy your hugo project to GitHub

Published in: Software
  • Be the first to comment

使用 Git 淺談版本控制與網頁部署

  1. 1. 使 ⽤用 G I T 淺 談 版 本 控 制 與 網 ⾴頁 部 署 銘 傳 ⼤大 學 - 資 通 訊 軟 體 創 新 ⼈人 才 推 升 推 廣 計 畫 短 期 課 程 痞客邦 PIXNET - W i n Yu Platform Software Engineer
  2. 2. 余 晟 麟 Win Yu 關 於 我 Platform Software Engineer kylinyu.win ♘ 經 歷 痞客邦 PIXNET IBM Taiwan Engineer Intern ♘ 學 歷 國立臺灣師範⼤大學 國立⾼高雄科技應⽤用⼤大學 M.S. in Computer Science. B.S. in Computer Science.
  3. 3. https://www.slideshare.net/kylinfish/build-personal-website-via-hugo 上⼀一次,我們產⽣生了了⾃自⼰己的網站
  4. 4. ⽬目 錄 • 為何要使⽤用版本控制? • 從設定開始 GIT • 基本教學 • 什什麼是 GitHub? • 如何透過 GitHub 部署個⼈人網⾴頁
  5. 5. 為 何 要 使 ⽤用 版 本 控 制 ?
  6. 6. 為 什什 麼 要 使 ⽤用 版 本 控 制 ? • 新增/修改不同版本的檔案⽂文件 • ⽅方便便管理理,容易易追本朔源 • 多⼈人協同合作管理理 • 備份
  7. 7. Google 雲端硬碟的 Office 應⽤用 ⼀一 般 的 版 本 控 制 應 ⽤用
  8. 8. GitHub 上的檔案管理理 程 式 碼 中 的 版 本 控 制
  9. 9. 什什 麼 是 G I T ? • 現在軟體⼯工程師必備技能 • 分散式版本控制系統 • 本地跟遠端可以分開儲存管理理 • 分散式儲存架構,提供本地(機)儲存
  10. 10. ⽤用 S V N 與 G I T 來來 說 明 分 散 式 差 異異 ref. https://www.teaching-materials.org/github-desktop/github
  11. 11. S V N - 集 中 式 ref. http://thepilcrow.net/explaining-basic-concepts-git-and-github/
  12. 12. G I T - 分 散 式 ref. http://thepilcrow.net/explaining-basic-concepts-git-and-github/
  13. 13. 從 設 定 開 始
  14. 14. V I M 為 G I T 預 設 編 輯 器 $ v i m t e s t . t x t 以 v i m 建 立 ( 編 輯 ) ⼀一 個 檔 案 名 稱 為 t e x t . t x t • 任務⼀一:使⽤用 vim 撰寫⼀一段簡易易的程式碼或任意字串串並且存擋
  15. 15. V I M 的 延 伸 指 令 練 習 Command 模式 : 進入輸入指令模式 :wq 存檔後離開 :w! 強制存檔 Normal 模式 hjkl 移動游標 gg 游標移動到第⼀一⾏行行 G 游標移動到最後⼀一⾏行行 Visual 模式 v 字元選取 V 單⾏行行選取 ESC 可以回到 Normal 模式 ref. http://gitbook.tw/chapters/command-line/vim-introduction.html
  16. 16. 進 入 正 題 - 從 設 定 開 始 1. 下載 git 基本設定到你的家⽬目錄 2. 設定你的Email (橘⾊色的字串串記得改成你的資料喔) 3. 以及你的 username (同上) $ c d ~ / $ g i t c o n f i g - - g l o b a l u s e r. e m a i l " y o u re m a i l " $ g i t c o n f i g - - g l o b a l u s e r. n a m e " y o u r n a m e " $ c u r l - O h t t p s : / / r a w. g i t h u b u s e rc o n t e n t . c o m / k y l i n f i s h / d o t v i m / m a s t e r / . g i t c o n f i g
  17. 17. 實 際 演 練 前 把 這 張 圖 的 關 係 印 在 腦 中 ref. http://gitbook.tw/chapters/using-git/working-staging-and-repository.html
  18. 18. ⽤用 T RY G I T 來來 預 熱 吧 ! • https://try.github.io
  19. 19. 初 始 化 儲 存 庫 - g i t i n i t $ m k d i r w o r k s h o p $ c d w o r k s h o p $ g i t i n i t 建 立 w o r k s h o p ⽬目 錄 切 換 ⾄至 w o r k s h o p ⽬目 錄 做 g i t 專 案 初 始 化 通 常 我 們 會 直 接 稱 呼 R E P O S I T O RY 😆
  20. 20. 檢 查 檔 案 狀狀 態 - g i t s t a t u s $ e c h o " H e l l o Wo r l d " > h e l l o _ w o r l d . t x t $ g i t s t a t u s 將 雙 引 號 字 串串 內 的 ⽂文 字 輸 出 到 檔 名 為 h e l l o _ w o r l d . t x t 查 看 g i t 專 案 ⽬目 錄 底 下 檔 案 狀狀 態
  21. 21. 添 加 欲 提 交 的 檔 案 - g i t a d d $ g i t a d d h e l l o _ w o r l d . t x t $ g i t s t a t u s 使 ⽤用 a d d 來來 把 檔 案 加 入 s t a g i n g 區 等 待 c o m m i t 做 提 交
  22. 22. 檔 案 狀狀 態
  23. 23. 提 交 修 改 - g i t c o m m i t $ g i t c o m m i t - m " a d d h e l l o _ w o r l d . t x t " $ g i t l o g 針 對 這 次 提 交 做 訊 息 記 錄 查 看 提 交 過 的 L o g 紀 錄
  24. 24. ref. http://mropengate.blogspot.tw/2015/04/git-github.html 什什 麼 是 G i t H u b ?
  25. 25. G i t H u b • GitHub 以 Git 為核⼼心的線上協作平臺 • ⽤用來來存放以 Git 操作的專案 庫 • 讓開發者能更更有效率的進⾏行行版本控制 • 提供線上合作、討論專案 • GitHub 分享程式碼,亦即所謂的開源 • 同時也是開發者最好的軟體履歷 • 免費使⽤用, private repository 要付費
  26. 26. 可 以 不 ⽤用 G i t H u b 管 理理 嗎 ? • 可以的 • Bitbucket 允許 free private repository
  27. 27. 可 以 不 ⽤用 G i t H u b 管 理理 嗎 ? • 可以的 • ⾃自⾏行行架設 Git Server 管理理
  28. 28. 如 何 透 過 G i t H u b 部 署 個 ⼈人 網 ⾴頁
  29. 29. 添 加 S S H K e y 來來 進 ⾏行行 G i t H u b 授 權 • Git Server 會選擇使⽤用 SSH Public Key 來來進⾏行行授權 • 每個使⽤用者都必須提供⼀一個公開⾦金金鑰⽤用於授權 • 接著來來學著產⽣生 SSH Key 並添加到 GitHub 中
  30. 30. 產 ⽣生 S S H K e y $ r m - r f ~ / . s s h $ s s h - k e y g e n - t r s a - b 4 0 9 6 - C " e m a i l a d d re s s " $ e v a l " $ ( s s h - a g e n t - s ) " $ c a t ~ / . s s h / i d _ r s a . p u b 利利 ⽤用 s s k - k e y g e n 產 ⽣生 r s a ⾦金金 鑰 , 把 e m a i l a d d re s s 改 成 你 的 E m a i l 網 址 先 確 保 你 的 電 腦 沒 有 先 前 的 ⼈人 ⽤用 過 , 這 裡 我 們 先 刪 除 之 前 的 鑰 匙 確 保 練 習 順 暢 確 認 s s h - a g e n t 有 啟 動 成 功 印 出 你 的 ⾦金金 鑰 後 , 從 ⼩小 ⿊黑 窗 ⽤用 滑 鼠 複 製 鑰 匙 的 內 容
  31. 31. 添 加 ⾄至 G i t H u b 1. 2. 3. 4. 貼上後取個名字,⽅方便便⽇日後管理理 這個 key 是從哪個機器來來操作的
  32. 32. 測 試 S S H K e y 能 否 與 G i t H u b 連 線 $ s s h - T g i t @ g i t h u b . c o m
  33. 33. 使 ⽤用 G i t H u b 部 署 個 ⼈人 網 站 ⽅方法⼀一: 建立⼀一個 <username>.github.io 的 repository 並將網⾴頁的入⼝口點 (index.html) 放在根⽬目錄推上 GitHub ⽅方法⼆二: 或者將網⾴頁內容放置分⽀支名稱為 gh-pages,推上 GitHub 就可以 當作靜態網⾴頁的伺服器 只⽀支援靜態網站 只⽀支援 Git 操作,不能⽤用 FTP 上傳 檔案都是公開的,請不要放置敏感訊息
  34. 34. 在 G i t H u b 上 建 立 新 的 專 案
  35. 35. 在 G i t H u b 上 建 立 2 個 新 的 專 案 <username>.github.io hugo_blog 記得把黃⾊色字串串改成⾃自⼰己的帳號!!
  36. 36. 上 傳 到 h u g o _ b l o g $ r m - r f p u b l i c 如 果 你 有 產 ⽣生 過 網 ⾴頁 ⽬目 錄 請 先 刪 除 $ g i t i n i t $ g i t a d d - A $ g i t c o m m i t - m " i n i t i a l b l o g v e r s i o n " 對 你 的 H u g o 專 案 ⽬目 錄 做 g i t 初 始 化 把 產 ⽣生 的 所 有 項 ⽬目 都 加 進 t r a c k i n g 提 交 並 撰 寫 訊 息 $ g i t re m o t e a d d o r i g i n g i t @ g i t h u b . c o m / < u s e r n a m e > / h u g o _ b l o g . g i t 指 定 你 的 遠 端 儲 存 位 置 , < u s e r n a m e > 改 成 你 的 帳 號 $ g i t p u s h - u o r i g i n m a s t e r 第 ⼀一 次 提 交 指 定 o r i g i n 後 把 本 地 端 的 檔 案 推 上 遠 端 伺 服 器 上 做 提 交
  37. 37. $ g i t s u b m o d u l e a d d g i t @ g i t h u b . c o m : < u s e r n a m e > / < u s e r n a m e > . g i t h u b . i o . g i t p u b l i c 增 加 ⼀一 個 s u b m o d u l e , 從 h u g o _ b l o g 底 下 的 p u b l i c 到 < u s e r n a m e > . g i t h u b . i o 的 re p o s i t o r y 裡 ⾯面 $ c u r l - O h t t p s : / / r a w. g i t h u b u s e rc o n t e n t . c o m / k y l i n f i s h / h u g o _ w o r k s h o p / m a s t e r / d e p l o y. s h & & c h m o d + x d e p l o y. s h 下 載 ⼀一 個 ⽤用 來來 部 署 專 ⽤用 的 設 定 檔 ( 已 經 幫 你 寫 好 了了 ) $ . / d e p l o y. s h " Yo u r o p t i o n a l c o m m i t m e s s a g e " 試 著 執 ⾏行行 這 個 指 令 進 ⾏行行 部 署 ( d e p l o y ) , m e s s a g e 也 可 以 不 ⽤用 寫
  38. 38. 你 成 功 了了 嗎 ! ? 瀏覽你的 https://<username>.github.io
  39. 39. 專 案 狀狀 況 h u g o _ b l o g < u s e r n a m e > . g i t h u b . i o Hugo 專案,這裡開發網⾴頁的內容、部落落格⽂文章 產⽣生後的網⾴頁放在這,你的個⼈人網⾴頁伺服器
  40. 40. 來來 練 習 g i t p u l l 拉 檔 案 • 練習在非本地的位置做提交,體驗分散式的情境 • 於 GitHub 上新增⼀一個檔案練習模擬 點我
  41. 41. 在 GitHub 上使⽤用新增檔案並且提交, 使⽤用情境其實跟你在本機操作是相同的概念念
  42. 42. 接 著 使 ⽤用 g i t p u l l 來來 同 步 檔 案 $ g i t p u l l 從 遠 端 把 儲 存 在 g i t s e r v e r 上 的 資 料 拉 下 來來 本 地 端 • 在多⼈人協作的情況下,⼤大家在各⾃自的本地端儲存後, 利利⽤用 git push 提交到 git server 上,再透過 git pull 把⼤大家推上去檔案的拉下來來進⾏行行同步 $ g i t l o g 查 看 p u l l 後 的 本 地 端 紀 錄 吧
  43. 43. ⼩小 總 結 • GIT 易易學難精,⽤用法其多 • 延伸學習可以探索分⽀支 (branch) 的⽤用法 • 不同的公司環境使⽤用的⽅方法也不盡相同 • 多看看不同的網路路教學 • 回想⼀一下所有指令做了了什什麼及背後的精神
  44. 44. 推 薦 - 為 ⾃自 ⼰己 學 G I T http://gitbook.tw/
  45. 45. Thank You. kylinyu.win
  46. 46. 把履歷寄過來來吧! 📧 techjob@pixnet.tw

×