vite專案配合gh-pages 套件發佈靜態站台

GitHub 越來越方便，除了可以方便分享程式碼之外，也支援靜態網站的發佈，意思就是在指定的

repository下有個網站，方便人們檢視成果，這邊紀錄設定及發佈步驟...

首先使用 vite 簡單建立個 vue 專案(其他類別也可)

在依照指示將專案站台跑起來

先將站台停止，然後使用 vscode 開啟專案

進入專案後，預設會雞婆的跑起站台，也可以先停掉

接個安裝套件 gh-pages

語法：npm install gh-pages --save-dev

接著我們查看 package.json 是否該套件

再來先來到自己的 GitHub，並且新增一個 repository

我這邊新增一個 vue-gh-pages 的 repository，並且設定為 public

建立之後，你會得到這個 repository 的網址，並且下方有跟你專案綁定的指令

若是新的專案尚未有git 版控，可以使用上方的方式綁定，若是既有的專案，已經有git 版控，

可以使用下方方式綁定

由於我們是新的專案尚未有 git 版控，所以我們使用上方指令來綁定repository ，但是有一點點調整

git init

git add .

git commit -m “first commit”

git branch -M main

git remote add origin https://github.com/username/vue-gh-pages.git

git push -u origin main

完成後，重新整理網頁，應該會看到類似如下畫面

再來編輯vite.config.js

這邊要多加 base 屬性，並且指定跟你的 repository name

再來編輯 package.json，加入以下屬性，代表 depoly 時會先建置然後再將 dist

資料夾下的檔案推到遠端 github 的  gh-pages 分支下

緊接著跑指令 npm run deploy

完成後，此時回到 GitHub 網頁

進入 Settings → Pages ，可以看到網站的網址

點選 visit site 檢視

參考

• gh-pages