這份文件說明如何把 Tabin 推到 GitHub，並使用 Vercel 部署成可公開存取的網站。

前置需求

• 已安裝 Node.js。

• 已有 GitHub 帳號。

• 已有 Vercel 帳號。

• 本機可以執行 npm install 和 npm run build。

1. 確認專案可以建置

在專案根目錄執行：

npm install
npm run build

建置成功後，Vite 會產生 dist 資料夾。這個資料夾是部署後的靜態網站輸出。

2. 建立 GitHub Repository

在 GitHub 建立一個新的 repository，例如：

tabin

建立時可以不要勾選 README、.gitignore 或 license，避免和本機專案內容衝突。

3. 推送專案到 GitHub

如果本機尚未設定 remote：

git remote add origin <https://github.com/YOUR_USERNAME/tabin.git>

提交並推送：

git add .
git commit -m "Initial Tabin deployment"
git branch -M main
git push -u origin main

之後每次修改完成，都可以用：

git add .
git commit -m "Update Tabin"
git push

4. 在 Vercel 匯入 GitHub 專案

1. 前往 Vercel。

2. 登入後選擇 Add New Project。

3. 選擇剛剛建立的 GitHub repository。

4. Vercel 通常會自動偵測這是 Vite 專案。

設定值建議如下：

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

確認後按下 Deploy。

5. 取得部署網址

部署完成後，Vercel 會提供一個網址，例如：

<https://tabin-yourname.vercel.app>

之後 GitHub 的 main 分支有新 commit 時，Vercel 會自動重新部署。

6. 設定 Chrome 新分頁 Extension

如果要讓 Chrome 新分頁自動打開 Tabin，請修改：

extension/newtab.html

把裡面的網址：

const TABIN_URL = "<https://your-tabin-vercel-url.vercel.app>";

改成你的 Vercel 部署網址，例如：

const TABIN_URL = "<https://tabin-yourname.vercel.app>";

noscript 裡的連結也可以同步改成相同網址。

7. 載入 Chrome Extension

1. 開啟 Chrome。

2. 前往 chrome://extensions/。

3. 開啟右上角 Developer mode。

4. 點選 Load unpacked。

5. 選擇專案內的 extension 資料夾。

載入後，Chrome 的新分頁會導向你部署好的 Tabin 網站。

8. 更新部署

修改 App 後，先在本機確認：

npm run build

確認成功後推送到 GitHub：

git add .
git commit -m "Update layout"
git push

Vercel 會自動偵測 GitHub 更新並重新部署。

注意事項

• Tabin 的資料存在瀏覽器 localStorage，不會因為重新部署而自動同步到其他裝置。

• 如果清除瀏覽器資料，書籤也可能被清掉，建議定期使用匯出功能備份。

• 如果 Vercel 部署網址改變，記得同步更新 extension/newtab\.html。

• 如果 Chrome extension 修改後沒有生效，回到 chrome://extensions/ 點擊重新載入 extension。