iT邦幫忙

2021 iThome 鐵人賽

DAY 30
1
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 30

版本控制與結語-30天學會HTML+CSS,製作精美網站

終於來到了最後一章節,也算是蠻重要的「版本控制」

版本控制的好處是讓你可以知道自己修改了什麼東西,方便管理自己的code,在多人一起開發一個專案時,更是不可或缺的工具。

因為自己是用MAC環境,所以以下範是用MAC環境進行

在MAC上安裝git

Step1. 到git官網下載
https://ithelp.ithome.com.tw/upload/images/20211015/20112053xvLnNhTNJZ.png
Step2. 點擊後,會有幾種安裝方法,我自己是選Homebrew
https://ithelp.ithome.com.tw/upload/images/20211015/20112053EYupcYz9z4.png

沒安裝過homebrew的,到homebrew官網進行安裝
完成後在終端機輸入以下指令安裝git

brew install git

Step3. 查看是否安裝成功

git --version

成功的話會有版本
https://ithelp.ithome.com.tw/upload/images/20211015/20112053PNd1t5V9tb.png

在github建立Repositories

下載完git後,要將檔案上傳到遠端儲存庫 github
Step1. 進入網站後,登入 GitHub,進入 GitHub 首頁,點選右上角「+」後,再點選「New repository」
https://ithelp.ithome.com.tw/upload/images/20211015/20112053Ia7Aa1tPvv.png
Step2. 建立一個空白的Git儲存庫,輸入Repository名稱(Repository name),還有是否公開、忽略檔案等設定
https://ithelp.ithome.com.tw/upload/images/20211015/20112053Rc2676nlNE.png
建立後,會有幾種方式讓你將本機的專案上傳到 GitHub 的遠端儲存庫中
https://ithelp.ithome.com.tw/upload/images/20211015/201120538kfOOREyfJ.png
如果是已經有上傳到 GitHub 的遠端儲存庫中,點擊紅框處複製
https://ithelp.ithome.com.tw/upload/images/20211015/20112053F1EGGWkQT4.png
在終端機打上「git clone 連結」,就可以將專案從遠端儲存庫中拉下來到本機
https://ithelp.ithome.com.tw/upload/images/20211015/20112053jDcPw9nYd4.png
下載到本機後,打開隱藏檔案會看到「.github」及「.gitignore」兩個檔案
https://ithelp.ithome.com.tw/upload/images/20211015/20112053b0BeEGoqDD.png

本地端建立git

下載github遠端儲存庫後,在VSCode安裝 「Git History」可以查看提交紀錄、提交給遠端儲存庫等資訊,就可以對你的專案做控管了
https://ithelp.ithome.com.tw/upload/images/20211015/20112053dTDwWpn5H7.png
git history 常用的

  1. 查看提交紀錄
    https://ithelp.ithome.com.tw/upload/images/20211015/20112053g1GWMsfXXk.png
  2. 檔案有更動時會出現提示,也可以提交跟拉取等
    https://ithelp.ithome.com.tw/upload/images/20211015/20112053M9gHIO1Svu.png
  3. 檔案比對
    https://ithelp.ithome.com.tw/upload/images/20211015/20112053GcFfMa8AeG.png

在前面改造你的VSCode,大幅提升你的Coding效率 這篇文章有分享vscode套件,有興趣的可以往前閱讀

git常用指令

除了有GUI介面管理版本庫,還能透過指令,以下介紹幾個常用的指令

  • git init:建立新的本地端 Repository
  • git clone [Repository URL]:複製遠端的Repository檔案到本地端
  • git status: 查詢版本控制狀態
  • git add [檔案或資料夾]/ git add.(加入全部檔案): 把檔案加入版本控制(放入暫存區)
  • git commit:提交目前的異動
  • git commit -m "提交說明內容":提交目前的異動並透過 -m 參數設定提交說明內容
  • git push:將本地端Repository的commit發佈到遠端
  • git push origin [BRANCH_NAME]:發佈至遠端指定的分支
  • git branch:查看分支
  • git branch [BRANCH_NAME]:建立分支
  • git checkout [BRANCH_NAME]:切換分支
  • git branch -D [BRANCH_NAME]:強制刪除分支

結論

這30天除了介紹html及css的基本觀念外,還加上我自己在製作時遇到的問題或是常用的寫法,希望能讓閱讀文章的你能夠在製作上能夠快速達到你要的結果。
最重要的是不可或缺的版本控制,他能夠控管你的程式碼歷程,在團隊開發時,也能避免修改好的檔案被覆蓋⋯之類的悲劇發生。
切版沒有什麼訣竅,就是多練習及參考別人的寫法。想要找參考網站可以到我這邊文章「找尋你的設計靈感、素材及好工具」去尋找你的靈感唷~
只要打好基礎,學會必備的觀念和語法,就是正式踏出製作網頁的第一步,以上是我這30天的分享,希望有幫助到正在學習的你....


上一篇
網頁框架比一比-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言