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.

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

514 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

×