# Denny 學長的 Git 教學—事前準備
在正式進入教學前，我們會需要設定一下Git的執行環境， **自行攜帶筆電** 參加的同學，可以參考以下說明設定電腦，依序安裝Git及註冊Github。也會補充一些 **懶人包**，讓大家可以更快速上手。

**※建議自行攜帶筆電**

## Git 安裝
### Windows
- [官方下載頁面](https://git-scm.com/download/win)

點頁面最上面的 <span style="color:#0388a6; font-weight: 650">Click here to download</span> 下載就可以了。


安裝進行時會有要你選擇預設編輯器的頁面，==除非你會退出`Vim`否則一律使用 `notepad`==


往下滑到 `notepad` 選項


剩下的就直接一路 next 到 Install 就可以了。

#### 使用指令介面安裝
也可以使用 Power Shell 來安裝，透過輸入下列指令：

$ winget install --id Git.Git -e --source winget

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i> **Windows Terminal & Power Shell**
關於 Windows Terminal 與 Power Shell 的安裝可以參考[**附錄**](#附錄)。
:::

### Mac

推薦使用 `Homebrew` 安裝，打開 MacOS 的終端機，輸入以下指令：

$ brew install git

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i>**檢查是否有安裝homebrew**

$ which brew 

如果有出現`/opt/homebrew/bin/brew`就是已經該裝過了
如果顯示`brew not found `那就是沒有安裝過，請參考以下
</i>**Homebrew 安裝**
關於 `Homebrew` 的安裝可以參考[**附錄**](#附錄)。
:::
### Linux
Linux 的安裝則透過各自發行版的套件管理工具下載，詳細方式可以參考 Git 官網的說明
- [Linux 下載說明](https://git-scm.com/download/linux)

### 安裝完成後
可以打開終端機確認自己的 `git` 版本，透過以下指令

$ git --version

目前最新的版本會是 `2024-02-23` 發布的版本 `2.44.0`。輸入指令後會看到類似畫面

<span class="caption">^ 透過 CMD 輸入指令</span>

<span class="caption">^ 透過 Power Shell 輸入指令</span>

<span class="caption">^ 透過 WSL2 輸入指令(與 Linux 系統相似)</span>

## 註冊 GitHub 帳號
我們可以在 GitHub 官網首頁註冊帳號
- [GitHub](https://github.com/)

點擊右上角 Sign Up 後跟著網站上面的指示操作即可

---

## Markdown 基礎
Markdown 是一種輕形的標記式語言，可以透過類似輸入指令的方式，簡單地排版文字。更多可以參考[Markdown 語法 Cheat Sheet](/5o8h4iE7See5gMSG-s3wJw)

## Shell 基礎
我們可以透過指令介面(CLI，e.g. 終端機)直接操作電腦。
- `cd`：切換目錄
- `ls`：列出該目錄層級中的檔案與資料夾

### 檔案系統中的路徑
在電腦的檔案系統中，我們可以透過路徑去瀏覽不同的檔案與目錄(資料夾)，就如同網址一樣。一般會用`/`或`\`分開不同的層級（只有 Windows 系統使用 `\` 分隔）。

路徑一般分為兩種：
- 絕對路徑：指向電腦中某個檔案或目錄 **固定** 的位置，
e.g.
- Windows：`C:\Users\USER\Desktop`
- Linux or macOS：`/home/yuto/Desktop`
- 相對路徑：以提供的目錄作為起始點，指向電腦中某個檔案或目錄 **相對** 的位置
e.g.
- `./a.out`

相對路徑會有兩個很常用的表示方法：
- `./`：當前目錄之下
- `../`：基於當前目錄，上個層級的目錄

其中也會有替代的字元來表示一段路徑：
- `/`：根目錄
- `~`：家目錄（該使用者的目錄）

### 練習
接著可以練習解讀一個路徑

/home/yuto/index.html

可以從最左邊，也就是路徑表示的起始點開始閱讀。最前面並沒有代表相對路徑的 `.` 或是 `..` 所以這是一個絕對路徑。絕對路徑會從**根目錄**開始，Windows 可以再表示成 `C:` 或 `D:` 取決於怎麼切分硬碟的，Linux 以及 macOS 則是都是 `/`。

接著我們看到了 `home` 緊接著一個 `/`，這代表了 `home` 是一個目錄，也就是資料夾。之後便可以往後以此類推。

在路徑的最結尾我們看到了 `index.html`，這是一個標準的檔案格式，`檔案名稱.副檔名`，所以我們就可以知道這串路徑最後指向了一個檔案。

:::spoiler **Ans**
::: success
<i class="fa fa-check-circle" aria-hidden="true"></i> **解答**
在根目錄的 `home` 資料夾中的 `yuto` 資料夾中的 `index.html` 檔案
:::

## 附錄

### A. Windows Terminal & Power Shell
- [Power Shell](https://apps.microsoft.com/detail/9MZ1SNWT0N5D?hl=zh-tw&gl=TW)
- [Windows Terminal](https://apps.microsoft.com/detail/9N0DX20HK701?hl=zh-tw&gl=TW)

這兩個可以直接透過 Microsoft Store 下載

### B. Homebrew
打開 MacOS 的終端機，輸入以下指令：
- x86版本

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

-----
- M系列版本

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝成功後，請打

echo $SHELL

安裝成功後會顯示`/bin/zsh`
然後再執行以下指令

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

就安裝完成了！

#### 最後檢查指令

which brew

若顯示`/opt/homebrew/bin/brew`就成功了！

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i> **Info**
- 更詳細的安裝資訊可以參考[**官網**](https://brew.sh/)
- 終端機的使用方使也可以參考官方[**使用手冊**](https://support.apple.com/zh-tw/guide/terminal/welcome/mac)
:::

<style>
.caption{
display: flex;
/* 水平置中 */
justify-content: center;
}

/* 引入字體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Noto+Sans+TC:wght@100&display=swap');

/* 字體設定 */
p.ui-view-area{
font-family: 'Noto Sans JP', 'Noto Sans TC', sans-serif !important;
font-weight: 400;
}

/* 標題 icon */
h1:before{
color: #909090;
content: "# ";
}
h2:before{
color: #909090;
content: "## ";
}
h3:before{
color: #909090;
content: "### ";
}
h4:before{
color: #909090;
content: "#### ";
}

/* 連結 icon */
p.part.in-view>a:before{
font-family:'FontAwesome';
font-style: normal;
content: '\f0c6';
}

/* 連結 icon */
ul.part.in-view>li>a:before{
font-family:'FontAwesome';
font-style: normal;
content: '\f0c6';
}

/* 螢光筆 */
mark>span{
box-shadow: inset 0 -8px 0 0 #B8E1FF;
font-weight:bold;
}

/*覆蓋掉原本螢光筆設定*/
.markdown-body .mark,.markdown-body mark{
background-color: transparent;
}

/* 底線 */
ins{
text-decoration:underline wavy #659AD3;
/*border-bottom: solid 2px #6CB6DD;*/
background-size: 20px;
}

/* alert 區塊 */
.alert{
color: #444;
}

/* 引言 */
blockquote{
color: #555 !important;
}
</style>