線上講義:https://quip.com/GL4gAFIc2KdI


1-git 指令對照 SourceTree 介面

1-1-本機端數據庫

– 建新資料夾命名為 project2 (GitHub 與 Git 指令特訓)。
– 輸入指令 git init 將本地 Git 初始化。
– 新增 HTML 檔案 touch index.html
– 使用指令將工作目錄加到 Git 索引內 git add .,目前為此是檔案的狀態是加到工作目錄。
20191024_線上問答會_Git & Github 入門-2-0004

– 將加入 Git 索引的檔案加入到 Git 本地數據庫,使用指令 git commit -m '新增首頁'
– 專案中加入 index.html 的結構程式碼,與增加 all.css 檔,完成後輸入 Git 指令 git add .git ci -m"新增 CSS 檔",目前專案中的 git commit 有幾次,目前的話是二次。。

– 在目前的部份,在 index.html 檔內加入標題,另外在 all.css 檔中在加入標題樣式,加入完成後再次輸入 git add .git commit -m '插入 h1 樣式',目前的話有三次 commint。

將專案加入到 SourceTree 軟體中,現在是要將本地端的數劇庫加入到 SourceTree 的專案列表中,選 Add existing local repository 選項,指向專案資料夾
20191024_線上問答會_Git & Github 入門-2-0001

加入專案資料夾於 SourceTree 列表後,開啟專案可以看到三次的 git commit。
20191024_線上問答會_Git & Github 入門-2-0005

在專案中加入 index4.html 檔,點時 SourceTree 的下方面版 Unstaged Files 中會多一個 index4.html 檔。
20191024_線上問答會_Git & Github 入門-2-0002

如果將最下方未勾選項目勾選,此時 index4.html 就會跑到上方的 Staged files 項目中,勾選中所做的動作就是 git add . 的指令,將檔案加入到 git 索引。
20191024_線上問答會_Git & Github 入門-2-0006

點按 SourceTree 右上方的 Commit 按鈕,此時會出現輸入框輸入字串,而在點按下右下方的 Commit 的按鈕後,就是執行 git commit -m '新增 index4.html' 指令。
20191024_線上問答會_Git & Github 入門-2-0007

1-2-GitHub 遠端數據庫

在 GitHub 遠端時,點按下 New repository 時,開啟遠端數據庫。
20191024_線上問答會_Git & Github 入門-2-0008

建立新的 Repository 命名為 1024,點按下 Create repository 按鍵後端立。
20191024_線上問答會_Git & Github 入門-2-0010

在目前為此,先前有建立的 project2 資料夾中已有舊有的版控,接著需要使用下方區塊的指令,而上方區塊主要是先將遠端開啟後先建一個數據庫起來,而如果是本位端就有舊的數據庫,就不使用第一種做法。
20191024_線上問答會_Git & Github 入門-2-0011

此時的狀態就是要將原本的本地數據庫推上去遠端數據庫,也就是要選用 GitHub 遠端數據庫下方區塊指令。
20191024_線上問答會_Git & Github 入門-2-0009

輸入下方區塊的第一段 Git 程試碼,輸入在終端機之後,好像都沒有相關的回應出現,但其實設定就加到再專案資料夾裡的 config 檔,開啟檔後就會看到最下方加入一段 [remote "origin"] 就會出現先前所設定的連結點。
20191024_線上問答會_Git & Github 入門-2-0012

目前為此的 GitHub 與本地端的數據庫 Commit 的數量,本地四次而 GitHub 沒有。
20191024_線上問答會_Git & Github 入門-2-0014

透過 GitHub 下方的指令,上面的指令是加入遠端數劇庫的設定,加入到本機端的專案資料數劇庫設定中。
在遠端推送時的名稱就命名為 origin,將 master 推送上去遠端。
20191024_線上問答會_Git & Github 入門-2-0016

指令輸入完後,在切到 GitHub 上的頁面重讀,就可以看到有 4 次的 commit 記錄上去到遠端,所以目前的狀態就會像下圖。
20191024_線上問答會_Git & Github 入門-2-0015

再輸入指令 touch page.html 加入新檔,接著輸入 git add .git ci -m "新增 page.html",此時的狀態如下圖,GitHub 不會同步更新。
20191024_線上問答會_Git & Github 入門-2-0017

開啟 SourceTree 可以看到遠端的 origin 是還在較後面,而本機端的 master 就是多了一步。
20191024_線上問答會_Git & Github 入門-2-0018

接著輸入 git push origin master,輸入的格試為 git push <遠端數劇庫名> <本地分支名>
20191024_線上問答會_Git & Github 入門-2-0019

推送完成後的 GitHub 就會如下圖。
20191024_線上問答會_Git & Github 入門-2-0020


2-常用環境設定

2-1-自定輸入簡碼

相關資料:其它方便的設定- 為你自己學Git

2-2-觀看所有 config 的設定

查看自定指令 git config --list 可以查看自定的內容,例如 user.name= 或是 alias. 的縮寫指令。
20191024_線上問答會_Git & Github 入門-2-0003

在 MacOS 的 Finder 裡使用快速鍵 commend + shift + g 在輸入 ~/.gitconfig 會快速移動到設定的文件檔,可以直接在文件檔中直接修改文字。

2-3-客製化與簡化設定

將原本終端機 IDE 文字編編器更換成 VSCode。

Git 使用縮寫指令,把常用的指令透過縮寫的型式簡化輸入。


3-Git 與 Github 是什麼?


– Git 是一個分散式版本控制軟體,可藉由它產生一個儲存庫( git Repository )
– Github:支援 git 程式碼存取和遠端托管儲存庫的平台服務
– 關係像是本地端有一個 index.html,但可以放到 dropbox、Google Drive 進行雲端託管


4-熱門遠端儲存庫(Github VS Bitbucket VS Gitlab)

– GitHub (https://github.com/):擁有 GitHub Pages 功能,可擁有私人數據庫,免費方案是 3 人以下
– Bitbucket (https://bitbucket.org/product/pricing):可擁有私人數據庫,免費方案是五人以下團隊
– GitLab (https://about.gitlab.com/):自架 Git 伺服器,有提供 web 視覺化管理介面,常用於企業內部開發

懶人包解釋:
公司專案的小型團隊可用 Bitbucket
想要有一個公開對外網站的話,可用 GitHub


5-遠端儲存庫 (Repository) 操作

5-1-註冊遠端儲存庫 (使用多重遠端數據庫)

目前的遠端數據庫有一個 (GitHub)。
20191024_線上問答會_Git & Github 入門-2-0013

如果要在新加入一個推送的遠端數據庫 (git pull repository) 共用在專案資料夾內,在專案內使用多個遠端數據庫 (git pull repository)。
另外在開新一個新的遠端數據庫 (git pull repository) 命名為 1024-1,GitHub 開新數據庫之後,另外在將 Git 指令 git remote add origin git@github.com:gonsakon/1024-1.git 加入到終端機中,加入後會回報錯誤訊息,主要是說明 origin 的遠端數據庫命名已被使用。
新加入專案的遠端數據庫的名稱是可以自定,所以將 origin 改成 git2,輸入指令後就會回報加入成功。
20191024_線上問答會_Git & Github 入門-2-0021

加入成後後在執行指令 git push -u git2 master,將本地端的 master 分支推上去遠端主機。
20191024_線上問答會_Git & Github 入門-2-0022

更新換成在查看 SourceTree 的話就可以看到新加入的 git2 的分支。
20191024_線上問答會_Git & Github 入門-2-0023

目前本地與遠端的 commit 記錄。
20191024_線上問答會_Git & Github 入門-2-0024

5-2-為何使用多重遠端數據庫

使用多重遠端數據庫,可確保開發的的內容沒問題後,在由測試主機將 commit 發佈到正式主機。
20191024_線上問答會_Git & Github 入門-2-0025

接著在終端機中輸入 Git 指令,加入本機端的 commit。
20191024_線上問答會_Git & Github 入門-2-0026
20191024_線上問答會_Git & Github 入門-2-0027

輸入 git push git2 master 後,將本地端的 commit 推送到遠端數據庫,先將推送的部份推上測試主機 git2 上,目前的 commit push 的情形。
20191024_線上問答會_Git & Github 入門-2-0028
20191024_線上問答會_Git & Github 入門-2-0029

在進行測式完成後,在沒問題後由本地端將 commit 推送到正式主機上,使用 git push origin master 推上遠端主機。
20191024_線上問答會_Git & Github 入門-2-0030
20191024_線上問答會_Git & Github 入門-2-0031

5-3-使用 bitbucket 遠端數劇庫

5-3-1-GitHub & bitbucket 群組比照

點按後會看到 Repository 的選項,也可以使用 Project 的方式,像是資料夾的方式來管理,另外 Team 可以設定多少人與相關權限。
20191024_線上問答會_Git & Github 入門-2-0033

比照 GitHub 的 New organization (新的組織)
20191024_線上問答會_Git & Github 入門-2-0034

像是 GitHub 就會有不同的加入組織,以六角學綄來說,就有開出自已的 Git 組織。
20191024_線上問答會_Git & Github 入門-2-0035

點按下之後就可以看到組織內的成員。
20191024_線上問答會_Git & Github 入門-2-0036

5-3-2-新加 repository 遠端數劇庫

登入後的頁面,新增一個 repository 的話,在右上角的 + 按鈕點按。
20191024_線上問答會_Git & Github 入門-2-0032

bitbucket 使用新建 Repository ,介面上的相關設定。
– Owner (開啟主持人)
– Repository name (數劇庫名稱)
– Access level 勾選 This is a private repository (預設為啟用私人使用,可在五個人免費使用)
– include a README? 說明文字請選 No,不要寫入任何的內容,要推上 bitbucket 也不要寫東西。
– Version control system 選 Git。
20191024_線上問答會_Git & Github 入門-2-0037

5-3-3-本地端多加入新的 bitbucket 遠端數劇庫分支與分支命名

點按下建立按鈕後,就會導到終端機指令輸入頁面,可以針對下方 Setp 2 的二行指令修改後,在執行於終端上。
20191024_線上問答會_Git & Github 入門-2-0038

因為原先預設指令的遠端分支名為 origin ,如果直接貼入終端機執行會報錯。
20191024_線上問答會_Git & Github 入門-2-0039

在專案資料夾內原本使用預設遠端分支 GitHub 分支名為 origin,所以在輸入指令時預要改遠端分支的名稱,改成 bit 在將指令執行。
加入遠端分支時就可使用指令 git push -u git master,輸入後會要求在次輸入密碼,輸入後就會將本地端的 commit 推上到 bitbucket。
20191024_線上問答會_Git & Github 入門-2-0040

目前的本地與遠端分支 commit
20191024_線上問答會_Git & Github 入門-2-0041

另外在 SoruceTree 上查看,就會看到分支共有四支,也都在同要的 commit 上。
20191024_線上問答會_Git & Github 入門-2-0042

在 GitHub 上有 6 個 commit ,另外在 bitbucket 上也會看到有 6 個 commit 。
20191024_線上問答會_Git & Github 入門-2-0043
20191024_線上問答會_Git & Github 入門-2-0044

GitHub 上寫著 Showing 2 changed files with 4 additions and 1 deletion. (二個檔變更、新增四行與刪除一行)
20191024_線上問答會_Git & Github 入門-2-0045

比照 bitbucket 也是有相同的修改的記錄。
20191024_線上問答會_Git & Github 入門-2-0046

5-3-4-加入新的成員到數劇庫裡

GitHub 上進入到 Settings 項目,選右方 Collaborators 就可以加入輸入欄中查找要加入的成員。
20191024_線上問答會_Git & Github 入門-2-0047

bitbucket 在 Settings 裡面的 User and group access 設定,輸入成員帳號或是 Email 就可以讓其他成員管理 Repository 。
20191024_線上問答會_Git & Github 入門-2-0048

5-3-5-Git 指令 -u 預設推到遠端分支

在本地端加入新檔與 Git 輸入指令, touch index7.html git add . git commit -m 'add index7',在本地端就可以看到新的 commit 記錄。
20191024_線上問答會_Git & Github 入門-2-0049

目前如果要推上遠端分支的話,輸入簡寫指令 git push 的話,就會自動推到 bitbucket 上。
使用 git push 簡寫指令時會自動推上 bitbucket 遠端分支,是因為有輸入 -u bit,所以就是直接將遠端分支設成預設,在輸入指令時也不會推到 GitHub 遠端分支上。
20191024_線上問答會_Git & Github 入門-2-0050

如果要正確的直接使用推遠指令,輸入 git push origin master 指定遠端推送分支名 origin 與本地端分支名 master


6-Git 版本細節

如果一開始在本地端輸入 git init 時,不會有 commit 點在上面。
在使用 git init 之後,就會直接在 master 分支上。

開新的專案資料夾,在依序建立檔案與 commit 記錄

git init
touch index.html
git add .
git commit -m "add index"
(目前 commit 記錄一筆)

開啟 VS Code 加入文件內的程式碼,在 index.html 內加入 HTML 基本結構與 CSS 連結
另外在加入 all.css 檔與文件內容 body{ color: red }
git add .
git commit -m 'add css'
(目前 commit 記錄二筆)

touch index3.html
git add .
git commit -m 'add index3'
(目前 commit 記錄三筆)

目前為此的 master 的 HEAD 是在 commit 記錄三筆上
20191024_線上問答會_Git & Github 入門-2-0052

有時在開發的過程中會產生問題,所以會將 HEAD 切回之前的 commit 記錄上去查看,HEAD 是目前的指標位置。
目前在第三個 commit 記錄點上有 index.html, all.css, index3.html 檔
20191024_線上問答會_Git & Github 入門-2-0055

如果要返回之前的 commit 記錄點,使用 SourcTree 在 add index 的 commit 記錄點上點二下,此時就會出現 Confirm 的對話框出來,問是不是要返回之前的 commit 記錄點,點按確任後就會反回到之前的記錄點上。
20191024_線上問答會_Git & Github 入門-2-0056
20191024_線上問答會_Git & Github 入門-2-0057

而專案資料夾內的 all.css, index3.html 檔也會不見,目前的 HEAD 指令是移到第一個 commit 點上。
20191024_線上問答會_Git & Github 入門-2-0058
20191024_線上問答會_Git & Github 入門-2-0059

而如果要切回最新的第三個 commit 點的話,只要在介面上點按第三個 commit 點就可以切回去最新的記錄。
20191024_線上問答會_Git & Github 入門-2-0060

6-1-checkout 切換分支

checkout 查看
使用 git log 指令,可以查看 commit 的記錄,另外在 commit 的後方會有 SHA-1 的英數編碼,在 SourceTree 上的 commit 也有 SHA-1 英數編碼,主要用於前往指定的 commit 點所使用。
20191024_線上問答會_Git & Github 入門-2-0061
20191024_線上問答會_Git & Github 入門-2-0062

要前往第一個 commit 點,記錄下 SHA-1 的前幾個編號,輸入指令 git checkout <SHA-1 編碼> 後,另外如果只記得前 2 碼的話,在輸入前二碼時加上 Tab 鍵終端機就會出現提示自動補全編碼,就可以切換到第一個 commimt 記錄上。
20191024_線上問答會_Git & Github 入門-2-0063

切換後的 HEAD 也會跳到第一筆的 commit 記錄上。
20191024_線上問答會_Git & Github 入門-2-0064

開啟專案資料夾,裡面也只有一支 index.html 檔。
20191024_線上問答會_Git & Github 入門-2-0065

如果又要切回最新的 master 記錄點上,輸入指令 git checkout master 就會在切回去最新的記錄點上。
20191024_線上問答會_Git & Github 入門-2-0067
20191024_線上問答會_Git & Github 入門-2-0068

6-2-git 分支結構

到專案資料夾內的 .git > refs > heads 資料夾,而裡面對應的就是 HEAD 的指標位置,目前的話使用的是 master 分支,如果專案中有其他分支的話,在 heads 資料夾中就會有其他分支名在裡面。
20191024_線上問答會_Git & Github 入門-2-0069

看到之前其他多分支的專案資料夾,裡面就有包括遠端分支在 remotes 資料夾內,而裡面就會對應著分支名稱。
20191024_線上問答會_Git & Github 入門-2-0070

6-3-切換 HEAD 到遠端分支上

對應遠端數劇庫,裡面只有二個記錄點,而本地端較新有三個記錄點。
20191024_線上問答會_Git & Github 入門-2-0072

將本地端較新的記錄推到遠端分支上,輸入指令 git push origin master,此時遠端分支也會有第三個 commit 上去。
20191024_線上問答會_Git & Github 入門-2-0073

如果又新增一個遠端數劇庫 bitBucket 進專案,輸入指令 git remote add bit ,此時新的遠端分支會是沒有 commit 記錄。
20191024_線上問答會_Git & Github 入門-2-0074

如果要將新的記錄推到遠端分支 bit 上,輸入指令 git push bit master ,就會將沒有 commit 的遠端分支推到最新。
20191024_線上問答會_Git & Github 入門-2-0075

之前課程中提到的更新 GitHub 遠端分支,在之後都要改為合併到 GitHub 遠端分支


7-還原技巧

7-1-檔案未追蹤與加入追蹤狀態

新建一個專案資料夾,依序輸入指令與建立檔案內容。

mkdir project4
cd project4
touch index.html
git init
git add .
git commit -m 'add index'
(目前為此有只有一個 commit 與一個 branch)

touch all.css
開啟 VS Code 加入 index.html HTML 結構與 CSS 內容
git status 查看,目前可以看到 Untracked files (目前檔案沒追蹤) 與 Changes not staged for commit 二個部份,這樣的狀態是指沒有加到本地數據庫,如果是這樣就要先輸入指令 git add . 加目工作目錄中。
20191024_線上問答會_Git & Github 入門-2-0076

在 SourcTree 中目前的狀態,Unstaged files 有 index.html 與 al.css 二個檔案,而圖示上 index.html 就出現編輯過,而 al.css 就出現 ? 的未加入索引追蹤的狀態。
20191024_線上問答會_Git & Github 入門-2-0077

比照 File Status Lifesycle 的狀態,就是在 Untracked 的部份。
螢幕快照 2019-11-22 下午10.09.59

接著輸入指令 git add . 時,就會加入到索引中,也就會由下方跑到上方去。
20191024_線上問答會_Git & Github 入門-2-0078
20191024_線上問答會_Git & Github 入門-2-0079

輸入指令 git commit -m "add css" 後,在將 al.css 的 CSS 檔編輯過,此時看到 all.css 檔就會跑到下方。
20191024_線上問答會_Git & Github 入門-2-0080

在輸入指令 git status 時就會秀出於 Changes not staged for commit 區塊內。
20191024_線上問答會_Git & Github 入門-2-0081

此時的 al.css 的檔案就不是在 Unstaged 狀態,而是被加入 Git 的追蹤的狀態,也因此才會提示 Changes not staged for commit。

7-2-新增檔案時,檔案還沒加追蹤時,清空工作目錄

此時 Git 的 HEAD 切到最新的 master commit 記錄點,輸入指令 touch index8.html ,此時在輸入指令 git status 就會提示未追蹤。
20191024_線上問答會_Git & Github 入門-2-0082

– 使用時機是像放置了許多測試的檔案,在測試的部份不加入到 Git commit 記錄內,直接使用指令清除。

如果要先查看可以刪的檔案,可以使用指令 git clean -n 查看,將沒有加入追蹤的檔案透過指令清除。
在加入新的 touch indexkeke.html 輸入指令 git clean -n ,此時就會列出二筆檔案於列表中。
20191024_線上問答會_Git & Github 入門-2-0084
20191024_線上問答會_Git & Github 入門-2-0083

下完指令 git clean -f 之後,專案資料夾就會把二筆未追蹤的檔案刪除。
20191024_線上問答會_Git & Github 入門-2-0085
20191024_線上問答會_Git & Github 入門-2-0086

git clean -ngit clean -f 指令,在新增還沒加入索引追蹤 (untracked) 時才有用,主要用於清空工作目錄,將沒用到的檔案乾淨。

7-3-檔案已加入追蹤,清空工作目錄

目前的檔案 index.html 已加入到索引追蹤狀態,將檔案先做修改後直接存檔。
20191024_線上問答會_Git & Github 入門-2-0088

此時在終端機上輸入指令查看狀態時會回應 Changes not staged for commit (未提交)。
20191024_線上問答會_Git & Github 入門-2-0087

如果檔案加入到索引前,使用指令 git checkout -- index.html,輸入完指令後就會切回到之前的 commit 的檔案上。
20191024_線上問答會_Git & Github 入門-2-0090
20191024_線上問答會_Git & Github 入門-2-0089

7-4-檔案加入到索引,退到工作目錄

index.html 將檔案輸入 <h1>1234</h1> 後存檔。
20191024_線上問答會_Git & Github 入門-2-0092

此時在輸入 git add. 將檔案加到索引內,使用 git status 查看檔案會得到綠字的 modifed: index.html 的回應,此旳修改過的檔案就加入到引索內。
20191024_線上問答會_Git & Github 入門-2-0091

另外將專案資料將內修改 index3.htmlal.css 檔,另外在加上一支 index9.html 檔,使用 git status 查看會得到 Changes to be committed 一筆、 Changes not staged for commit 二筆、 Untracked files 一筆。
20191024_線上問答會_Git & Github 入門-2-0093

目前的 index9.html 是未追蹤、已加入索引檔是綠字 index.html、未加入索引檔是 index3.htmlal.css 檔。

目前的專案資料夾中的狀態可以比較左圖。
20191024_線上問答會_Git & Github 入門-2-0094

接著輸入指令
git add index.html
touch indee.html
git add index3.html
touch inewe.html
git inewe.html
git st

出現目前的檔案狀態如下圖
– 還沒加入追蹤檔的有 (數劇庫沒加入第一次存於專案資料夾內) indee.htmlindex9.html
– 加入到索引準備要被 commit index.html index3.html inewe.html
– * 陷阱題 – 還在工作目錄上,還沒加入到索引,有三個 al.css indee.html index9.html,在都是紅字的部份,而在 Untracked files 還沒追蹤可是要加進入到索引。
20191024_線上問答會_Git & Github 入門-2-0095

如果要將 Untracked files 二個檔清空,使用指令 git clean -f,執行後二支檔就不見。
20191024_線上問答會_Git & Github 入門-2-0096

如果要將綠字加入索引的部份,要退回到工作目錄上,使用指令 git reset HEAD
20191024_線上問答會_Git & Github 入門-2-0097

7-5-版本還原

– 還原前兩個版本: git reset HEAD^^ ( ^ 表示退幾個,另外也可使用 ~n 來指定數值退)
– 還原前兩個版本,所有更新檔案都放棄: git reset HEAD^^ --hard ,這樣的指令除了更新檔案 (未加索引檔案) 都放棄外,回到 commit 記錄點外,會連回復的前一個記錄點都刪除
– 觀看詳細歷史紀錄: git reflog
– 還原到特定 commit: git reset commit編號 --hard
git reset 參數介紹


其他資料

使用 Git 指令簡碼 – git 的縮寫 alias
Git – 學習筆記