Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念

引導式練習每個 Github Desktop 功能,先從最簡單的學起,工程師必備技能!

Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念

引導式練習每個 Github Desktop 功能,先從最簡單的學起,工程師必備技能!

Github Desktop 新手入門教學:第1課 ── 學會專案初始化

## 課程目標 - 學會專案初始化 ## 課程內容 在開始之前,我先再次說明一下 Git 與 Github Desktop 的不同 Git 是軟體工程師每天都會用到的,強大的專案版本管理工具,本身是命令列工具,要一直在終端機打指令 Github Desktop 是 Github 公司,為了方便入門者,所開發的 GUI(圖形化介面)工具,用起來簡單很多 本課程會交替使用這兩個名詞,前者代表 Git 正在發揮作用,後者代表正在操作 Github Desktop 功能 有點分不清楚沒關係,反正就知道有這差別即可,日後經驗更多,會越來越清楚 --- 讓我們開始玩玩看 Github Desktop 吧! 請先前往官網下載並安裝 https://desktop.github.com/ 在登入 Github 帳號的步驟,先選 `Skip this step` 跳過就好,我們後面課程再登入就好 --- 進入到 Github Desktop 主畫面之後,首先我們要設定一下 git 基本資訊 也就是在用 git 管理專案紀錄時,每次提交變化時,當筆提交的「作者資訊」 請在 Github Desktop 上方的導覽列,選擇 `Preferences` 然後選擇 `Git` 把 `Name` 跟 `Email` 欄位填寫一下,然後點擊 `Save` 按鈕,就可以囉! --- 來建立第一個用 git 管理的專案吧! 在主畫面,點選 `Create a New Repository on your Hard Drive` `Name` 就輸入 `my-first-repo` `Description` 可以省略不填 `Local Path` 隨便選一個方便的路徑 其餘的選項都保持預設就好,不用勾選 `Create Repository` 點下去,就建立第一個專案資料夾囉! --- 請在電腦上,直接打開那個資料夾,然後在資料夾裡面新增一個檔案 `my-document-1.txt`,裡面放入以下內容 ``` 我的第一個筆記檔案 ``` 接著打開 Github Desktop 看看狀況 會看到 `Changes` 分頁下面,有出現 `my-document-1.txt` 這個檔案 然後右側的主視窗,有顯示出檔案內容 這代表 git 已經發現它的存在了 我們成功使用 git 開始追蹤專案的歷史變化了! 這是一個很好的開始,本課先做到這樣就好! ## 課後作業 假設你正在準備履歷表,整理一些自我介紹、經營個人品牌的檔案 請建立一個名為 `my-resume` 的資料夾,並使用 git 開始追蹤這個資料夾 請在其中建立一個 `me.txt` 的文字檔案,裡面放入以下內容 ``` # 我是誰 - 我是XXX,目前在自學程式設計 # 我的學歷 - 高中:積極高中 - 大學:品質大學 ``` 你應該會在 `Changes` 分頁看到檔案出現 然後在右側主視窗,看到文字檔案的內容 完成以上任務,你就完成這次的課程目標了! --- 交作業的方法: 請直接截圖 Github Desktop 視窗的內容,上傳到留言區

Github Desktop 新手入門教學:第2課 ── 學會基本指令

## 課程目標 - 學會基本指令 ## 課程內容 繼續上一課的內容,這次在同個資料夾內,再新增一個檔案 `my-document-2.txt`,裡面放入以下內容 ``` 我的第二個筆記檔案 ``` 接著打開 Github Desktop 看看狀況 會看到 `Changes` 分頁下面,現在有兩個檔案 分別點選檔案,可以在右側主視窗看到內容 --- 在 git 的觀念裡面,git 預期我們每次工作,都會修改到很多檔案 每次工作到一段落時,要提交進度給團隊時,都會一口氣將這些檔案變化送出去 這個所謂的「提交」,在 git 中稱之為 `Commit` 所以,你會很常聽到工程師說「這個 commit」、「那個 commit」、「上次的 commit」、「你昨天的 commit」 來試試看提交我們的第一次版本紀錄吧! 每次提交,都需要打一段提示訊息,方便日後翻閱,大致知道每個提交的內容 請在左下角的 `Summary` 輸入 ``` this is my first commit, i am so happy! ``` `Description` 可以省略,不用輸入 接著點擊 `Commit to main` 你會發現 `Changes` 分頁列表清空了!本來的兩個檔案不見了 這是因為 `Changes` 代表「這次正在修改的檔案」,送出 commit 代表「本次修改完成並提交」了,所以就不再有「這次正在修改的檔案」了 請點選旁邊的 `History` 分頁,會看到剛剛的 commit,點選 commit 可以看到相關的檔案內容變化,很酷吧! --- 讓我們多提交幾次檔案,試試看多次提交的感覺! 先建立新檔案,請建立 `my-document-3.txt` 並放入以下內容 ``` 我的第三個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add another work ``` 之後就 `Commit to main` 直接點下去!又送出一筆 commit 囉! --- 來,我們再建立新檔案一次,請建立 `my-document-4.txt` 並放入以下內容 ``` 我的第四個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add one more work ``` 之後就 `Commit to main` 直接點下去!又送出一筆 commit 囉! --- 點開 `History` 分頁看看吧! 會看到剛剛的三筆 commit 記錄都在裡面 點擊不同的 commit 可以看到對應的 commit 內容 Git 會追蹤整個資料夾內的所有變化!包括:建立新檔案、檔案內容的增加、檔案內容的減少、檔案被刪除 這些變化也會在每次提交 commit 時被記錄下來,所以都可以在 `History` 分頁看到記錄,很強大吧! ## 課後作業 接續前一課的作業,你的專案目前有一個 txt 檔案 這次要來模擬實際工作的時候,反覆修改檔案、增減檔案的過程 請按照以下順序送出 commit **第一個 commit:** 請把目前的 `me.txt` 檔案放進 commit 裡面。 **第二個 commit:** 你改變心意,覺得拆成多個檔案比較清楚,之後分別寫內容比較好 請把 `me.txt` 檔案的內容清空,改放以下內容 ``` 我是XXX,請參考其它檔案,瞭解更多我的介紹與背景。 ``` 新增 `about.txt` 以及 `background.txt` 兩個檔案 並且把 `我是誰` 的內容放進 `about.txt`,把 `我的學歷` 的內容放進 `background.txt` **第三個 commit:** 你靈機一動,覺得在履歷寫一些個人的大目標,會讓人感覺氣勢很強 新增一個 `goals.txt` 檔案,裡面放入以下內容 ``` 我的目標,是成為貴公司的 CTO(技術長)。 ``` --- 最後,點開左側的 `History` 分頁,應該會看到以上三個 commit 的訊息! 完成以上任務,你就完成這次的課程目標了! --- 交作業的方法: 請直接截圖 Github Desktop 視窗的內容,上傳到留言區

Github Desktop 新手入門教學:第3課 ── 學會簡易的檔案變化操作

## 課程目標 - 學會簡易的檔案變化操作 ## 課程內容 來學一點簡單的檔案變化操作吧! 打開 `my-document-1.txt` 然後多加下面這行字 ``` 是一段亂打的字 ``` 你會在 Github Desktop 再次看到 `my-document-1.txt` 檔案出現了,然後內容變化會在右側出現 假設我們今天對這次的變化內容不滿意,想要整個取消,該怎麼用 git 做到呢? 請把滑鼠游標移到檔案上面,點擊右鍵,選擇 `Discard Changes...` 會跳出確認視窗,跟你確認真的要捨棄這些變化嗎?點擊 `Discard Changes` 會發現檔案消失在 `Changes` 分頁囉! 代表檔案內容又變回去了,所以目前沒有任何變化~很酷吧! 軟體工程師在工作時,常常會一口氣修改很多檔案,然後常常改到一半又對某些修改反悔,這時就可以這樣快速取消變化! ## 課後作業 這次來模擬實際工作的時候,檔案改到一半,反悔了,然後取消的過程 繼續修改我們的履歷表專案吧! 首先,你想補充更多學歷資訊 請先在 `background.txt` 加入以下資訊 ``` - 國小:開心國小 - 國中:快樂國中 ``` 你應該會在 `Changes` 分頁看到變化的部份出現 請將 Github Desktop 視窗截圖,這是本次作業的第一張截圖 --- 想了一下,你突然又覺得,國中國小學歷,應該沒人關心,還是別放進去好了 請使用 `Discard Changes...` 功能把 `background.txt` 檔案變回原樣 這時再看 `Changes` 分頁,應該又乾乾淨淨了,裡面沒有東西 請將 Github Desktop 視窗截圖,這是本次作業的第二張截圖 --- 完成以上任務,你就完成這次的課程目標了! --- 交作業的方法: 請把第一張、第二張截圖,分別貼到留言區

Github Desktop 新手入門教學:第4課 ── 學會重置指令

## 課程目標 - 學會重置指令 ## 課程內容 來學一個強大的指令:重置 上一課的取消功能,是針對修改到一半的檔案 這時很自然會浮現一個問題:如果是之前已經提交過的內容,有辦法取消嗎? 點開 `History` 分頁,假如我們今天對「上上次的提交內容」不滿,也就是 `add another work` 那筆 commit 不滿意,怎麼辦? 其實很簡單! 請把滑鼠游標移到 commit 上面,點擊右鍵,選擇 `Revert Changes in Commit` 你會發現 `History` 多了一筆 commit! 這筆 commit 內容跟原本的 commit 內容完全相反,也就是會抵銷掉那筆 commit! 打開資料夾看一下,會發現 `my-document-3.txt` 檔案整個不見了! 這就是 git 強大的地方:不只是正在修改的檔案內容,連之前修改的內容,都可以追蹤、回溯、管理! --- 看到這邊你可能會心想:為什麼要多一筆 commit? 怎麼不把那筆 commit 直接刪除掉就好? 其實,這是因為 git 通常是「團隊在使用」的工具 已經送出去的 commit,通常已經同步到很多人的電腦上了 如果這時工程師 A 刪了這筆 commit,工程師 B 刪了那筆 commit,那最後同步起來,大家電腦上的 commit 歷史記錄,到底長怎樣?很亂吧? 所以,git 就一律設計成:想要回溯,就也是加一筆 commit!只是會自動進行相反的變化! 這樣大家電腦上的 commit 歷史記錄,同步起來,就單純很多了!commit 數量永遠都是加法,不斷加上去而已! 很聰明的設計吧! ## 課後作業 這次來模擬實際工作的時候,你突然對之前的 commit 內容不滿意,想要把檔案內容還原的過程 繼續修改我們的履歷表專案吧! 目前裡面有 `me.txt` `about.txt` `background.txt` `goals.txt` 四個檔案 你突然又有點反悔,覺得 `about.txt` 跟 `background.txt` 很多餘,想要把內容移回 `me.txt` 裡面 開發專案時,像這樣反反覆覆其實很正常,git 就是為了處理這種情境而生的 請切換到 `History` 分頁,找到之前把 `me.txt` 檔案改寫的那個 commit 然後使用 `Revert Changes in Commit` 功能來還原 commit 內容 還原之後,你可以看一下資料夾內容,應該會發現變回之前的樣子了! 然後在 `History` 分頁應該會看到,多了一筆 commit,是用來記錄那筆還原的 完成以上任務,你就完成這次的課程目標了! --- 交作業的方法: 請直接截圖 Github Desktop 視窗的內容,上傳到留言區

Github Desktop 新手入門教學:第6課 ── 能夠發佈專案到 Github

## 課程目標 - 能夠發佈專案到 Github ## 課程內容 我們已經在上一課成功連線 Github 了 這一課,來把我們的專案發佈到 Github 吧! 如果是跟同事合作,處理公司的專案,我們稱為 `Private repository` 如果是開源專案,發佈給全世界工程師使用,我們稱為 `Public repository` 在 Github Desktop 主視窗,會看到 `Publish repository` 按鈕 點下去,會看到 `Name` 預設就是專案名稱,`Description` 可以省略不填 下面的 `Keep this code private` 預設是勾選,也就是私人專案,把這取消掉,就是開源專案了 最後的 `Publish Repository` 按鈕按下去,視窗會自動關閉,代表發佈成功了! 回到 Github,右上方點擊自己的頭像,`Your repositories` 點下去,會看到剛剛發佈的專案! 以我的範例來說,我的專案在這邊,可以看到專案的各種檔案內容 https://github.com/howtomakeaturn/my-first-repo 然後這邊可以看到 commit 歷史記錄 https://github.com/howtomakeaturn/my-first-repo/commits/main 很酷吧! ## 課後作業 接續前一課的作業,現在你打算把專案上傳到 github,當做雲端備份,也方便自己在桌電、筆電上都能工作 請點擊 `Publish repository` 將專案發佈到 github 發佈之後,你應該會在 github 網站上面,找到剛剛發佈的專案、看到專案的程式碼、也能看到多筆 commit 歷史紀錄 完成以上任務,你就完成這次的課程目標了! --- 交作業的方法: 請把 github 專案連結,貼到留言區

Github Desktop 新手入門教學:第7課 ── 能夠從 Github 抓專案下來

## 課程目標 - 能夠從 Github 抓專案下來 ## 課程內容 我們在上一課發佈專案到 Github 了 這次來學習把專案從 Github 抓下來吧! 首先來把電腦上的專案刪掉,模擬我們今天拿到一台新電腦的情境 在主視窗點選 `Current Repository` 會秀出專案列表 對著我們的專案 `my-first-repo` 按右鍵,然後選 `Remove` 刪除,確認視窗繼續按 `Remove` 會發現 Github Desktop 變回初始畫面了! --- 但目前只是 Github Desktop 停止追蹤專案而已,那個資料夾其實還在電腦上喔 請在電腦上,直接前往那個資料夾,會發現檔案都還在 請把 `my-first-repo` 整個資料夾刪掉,這樣才是真的模擬拿到新電腦 --- 現在來試著把專案從 github 抓下來吧! 點擊 `Clone a Repository from the Internet` 因為已經登入 github 了,應該會顯示專案列表 找到上次發佈的 `my-first-repo` 專案 (如果專案沒出現,畫面上有一個重新整理的按鈕,按一下) 然後 `Clone` 按鈕按下去 成功囉!專案回來囉! `History` 分頁按下去,看看是不是跟之前都一模一樣? 軟體工程師在跨裝置工作(使用多台電腦)、或是多位工程師合作時,就是這樣同步專案內容的! ## 課後作業 接續前一課的作業,專案已經傳到 github 了 現在來模擬你拿到新電腦,第一次從 github 抓專案的情境 請把原本電腦上的那個專案資料夾,整個刪掉 這時去看 Github Desktop,應該會顯示「Can't find」開頭的提示 請將 Github Desktop 視窗截圖,這是本次作業的第一張截圖 截圖完畢之後,點擊畫面上的 `Remove` 將這個專案刪掉 --- 現在電腦上已經沒有專案了,就當作你今天拿到一台新電腦,準備開始工作,要把 github 上的專案抓下來 請點擊 `Add` 然後選 `Clone Repository...` 接著找到你在 github 上的專案 把剛剛那個專案整個抓下來之後,你應該會發現,剛剛整個刪掉的專案資料夾,現在內容又通通出現囉! 請將 Github Desktop 視窗截圖,這是本次作業的第二張截圖 --- 完成以上任務,你就完成這次的課程目標了! --- 交作業的方法: 請把第一張、第二張截圖,分別貼到留言區


👉 身份:資深全端工程師、指導過無數人半路出家轉職 👉 使命:打造 CodeLove 成為優質新手村,讓非本科也有地方自學&討論