# Github Pages + Gulp 編譯部署步驟 by Jiang
###### tags: `Jiang` `2021夏季切版班`

## ( 2021 切版班更新 )
:::info

#### 課程 Gulp 範例所提供的功能
1. 使用 EJS 做版型管理
1. 支援 SCSS 編譯功能
1. 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
1. 整合 GitHub 服務，能做到一鍵上傳網站空間

#### 參考資料：
* [六角學院的 gulp 環境安裝流程](https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?view)
* [gulp環境建立](https://www.youtube.com/watch?v=mZnMsYVHUkA)
* [六角學院的 從 0 到 1 的 GitHub Pages 教學手冊](https://hackmd.io/@Albertnotes/B1_iKcAwI)
* [Ray 助教的 注意事項](https://github.com/hexschool/web-layout-training-gulp/blob/master/README.md)

#### Gulp 學習資源
* [使用 Gulp 進行網頁前端自動化](https://courses.hexschool.com/p/gulp)
* [這是在講 Gulp 不是飲料是任務自動化工具這件事](https://hsiangfeng.github.io/tags/%E9%80%99%E6%98%AF%E5%9C%A8%E8%AC%9B-Gulp-%E4%B8%8D%E6%98%AF%E9%A3%B2%E6%96%99%E6%98%AF%E4%BB%BB%E5%8B%99%E8%87%AA%E5%8B%95%E5%8C%96%E5%B7%A5%E5%85%B7%E9%80%99%E4%BB%B6%E4%BA%8B/page/2/)
* [試著把切版專案升級到 gulp4.0 吧](https://ithelp.ithome.com.tw/users/20104132/ironman/2921)

:::

## 檔案直接在終端機操作
（ 在 vscode 內建終端機也一樣指令，只是不需要再 cd ）

### 步驟一：先上傳到遠端 Github pages
基本上就是照著六角學院給的課程影音操作以下步驟
1. 先在 GihubPage 網站先新增一個 repositary，接著**執行以下指令**
1. **win** : 開啟 cmd ---> 輸入 cd ---> 拉進資料夾 ---> 按下 enter ---> 輸入 npm install ---> 輸入 gulp ，若順利會開啟瀏覽器！（ win 檔案如果在Ｄ槽，請在第一步驟時輸入d: 進入D槽 ---> cd 進入要 gulp 的檔案 ）
1. **mac** : 開啟 terminal ---> 輸入cd --> 拉進資料夾 ---> 按下enter ---> 輸入 npm install (或 sudo npm install) ---> 輸入gulp ，若順利會開啟瀏覽器
1. git init
1. git status 先查看狀態
1. git add . 這個點點一定要加或是可以直接寫要增加的資料夾名稱即可
1. git status 先查看狀態
1. git commit -m "commit" 創建 commit
1. git log 再查看一次版本庫的提交歷史記錄
1. 用 github 頁面給的網址第二個框內的指令
git remote add origin [GitHub Repositories 這個專案頁面上提供的的repo網址]
1. git branch -M main 分支建立
1. git push -u origin main 僅限第一次輸入，往後只需要輸入 git push 提交到遠端

> 執行完 git push -u origin main 或 master 時，系統可能會問你要選擇，這裡大概只會在第一次操作時產生這個情境，必須要輸入 git 帳號密碼( 通常是連結 github 帳密就好 )
>
> 1. Web Browser <--- 選這個
> 2. Personal access token
>
> 供使用者選擇，還請選擇 1。

### 步驟二：上傳之後要 Gulp 編譯並上傳 dist
當將 Gulp 原始碼初次部署到 GitHub 之後，可以依照以下兩步驟來更新網站
1. 步驟一：輸入 gulp build 進入生產模式
1. 步驟二：輸入 gulp deploy 即可完成 GitHub Pages 部署。
1. 再到 setting 改為 gh-pages 然後 save
2. 查看 gh-pages 是否成功（ 此頁面是 build 之後 dist 資料夾提供的內容 ）

### 步驟三：編譯檔案若有更新，要上傳怎麼辦 ?
1. git add . 或是 git add 輸入檔案名稱
1. git status
1. git commit -m "commit" 提交到本機
1. git log
1. git push 提交到遠端

**除了更新的檔案要上傳之外，另外還有 gh-pages 要上傳**
如果是 Gulp 檔案記得重新編譯 gulp build 然後再執行 gulp deploy

> **如果在上傳更新檔案這個步驟時，執行此步驟 gulp deploy 失敗怎麼辦 ?**
> 可以先把 .publish 檔案刪除，然後再次 gulp deploy 即可上傳
>
>