公司擋了 Google 文件，
我只好自己蓋一面白板

早上九點，投影布幕上秀出一個 Google 文件連結，講師請大家點開，把裡面的提示詞複製到 ChatGPT。三十秒後，第一排舉手：

「老師，打不開。」

接著是第二排、第三排，最後連坐在門口的人資窗口都舉手了。

公司的資安政策擋掉了 Google 文件，而且擋得比課程大綱還嚴。

於是講師開始念提示詞讓大家照打：「請扮演一位資深顧問，冒號……不是那個冒號，是全形的。」二十分鐘過去，一半的人打錯一個字，另一半的人在等打錯的那一半。

你可能會說，開個 LINE 群組不就好了？可以，一門課開一個群。問題是一學期有好幾門課、好幾家企業，群組越開越多。而且課程結束後群組也不會自己消失，最後只會慢慢變成早安圖跟團購的集散地。

所以我決定自己做一面白板。我在後台貼上指令，學員用手機掃 QR Code，不用登入、不用加好友，按一下就能複製全文。第一版只花了一天，當天就帶去上課。

後來有幾家客戶來問這套能不能買。原因很簡單，因為它好用，而且幾乎不用維護。

學員看到的是一則一則的公告，預設收合起來，點開就是全文，旁邊有個複製全文的按鈕。再長的提示詞都在自己的框框裡捲動，不會把整個頁面拉得老長。

講師看到的是一個管理後台。一門課開一面白板，貼公告、改草稿、置頂，再把 QR Code 投影到布幕上，就這樣。

上面是我的版本，白板跟公告都是示範資料。你請 AI 做出來的畫面可能會不太一樣，就像同一份食譜交給不同師傅，擺盤不同，但做出來是同一道菜。

這套工具背後用了三個服務。別緊張，它們的分工跟開一家小店差不多：

重點是，你每次發公告只會動到倉庫，書櫃跟店面都不用碰。這就是它幾乎不用維護的原因。

可以。我的個人網站就放在 GitHub Pages。但這個白板我放在 Vercel，因為對第一次動手做的人來說，Vercel 少了好幾道關卡。簡單來說，GitHub Pages 像是借你一間免費廚房，洗菜切菜都自己來；Vercel 則是有人先幫你備好料，你只要下鍋就好。

倒數第二列要多提一下：教師登入頁偏偏就要輸入密碼。雖然密碼是直接送到 Supabase、不會經過 GitHub，但官方這條提醒還是放在心上比較好。

簡單講，如果你已經很熟 GitHub Pages、專案庫是公開的，也願意多寫一份建置流程，用 Pages 完全沒問題，Supabase 那邊的設定都不用改。如果是第一次做，用 Vercel 最省事。

資料來源：GitHub Pages limits、Vite Deploying a Static Site、Vercel Hobby Plan，2026 年 11 月查閱。

• 一台電腦，Windows 或 Mac 都可以。
• 一個 Email，用來註冊 GitHub、Vercel、Supabase 三個免費帳號。
• 一個會寫程式的 AI 助理，例如 Claude Code 或 Codex。能直接在你電腦裡建檔案的工具最省事；只能對話的網頁版也行，只是你要多做幾次複製貼上。
• 一個下午，外加一杯咖啡。

另外要有兩個心理準備。

先註冊 GitHub，接著直接用 GitHub 帳號連動登入 Vercel 跟 Supabase，這樣最省事。用同一個 Email 的好處是，哪天有通知信或帳單寄來，你至少知道要去哪個信箱找。

兩個網站都有 Continue with GitHub 的按鈕，直接按下去就好，還能少記兩組密碼。

1. 建立一個新專案，名稱取作 live-board 就好；伺服器區域選離台灣近的，像是東京或新加坡。資料庫密碼請存進密碼管理工具，不要寫在螢幕旁邊的便利貼上。

2. 到 Authentication 底下的 Sign In / Providers，把 Allow new users to sign up 關掉。網頁上沒有做註冊按鈕，不代表別人不能從後門註冊；就像教室門口沒貼歡迎光臨，不代表門有鎖好。

   

3. 到 Authentication 的 Users 頁面按 Add user，幫自己建一個教師帳號。這是整套系統唯一需要的一組帳號。

   

   按 Add user 後選 Create new user。Email 填你自己的，密碼另外設一組；Auto confirm user 保持勾選，這樣就不用再去信箱收驗證信。

4. 記下兩樣東西：Project URL 跟 publishable key。Project URL 長得像 https://一串代碼.supabase.co，在 Integrations 的 Data API 頁面裡叫做 API URL；publishable key 則在 Settings 的 API Keys 頁面。這兩個可以放進網頁程式碼裡。同一個頁面還有一把叫 service_role 或 secret 的金鑰，請把它當成保險箱密碼，絕對不要放進網頁、不要貼給 AI，也不要寫進任何檔案裡。

   

   上面那把 publishable 可以給網頁用，頁面上也有註明可以公開；下面那把 secret 就是保險箱密碼。截圖裡這兩把金鑰都已經先做模糊處理了。

在剛剛建好的本機資料夾裡打開 AI 助理，把下面整段文字貼給它。這份需求已經把我踩過的坑都寫進去了，讓 AI 照著做就能直接避開。

請幫我做一個「課堂即時白板」網站。我沒有程式經驗，請一次只給我一個步驟，等我回報結果再往下。

使用的服務：前端用 Vite（純 JavaScript），資料與登入用 Supabase，最後部署到 Vercel。

學員頁（網址 /?slug=白板代號）
1. 不用登入，只看得到已發布的公告。
2. 每則公告預設收起來，點開才顯示全文；旁邊有「複製全文」按鈕。
3. 長公告在固定高度的區塊裡捲動，不要把整頁撐長。
4. 公告一律當純文字顯示（用 textContent），保留換行，不執行任何 HTML。

教師頁（網址 /admin）
5. 用 Supabase 的 Email 和密碼登入，不要做註冊功能。
6. 可以建立多個白板。每個白板有可以修改的標題，和建立後不能修改的 slug；可以切換白板是否對學員公開。
7. 可以新增、編輯、刪除公告，也可以改為草稿或置頂。
8. 顯示這個白板的 QR Code。QR Code 的內容一律是「網站首頁 + ?slug=白板代號」，絕對不能指向 /admin；QR Code 在瀏覽器裡產生，不呼叫外部服務。

資料庫與安全
9. 給我一份可以直接貼進 Supabase SQL Editor 執行的 SQL：建立資料表、開啟 RLS、寫好權限規則（學員只能讀已發布且公開的公告；教師只能管理自己建立的白板），並替每張資料表寫好 GRANT。
10. slug 不能修改這件事，要在資料庫裡擋住，不能只靠網頁。
11. 網頁只使用 Project URL 和 publishable key，放在 .env.local，並把 .env.local 加進 .gitignore。不要在任何地方使用 service_role 金鑰。

即時更新與省流量
12. 用 Supabase Realtime 只通知「哪個白板有變動」，學員頁收到後再重新讀取公告。
13. 即時連線斷掉時，改成每 60 秒檢查一次，而且只在分頁畫面開著時檢查。
14. 學員頁先只讀公告標題，點開時才讀全文。

最後，教我把程式推上一個新的 GitHub repository，再教我在 Vercel 匯入、選 Vite、填好環境變數並部署。

接下來 AI 會一步一步帶你做。它請你在終端機輸入指令，你就跟著貼；它要 Project URL 跟 publishable key，你就給；如果它跟你要 service_role，記得拒絕。

等 AI 跟你說可以在本機打開了，你會拿到一個 localhost 開頭的網址。先別急著測試，因為這時候還沒連上資料庫，那是下一步的事。

AI 會給你一大段 SQL 語法。打開 Supabase 的 SQL Editor，整段貼上去，按右上角的 Run。看到 Success 就代表過關；如果看到紅字報錯，照前面說的，直接複製貼回去給 AI 處理。

中間那一大片空白區就是貼 SQL 的地方，右上角綠色的 Run 按下去就會執行。

這時候回到本機網址登入教師後台，建一面白板、發一則公告，再開另一個瀏覽器視窗看學員頁面。看到公告自己跳出來的瞬間，你大概會興奮到想拍桌子。不過請拍輕一點，小心桌上的咖啡。

教師登入頁只有 Email 跟密碼兩個欄位，沒有註冊按鈕。登入帳號就是你在第二步幫自己建的那一組。

如果網頁跳出 permission denied，八成是漏了 GRANT 權限設定。Supabase 從 2026 年 10 月底開始，新建的資料表都要明確設定授權，前端網頁才讀得到資料。前面的提示詞已經有交代 AI 要寫這段，萬一它漏掉，把錯誤訊息貼回去請它補上就好。

請 AI 幫你建一個新的 GitHub 專案庫（Repository），把程式碼推上去。推上去之前，先問 AI 一句：「.env.local 有沒有設好排除？」確認有排除再推。

這面白板請獨立放在一個專案庫裡，不要跟你的個人網站或其他課程檔案擠在一起。這句話是血淚教訓，原因等一下講。

1. 在 Vercel 新增一個 Project，從清單裡選剛剛建好的 GitHub 專案庫，按 Import。

   

   第一次匯入時要先按 GitHub 授權，讓 Vercel 讀得到你的專案庫。

2. Framework Preset 選 Vite。

   

   其他欄位都不用動。

3. 在 Environment Variables 填入 Project URL 跟 publishable key，變數名稱要跟 AI 寫在 .env.local 裡的一模一樣。

   

   專案建好之後，隨時可以到 Settings 底下的 Environment Variables 新增或修改，畫面就像上圖。Type 選 Config 就好，因為這兩個值本來就會出現在前端網頁裡，不算機密。Key 填變數名稱，Value 填剛剛記下來的值。

4. 按下 Deploy。

等個一兩分鐘，你就會拿到一個 .vercel.app 結尾的網址。到這裡，你的課堂白板就正式上線了。

上課前有三個測試一定要做：

1. 拿手機掃 QR Code。直接看到公告就過關；如果跳出登入畫面，代表 QR Code 的網址指錯地方了。

2. 電腦開著教師後台、手機開著學員頁面，從電腦發一則新公告。手機在幾秒內自動跳出這則公告就算過關。

3. 把手機的 Wi-Fi 關掉，改用自己的行動網路再試一次。有些企業內網會擋即時連線（WebSocket），這時候白板應該要在 60 秒內自動更新補上。

第二個測試成功的話，畫面看起來會像這樣：

三個測試都過關，就可以放心帶去上課了。

第一版的 QR Code，我是用「目前網址去掉 admin.html」的方式湊出來的。偏偏 Vercel 會自動把網址的 admin.html 簡化成比較乾淨的 /admin，結果程式根本沒去掉半個字。

還好上課當天早上我自己先掃了一次才發現，不然全班掃完 QR Code，大概會一起抬頭看著我，問老師帳號密碼是多少。

信件開頭第一句寫著：

Impressive growth with your Supabase organization!

到了這個年紀，很少收到雲端服務商的稱讚。但讀到第二段才搞懂，它是在委婉提醒我：免費流量額度快爆了。

查了一下發現，原本的寫法會讓學員頁面每 15 秒就把整份公告重新下載一次，連放在手機背景、下課忘了關掉的分頁也照抓不誤。後來我改成先抓標題、點開才抓全文，而且斷線時改成每 60 秒才檢查一次，外加只有畫面開著的時候才動作。

我自己試算了一下，改完之後同樣一堂課耗掉的流量不到原本的二十分之一。前面提示詞的第 12 到 14 點，就是這封稱讚信換來的經驗。

我一開始圖方便，把白板跟個人網站、課程頁面、部落格全部塞在同一個 GitHub 大專案庫裡。結果某天在更新另一門課的網站時，部署流程順手就把白板的程式碼整個清空了。

接下來的四天，Vercel 非常盡責地寄了至少 42 封部署失敗的通知信給我。好消息是，學員頁面從頭到尾都還能用，因為 Vercel 在部署失敗時會自動維持最後一次成功的版本；壞消息是，我的信箱塞了 42 封警告信。

如果你已經跟我一樣放在同一個大專案庫裡，記得去 Vercel 的 Root Directory 設定，把路徑指向白板那層資料夾（如下圖）。但還是老話一句，萬一資料夾被別的流程誤刪，這裡怎麼設定都救不回來。

有一次，管理後台的公告摘要突然一片空白。我查了半天，資料庫裡的內容一筆都沒少，最後才發現是網頁排版出問題，把摘要那一欄擠成 0 像素寬。東西明明在，但畫面上就是看不見，跟期末分組報告裡的某些組員一樣。

一開始我把專案放在 OneDrive 的同步資料夾裡安裝套件，結果 OneDrive 急著同步備份、安裝程式忙著寫入檔案，兩邊同時搶同一批檔案，搞到最後某個關鍵檔案直接變成 0 bytes，整個專案跑不動。