目標
接下來兩篇的內容都是為了把網站放到Github上
為之後佈署網站做準備
版本控制是Github最大的用途
由於有時候多人協作
如果沒有溝通好 導致修改錯了，不僅提交了還被放上去
若平時有做版控 就能靠著分支與版本號救回來
這是對開發來說 最重要的一個環節;

由於要使用這個服務要先註冊
這篇主要敘述
從最基本的Github註冊開始
接著建立倉庫(repository)
一直到使用版控軟體上傳檔案

步驟
1.
我們接下來要做的事 就是將本地端的檔案放到Github上
下圖的本地端 又稱為local端 就是我們現在的檔案位置
而我們會把檔案放到Github上
我們需要先處理remote端這邊的東西
也就是說將Github先設定完成

Github註冊
它有信箱和GOOGLE授權登入兩種方式註冊
選擇一種方便的就好

接下來是創建倉庫
在repositories的標籤 選擇New進入建立畫面
下圖紅框主要分兩個步驟
第一個是填入名稱 第二個是選擇公開或私人
這個設定完成後都還可以做切換
無論選哪一種，都不會影響到我們之後上傳

在創建好倉庫後 我們在remote這邊設定大致上已經完成
remote設定完了 接著換local這邊設定
由於我們倉庫這時候都還沒有東西
Github初始頁面它會給我們一些指令引導 如下圖
紅框給的這一串 我們等一下還會再用到 可以先存起來

....create a new repository on the command line
這句話底下的指令
意思是 在我們的本地端(Local)建立倉庫
需要下的指令
但我們這邊不去下指令
而是依靠版控軟體幫我們做這件事情

接下來我們要依靠版控軟體Sourcetree將檔案傳到Github上
當然你也可以使用Github本身的工具去做這件情

首先我們先到SourceTree官網
直接點下載就可以
它是可以直接執行的檔案

我們這邊要先做授權的動作
因為待會會需要把東西傳到Github上
所以我要用Github的權限操作 並授權Sourcetree可以做這件事情
點進來會先進到這個視窗

然後依照下圖紅框 先選擇Options

接著依照下圖點選 這邊主要做的是授權的動作
因為我們剛才有登入GITHUB
所以系統這邊會判定 並授予權限給Sourcetree
完成後按下OK

然後按右邊的Create
選擇我們的檔案放的資料夾

它就會幫我們建立repository
在剛才的操作裡
實際上已經完成了下面這個指令

git init

接下來可以看到右上角Remote有個驚嘆號的標誌

我們還需要設定Remote的位置
讓Sourcetree知道我們要存的遠端倉庫的網址
這邊按下Settings

然後填入我們剛才存的HTTPS網址
好了之後按下OK

在剛才的操作裡 已經幫我們完成了以下指令

git branch -M main
git remote add origin https://github.com/XXXXXX/tutorial.git

現在我們位置是在File Status的標籤
紅框框這邊是我們還沒要放上去的檔案(unstaged files)
因為要全部上傳上去
所以直接點stage all就可以了
全部檔案都會被往上匯入

接下來 我們需要做提交的動作Commit
這邊就打「第一次提交」或者你想要自定義的訊息

在剛才的操作裡 已經幫我們完成了以下指令

git commit -m "我們的第一次提交"

commit後 它會直接幫你跳到History的標籤
但在此之前 我們先回去File Status
因為我們的檔案都已經先Coomit了
現在狀態已經都是最新的了 沒有任何檔案可以Commit
所以這邊不會有任何檔案能提交(Nothing to commit)

來到最後一個階段
commit後 雖然它有出現在列表上面
但這時候 其實還沒有把東西傳到遠端的倉庫哦
所以我們這邊要用push
將剛才commit的東西 push到遠端Github
完成我們上傳檔案的動作
如下圖 按照紅框點選

紅框這邊代表 遠端成功和我們本地同步了

接著回到Github
頁面也變成了檔案列表
以及我們剛才第一次提交的訊息

我們回顧一下這篇所做的操作
●遠端(Remote)的設定
完成Github的註冊和建立遠端倉庫
●本地(Local)的設定
(1)Github的授權
(2)使用版控軟體建立本地倉庫
(3)設定我們要存的遠端倉庫網址
(4)將檔案做提交Commit
(5)將檔案Push到遠端完成上傳的動作

這一篇使用了版控軟體上傳到Github
而下一篇就會將Github的檔案做佈署的動作
佈署網站後 我們就能看到自己的網站了。

備註
1.
如果倉庫選公開的話，要注意你的檔案是否存在機密資料
例如存一些加解密的私鑰
像是我們之前在連Supabase的API時
它會跟我們要一組API KEY
這個API KEY 當時就是存在 supabase.js的
所以假如你對檔案還沒這麼熟的話
建議先切成Private私人的

如果你有注意到上傳的檔案數量
你會發現 它並不如我們想像的這麼龐大
回到我們的專案 可以看一下它檔案是16X MB
實際上我們上傳的檔案還不到6MB

那是因為 在.gitignore 這隻檔案中
有特別把node_modules 的路徑排除
這隻檔案的設定 會依照我們列出的清單做排除
像是排除圖片PNG,JPG 或是壓縮檔 或是其他格式的檔案
也因為有排除node_modules裡的檔案
我們也就不會在File Status那邊看到這些檔案

但是你可能有疑問
我們之前有安裝boostrap 、bootstrap icon
或是其他大大小小的套件
如果沒有安裝 那我們網站怎麼呈現正確的結果?

那是因為我們在下一篇佈署網站時
那個佈署的服務
會自動把這些套件的依賴性給自動載入
所以我們之後做版控的時候
並不需要將這些套件檔案也一併上傳