iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 3

【D3 - 主委加碼】版本控制 -- Git

Git: 哈囉大家好我是一個版本控制系統...
: 等等..版本是甚麼? 控制是要控制甚麼?

預備

  1. 創立一個github帳號~ https://github.com/
  2. 下載git~ https://git-scm.com/

版本是甚麼?

的確,版本控制系統的英文是「Version Control System」,所以看的出來他是直接翻譯的,其實也不是翻得不好,只是對於初學者而言怎麼會有機會知道寫code還要顧慮版本!?
(先用這張圖來解釋甚麼是版本)
什麼是 Git?為什麼要學習它?
出處: https://gitbook.tw/chapters/introduction/what-is-git.html/ 什麼是 Git?為什麼要學習它?

可以看得出來版本其實就是你的code的進化史,今天增加了甚麼? 昨天修改了甚麼都可以一覽無疑~ 或許你可能認為這樣只是存檔點的功能而已,但他最厲害的地方是在於協作! 想想看一個很大型的project,假如說十幾萬行code要寫,如果沒有版本的紀錄那每個人都要慢慢對一下別人跟自己code的差異... 更何況有可能有豬隊友把你的code改錯了,然後還忘記自己改了甚麼就真的會想吃香腸了lmao...


要怎麼控制?

但是再回到他的名子來討論~ 「控制」代表git不只可以看到歷史而已,他還可以做更多更多的事情來控制這些版本~ 首先我們用一張圖來解釋一下最常用到的git 開發流程:

https://ithelp.ithome.com.tw/upload/images/20200903/20129730blBWji7Jgv.jpg


Repository

Repository可以想像成是一個櫃子,這個櫃子裏面會放你所有相關的code, image, readme等等東西~ 例如你用HTML/ CSS/ JS來寫一個網站,那你就要把HTML/CSS/JS和一些照片圖片等等都放到一個file裡面上傳上去到一個repository裡面。這樣其他人dowload你的file時就可以打開來直接使用,不需要再做任何coding~


git clone

他有兩種方法可以進行,可以使用dpwload zip 或是直接用 git clone,我建議各位使用 clone的方式~ 這就是一個把整個repository 下載到自己電腦的法,你可以:
先打開git bash 當你下載完git就會有了,或是直接用terminal
--> cd 到自己喜歡的位置
https://ithelp.ithome.com.tw/upload/images/20200903/20129730j7271ZN33R.jpg

--> 接下來去我的github 找到這個 30days-challenge的repository
--> 點選dowload就會看到以下畫面
https://ithelp.ithome.com.tw/upload/images/20200903/20129730RPr1OeAY2J.png
--> copy 那個 http.... (這就是網路上這個repository的位置)
--> 回到git bash
--> 打上 git clone https://github.com/ryanyen2/30days-challange.git
就大功告成啦!! 這個就是下載的意思,所以你只需要做一次就好~


git pull

這就是更新的意思~ 因為我明天可能會更動這個repository,例如增加一個hello.html 再裡面,那你下次要開發的時候,為了確保自己的版本有更新到最新的就要用git pull 來拿到這個hello.html
https://ithelp.ithome.com.tw/upload/images/20200903/20129730hn6jr9kZYJ.jpg

其實可以說是你更新網頁依樣~ 更新自己的local machine


git add -A

當你做了一個更動~ 例如更新了 README.md 這個檔案,你可以 git status 就會看到以下畫面
https://ithelp.ithome.com.tw/upload/images/20200903/20129730pYIqwl9YTv.jpg
他會說你有一個 untracked files,意思就是他偵測到了一個最新的更動 (你的本地版本跟github版本不同),所以你要使用 git add 來將這個更動加入索引裡面,成為git 追蹤的對象
https://ithelp.ithome.com.tw/upload/images/20200903/20129730uAxdB19Zxa.jpg

其實原本應該是 git add <file_name> 但是如果你都知道你要做的更動是甚麼,可以直接 git add -A 讓你直接把所有更動一次加到索引裡面。


git commit -m "info..."

可以commit囉~ 就是所謂的提交版本 (就是剛剛提到的版本) 這個版本就是代表你目前做的更動是甚麼,在歷史上你做了哪些修改?
而這個 info... 就是要你填上這個版本的資訊,例如你可以寫 "增加index.html" 、 "修改 App.vue" 等等,為什麼要填正確的? 因為我剛剛提到可能會要協作~ 你要讓其他人知道上一個人到底改了甚麼,如果你寫 "換你啦哈哈哈" 我保證他一定會揍你www

https://ithelp.ithome.com.tw/upload/images/20200903/20129730xamc1Q0eWN.jpg


git push origin <branch_name>

當你一切都做好準備了,你就可以正式把你的這個版本上傳回去repository裡面,接下來你去網站更新一下就會看到自己剛剛更新的內容了! 基本上到這裡你就已經完整的走完一遍開發流程囉!

https://ithelp.ithome.com.tw/upload/images/20200903/20129730xkv3hdM0Jh.jpg

/images/emoticon/emoticon24.gif
https://ithelp.ithome.com.tw/upload/images/20200903/20129730Kasd3WotsB.png


後記

但是我必須要說一件殘酷的事實,git遠遠不止這些功能!
你可以用git回到上一個版本,你可以用git 查看之前的版本,你也可以用git 去做一個新的branch等等,有非常多好用且實用的功能我沒辦法一一好好地介紹給各位島民,但我誠心建議你去找找https://backlog.com/git-tutorial/tw/ 知道一下其他的功能,如果你覺得我剛剛講得太白話文,這裡面也有比較技術層面的講解歡迎逛逛~~


上一篇
【D2 - 前端島生存守則】先拿好你的地圖
下一篇
【D4 - npm 你到底是誰】大家都叫我npm install!! 但這甚麼意思
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言