---

slideOptions:
mouseWheel: true
width: 100%
height: 90%
margin: 0.1
minScale: 1.0
maxScale: 2.0
loop: true

---

# 使用Github pages架設靜態頁面

###### tags: `HTML RWD Bootstrap 基礎課程`, `Git`, `Github`, `Command`

----

# 觀念建立

----

1. 將大的工程切分成數個具體化的里程碑。
2. 完成一個里程碑做一次git commit。
3. 一個Local的專案資料夾與一個Github上的Repository對應
4. 你可以選擇是否將最新commit的版本上線，上線使用指令git push。

----

### 任務模擬 - 製作我的個人網站
你可以將製作個人網站，這份大項目的抽象工程，切分成數塊具體化的里程碑，比如:
1. 網站製作開始
2. 個人履歷完成
3. 作品集完成
4. 用SCSS改寫網站
5. 套用Google Map API

----

## 一、現在專案正要開始
於Github上[建立一個Repository](https://github.com/new)。
此時Local端與Repository上的程式碼尚無內容，因此也沒有差異。

#### 對應指令：
`git init`


----

## 二、經過一陣努力後達成第一個里程碑
經過一段時間的努力，你完成了第一個里程碑。


----

## 三、完成一個里程碑，做一次Commit
每一次達成里程碑目標，就做一次Commit

#### 對應指令：
`git add .`
`git commit -m "個人履歷完成"`


----

## 四、Remote，讓系統知道對應的Repository
系統沒有這麼聰明，所以要告訴它Local的專案對應哪個Github的Repository。
**這個步驟只需要在每個專案第一次Push前做一次。**
#### 對應指令：
`git remote add origin repository的網址`


----

## 五、Push，把最新版本上線吧！
#### 對應指令：
`git push origin master`
****電腦第一次Push時需輸入帳號密碼****


----

## 六、又完成了一些里程碑，這次我要來更新了
只要有完成里程碑都記得要commit !
#### 對應指令：
`git add .`
`git commit -m "用SCSS改寫網站"`


----

## 七、PUSH，再把最新版本上線吧！
#### 對應指令：
`git push origin master`


----

# Github指令整理

----

# ㄧ、透過命令列工具移動位置

----

## 1. 使用命令列工具
Window: git bash, cmd命令列工具
macOS: terminal

----

## 2. 查詢我現在在哪？
Windows輸入指令：`cd`
MacOS輸入指令：`pwd`

----

## 3. 查詢我現在所處的地方有哪些檔案：
Windows在命令列工具輸入指令：`dir`
macOS在命令列工具輸入指令：`ls`


----

## 4. 進入資料夾指令： `cd 資料夾名稱`
(EX: cd desktop) 將會進入desktop資料夾
***如果當前所在目錄沒有desktop資料夾則該指令無效。***


## 5. 回到上一層的資料夾：`cd ..`

----

# 二、事前準備
使用Git與Github工具架設靜態網頁之前，請確認以下兩件事情是否完成。

1. 是否已經註冊Github帳號？如果沒有，前往[Github官網](https://github.com/)註冊

2. 是否已經安裝好Git？如果沒有，至[Git官網](https://git-scm.com/)下載

----

# 三、電腦第一次安裝好git
當這台電腦第一次安裝[Git](https://git-scm.com/)時，請執行以下指令進行設定。

1. 打開命令列工具，分別輸入以下指令。
2. 確認你的電腦安裝好git, 輸入指令 git --version ，有回覆git版本代表安裝成功。
[](https://asciinema.org/a/rVPqFV10WNHCQxceeygggrHzC)
******查的到版本資訊就代表安裝成功******

3. ``` git config --global color.ui true ```

4. ``` git config --global user.name 你的github帳號 ```
5. ``` git config --global user.email 你註冊github用的email ```

#### git config 指令範例
[](https://asciinema.org/a/JCfOXfKDoymP5A7UTsBcVYquD)

----

# 四、專案第一次推上Github

1. 以命令列工具進入專案資料夾( cd desktop/專案資料夾名稱 )，分別輸入以下指令
2. ``` git init ```
3. ``` git add . ```
4. ``` git commit -m “你做了哪些改變” ```
5. ``` git remote add origin 你github repository的網址 ```
6. ``` git push origin master ```
7. 如果這台電腦是第一次push會要求輸入github帳號密碼(Mac輸入密碼時看不到文字)
8. 更新Repository頁面，如果有看到內容更新，即代表成功Push
9. 點選頁面上的【Settings】=> 點選在Github Pages Source下原本顯示為none的按鈕，設定為master branch。
10. 完成

----

# 五、專案已在github上我要更新程式碼

1. 以命令列工具進入專案資料夾( cd desktop/專案資料夾名稱 )，分別輸入以下指令：
2. ``` git add . ```
3. ``` git commit -m “你做了哪些改變” ```
4. ``` git push origin master ```
5. 完成

----

# 六、補充說明

1. 一個github repository對應一個本機端的專案資料夾。
2. 本機端的檔案遺失可下指令 git clone 指令複製一份下來。用法： ``` git clone repository的網址。 ```
3. 若你有兩個專案需要放到github上，就開兩個github repository，分別在本地端的兩個專案資料夾內下指令。
4. 刪除github repository就從github repository頁面上的 settings -> 按下 Delete this repository -> 輸入repository的名稱，確認 (謹慎使用，無法復原) -> 刪除成功。
5. 清除本地端的git檔案：使用命令列進入該專案資料夾 -> 輸入指令 rm -rf .git (謹慎使用，無法復原)。

----

# 七、欲深入了解Git版本管理

請參考系統訓練班Git課程 http://train.csie.ntu.edu.tw/train/?page=course_info.html&courseid=1954