Vite系列# 部署 Vite 專案至 GitHub Pages


將專案上傳到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專案部署到遠端







你可能感興趣的文章

[MTR04] W1 D3 Git 進階指令

[MTR04] W1 D3 Git 進階指令

Semantic segmentation 簡介

Semantic segmentation 簡介

Join() - 將陣列內的文字連結,但是不要有逗號的方法!

Join() - 將陣列內的文字連結,但是不要有逗號的方法!






留言討論