### 什麼是Git?
Git為分散式版本控制系統，為了更清楚管理程式版本。可保存程式修改紀錄，可回覆已編輯狀態，顯示編輯內容差異，可提醒檔案覆蓋。不管是單獨開發或是多人協作，都更為便捷。

### 使用數據庫Repository管理歷史紀錄
本地Local數據庫：用戶自己的電腦
遠端Remote數據庫：雲端伺服器

可在本地端進行版控，如要多人協作、公開發表則需上傳push至遠端數據庫。

建立數據庫：1. 自己重新建立 2. 從遠端數據庫複製clone

### 使用提交Commit來記錄修改版本
在每次Commit，repository會保存所有修改紀錄。
1. 需再提交訊息中清楚列出修改內容方便後續管理及維護。
2. 不同修改內容可分次提交，方便未來管理。

### 名詞說明
- Push:將本地repo上傳到遠端
- clone：第一次將遠端數據庫內容複製到本機(只需一次)
- pull：將遠端其他人的修改紀錄下載至本機

---
學習資源：
六角學習影音課程：
https://www.youtube.com/watch?v=PNEM7CH3ZAg&list=PLYrA-SsMvTPOZeB6DHvB0ewl3miMf-2tj

01~09 堂線上講義：
https://hexschool.tw/n1C7O
10~18 堂線上講義：
https://hexschool.tw/PDcLZ
19~25 堂線上講義：
https://hexschool.tw/qCPbw
26~32 堂線上講義：
https://hexschool.tw/v9bxz
33~36 堂線上講義：
https://hexschool.tw/jjq1M

---

### 終端機常用指令


---
### Git基本指令架構
### Git 常用指令

- 初始化數據庫： ==git init==
- 開啟 .git 隱藏檔方案
（ Mac：command + shift + .）
- 查詢當前狀態：==git status==(縮寫git st)
- 將工作目錄working directory的檔案加入到索引staging area：==git add .== （中間要有空格）
- 將索引檔案commit提交上去：==git commit -m "註解（如：新增網頁環境）"==
* -m是message的意思
- 觀察 commit 歷史紀錄：git log
- 下載遠端數據庫(2擇一)：git clone 數據庫網址
- 註冊遠端儲存庫(2擇一)：==git remote add origin 遠端儲存庫網址==
- 設定main分支：git branch -M main
- 更新遠端數據庫： ==git push origin main== (預設remote 為origin的main分支，如未來有不同remote，名稱不能重複)
* 也可以加上git push ==-u== origin master：意思是把這個remote設為接下來的預設。
例：git push -u origin2 main
接下來只要輸入 git push，均會上傳至origin2。
* 業界實作也會分測試機及正式機，確保測試無誤後才會發布，所以會有分不同的remote。
- - -
### Git配置指令
- git version： 確認是否安裝成功
- git config --list：確認配置狀況
- 設定縮寫：
＊ git config --global alias.co checkout
＊ git config --global alias.br branch
＊ git config --global alias.st status
＊ git config --global alias.cm commit

---
### Git 版本細節
- ==git log==：先查詢先前commit紀錄（越下面為越早版本）
- ==git checkout 版本編號==：時光機功能，查看先前版本。（編號輸入時可按tab補齊正確號碼）
- Head：指標 - 標記為當下位置。
- 例： git checkout 0002，Head即在編號0002commit的位置。
- ==git checkout master(分支名稱)==：返回最新版本
---
### Git 狀態

- untracked： 在工作目錄上，還沒被commit追蹤過。
- 可用git clean -f 來清空檔案
- 可用git clean -n 顯示可清除的檔案
- unmodified：加入add到索引或是commit後的最新狀態。
- modifiled：檔案被編輯後的狀態。

---
### Git 版本還原

[git reset詳細介紹](https://gitbook.tw/chapters/using-git/reset-commit)
- ==git reset main^== 回到main上一個的commit
- 幾個＾，代表前幾次，太多也可使用~5，代表回到前5次的commit。
- 回去的相對位置，可使用commit編號、head、master。
- git reset main^^ ==-- -hard==：還原前兩個版本，所有更新檔案都放棄
- 有分不同參數：
- - mixed(預設)：還原後，原本的檔案回到工作目錄。
- - soft：原本檔案回到索引區。
- - hard：原本檔案直接丟掉。

[用hard卻後悔了怎麼辦](https://gitbook.tw/chapters/using-git/restore-hard-reset-commit)
- ==git reflog==：觀看詳細歷史紀錄，記下丟掉檔案的sha-編號。
- git reset sha-1編號 - -hard

---

### Git 分支
- ==git branch 分支名稱==：開新分支。
例： git branch develop：新增一個叫develop的分支
- git checkout develop：將head切換到develop分支。切換過去後，之後就會在這個分支上進行後續的commit。
當我在分支測試無誤，想要合併在main分支，
需要git checkout main先切換過去。
- ==git merge== develop：這時head在main上，由main來合併develop的所有commit。<main “fast foward快轉”到dev的commit紀錄>
- git merge develop ==『-- no-ff』==：合併時不要使用快轉，會留下小耳朵。
目的：留下分支紀錄，必要性見仁見智。
- Sourcetree：merge要勾選第三個，「Create a commit even if merge resolved via fast-forward」選項，就可以做出跟 --no-ff 的效果了。

---
### 其他分支指令：
- 改分支名稱：git branch ==-m== cat tiger
< 把cat分支改叫tiger >
- 刪除分支：git branch ==-d== dog
< 把dog分支刪除>
- 強制刪除分支：git branch ==-D== rabbit
< rabbit還沒合併會跳出提醒，用-D強制刪除>
- git checkout ==-b== lion
< 開一個原本沒有的分支lion，然後切換過去>

---
### Pull Request
當在遠端有需要修改的程式，可以發PR給原作者請求修改。
1. 在原作者的Repo點選『 fork 』(把repo叉回自己的遠端repo)
2. 檔案會出現在自己的遠端repo列表上，用git clone，複製到自己的本地repo。
3. 在本機修改好後，push 上遠端
git add . > git commit -m "修改內容訊息"> git push origin main
4.回到自己的遠端按new pull request 
5. 點view pull request
6. 填寫修改的資訊 送出

---

### 本地分支衝突

[發生衝突怎麼辦？](https://gitbook.tw/chapters/branch/fix-conflict)

去打架，打完後再加入索引合併。

---
### GitHub Flow
[什麼是GitHub Flow](https://docs.github.com/en/get-started/quickstart/github-flow)

#### 流程：
1. 在 master 建立分支來新增功能
2. 開始開發功能
3. 發 PR (Pull Request) 申請合併
4. 討論與檢視程式碼
5. 部署(Deploy)
6. 合併(Merge)
#### 規範

* 任何在 master 上的 commit 都是可以部署的
* 假使程式碼需要討論，請 PR 後在 comment 進行討論
* 可在GitHub上設定保護機制，防止分支被刪除或移動（repo裡的setting>branches>Branch protection rule)

---
## Vite
[Vite課程筆記](https://hackmd.io/V3v9hW9dTlOwFvVA6ycfLg?view)
[Vite 範例](https://github.com/hexschool/web-layout-training-vite)

#### 什麼是Vite?
- 目前是前端主流的開發工具
- Vite 是近幾年前端業界熱門的建構工具 (build tool)，它大幅地簡化了前端建構的流程與時間。

#### 為什麼要用 Vite?
- 解決開發伺服器過慢
- 生產環境的程式碼打包:透過 Rollup 協助進行生產環境的打包

#### Vite範例所提供的功能
1. 使用EJS做版型管理
2. 支援Sass編譯功能
3. 儲存檔案時，瀏覽器會自動更新，出錯會有警告
4. 整合GitHub服務，能做到一件上傳空間

#### 資料夾結構
1. ==assets==：靜態檔(圖片)、sass檔
2. ==pages==：裡放網頁(index.html，可自己新增)
4. ==layout==:共用區塊(表頭、表尾)
5. package.json 裡面是放有套件安裝及專案資訊
8. vite.config.js：已寫好相關插件進行前端任務管理（自動化部屬/自動更新/自動編譯）
9. .gitignore：不進行版控的檔案
10. 可用ejs 載入html 如：共同的表頭、表尾
11. 把css樣式用main.js統一載入

---

### GitHub pages自動化遠端部署

#### 步驟一：透過 VSCode 連接 Git 數據庫，先把 main 開發分支部署上去
1. 在遠端建立repo後，==必須在vite.config.js的base，更改遠端repo名稱。==
2. 打上git遠端部署指令：
> git init
git add .
git commit -m "first commit"
git remote add origin [GitHub Repositories Url]
git branch -M main
git push -u origin main

#### 步驟二：執行 npm run deploy 來執行自動化部署
當上傳 main:主要開發分支環境 後接下來只需要輸入 ==npm run deploy== 即可完成 GitHub Pages 部署

---
#### 注意事項：
1. 重新開啟vscode後，記得要輸入npm run dev重新開啟指令。
2. vite執行時，可用crl+c取消，就可以在終端機輸入指令。
3. 如要開新專案，為避免環境錯誤，建議重新下載[Vite 範例](https://github.com/hexschool/web-layout-training-vite)來更改檔案。
4. 資料夾名稱和遠端repo設定相同，較容易管理。