將專案上傳到github遠端儲存庫上面

• 先打開github -> 建立repository -> vite-deploy-sample

• 建立好遠端儲存庫之後呢，我們要先把我們的專案進行commit

  • 專案git init加入版本控制
  • git add .
  • git commit -m "message"
  • 複製github建立儲存庫後的指令
    • 貼在終端機上完成上傳專案的動作
    • 記得要把master分支改成main
      • git branch -M main

  ## 先將vite網站給予的部署指令-show scripts腳本寫入到專案

• 新增檔案deploy.sh在專案根目錄
• 複製short scripts並貼在deploy.sh
  ```
  #!/usr/bin/env sh

当发生错误时中止脚本

set -e

构建

npm run build

cd 到构建输出的目录下

cd dist

部署到自定义域域名

echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

部署到 https://.github.io

git push -f git@github.com:/.github.io.git master

部署到 https://.github.io/

git push -f git@github.com:/.git master:gh-pages

cd -
```

• 稍微調整一下內容：
  
  master記得改成main分支
  網址是https
  git push -f https://github.com/你的github名稱/vite-deploy-sample.git main:gh-pages

• 存檔後，在指令上輸入sh deploy.sh

  • 接下來他就會開始運行指令
  • 就會在github的分支上出現github pages

• 接下來打開靜態網頁會發現404

  • 原因是因為我們目前所編譯的結果路徑是對應在根目錄上，因為路徑不同所以會找不到檔案，
  • 所以我們還需要修改vite.config.js檔案加上base網址（base: "/vite-deploy-sample/",）這裡設定是代表到時候編譯完成的dist所對應的路徑是哪一個也就是要去我們在github儲存庫的編譯完成路徑
    
• 然後再跑一次npm run build
• 你看看自己dist資料夾所對應的路徑都已經改成儲存庫的網址
• 再次重新部署一次
  • npm run build
  • sh deploy.sh
• 部署完可以去github pages分支看下dist資料夾中的路徑是否更新了
• 看github pages就可以看到畫面的
  ## deploy到底做了什麼事情？
• $npm run build幫我們的網站編譯出來
• 第二件事他會幫我們 cd dist 進入到這個已經完成編譯而生成的dist資料夾裡面
• 接下來他會透過git指令幫我們把dist專案部署到遠端