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 與 github 2

959 views

Published on

逢甲大學暑假期間逢甲大學校輔室與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

Published in: Software
  • Be the first to comment

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

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

×