# Vite開發-專案建立流程

官方文件：https://vitejs.dev/guide/

官方文件挺清楚，這邊只是要記錄terminal的狀況，避免未來金魚腦。

1. 打開終端機，進行Vite npm安裝：
（以下指令僅供node版本14.8以上使用）

npm create vite@latest

# mac的話直接改成 sudo npm create vite@latest 且輸入自己電腦密碼

2. 命名專案project name


（請輸入專案名稱）
 my-project

3. 命名專案package name


package
這段我也不懂，因為我原本任意自訂名稱，遇到報錯說json檔不存在。
滿頭問號，所以第二次我試打了package（想說目前過看過的90%都叫做package.json），
結果就綠勾勾，給過了。故先沿用。

4. 選擇開發框架framework


5. 選擇開發語言variant

目前選擇javascript

6. 開發指令條列，可以開始開發了！


cd '你的專案名稱'  //進入你的開發資料夾（也就是剛剛命名的project）

npm install  //安裝打包好的開發工具（node_modules）

＃任何npm install完成後再run dev

npm run dev  //呼叫Vite出來幫你run出開發環境

7. 如果以上三個指令都正常執行，便可以打開你的local port檢查是否正常！


## Vite專案部署至github流程

（本篇為SSH金鑰的部署方法，因HTTPS一般部署不成功：（
在執行以下步驟之前，請參照本影片至github新增金鑰。

** mac新增金鑰手把手：
https://www.youtube.com/watch?v=cGcpVQlhbuI&ab_channel=Hamed

確定有金鑰後可開始：

1. 新開發完成後在終端機內輸入control+c結束開發環節
2. 新增一個github的儲存庫repository
3. 依序執行以下commit步驟（熟悉一般commit流程的可自行操作）

(備註：SouthernViter是你的github用戶名稱; myViteRepo是你的儲存庫名稱)

git init
git add .
git commit -m "0000-commit"
git remote add origin [e-mail]:SouthernViter/myViteRepo.git
git push -u origin master

4. 重新整理github確認是否部署到github的步驟完成

--------(第5步可以在開發時就先新增好)--------

5. 新增一個shell script放在專案的根目錄，在此命名為deploy.sh
6. 在這個檔案中copy and paste以下code (參考官方文件：https://vitejs.dev/guide/static-deploy.html)

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# place .nojekyll to bypass Jekyll processing
echo > .nojekyll

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -B main  #這邊的分支跟你當初git push的分支要同一個
git add -A
git commit -m 'deploy'

#以下是兩個選項，要main分支的選擇一，要gh-pages選擇二：

# 選擇一：if you are deploying to https://<USERNAME>.github.io
# git push -f [e-mail]:<USERNAME>/<USERNAME>.github.io.git main

# 選擇二：if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f [e-mail]:<USERNAME>/<REPO>.git main:gh-pages

#這邊的分支跟你當初git push的分支要同一個，如果是master，就寫master:gh-pages

cd -

7.接著至vite.config.js新增base屬性

export default defineConfig({
plugins:[...],
base:'<REPO>/',  #你的repo儲存庫名稱
...
})

8.儲存好該檔案後，至終端機

npm run build
sh deploy.sh

9.終端機顯示：


就可以上gh-page檢查了！