EP-50 [影片] 使用 Replit 進行 Vibe Coding！建立前端網頁，連接 Notion 資料庫，一鍵就部署
Replit 實作 Vibe Coding：瀏覽器寫程式一鍵部署，串接 Notion 後端，涵蓋 Database ID、圖片處理與成本控管重點。
你嘗試過 Vibe Coding 嗎？
Vibe Coding 是一種使用 AI 寫程式的技巧，讓 AI 接手寫程式，人類只需要開出需求即可。
不過，不管是哪一款 AI 工具，大多都還是需要人類介入，沒有辦法從環境設定、程式撰寫、應用程式部署，全面接手。
但是，今天介紹的 Replit ，就能夠這麼做。
Replit 是一個現代化雲端程式開發平台，你完全不需安裝任何軟體，打開瀏覽器就能直接寫程式。
而且 Replit 支援一鍵部署，寫好程式後，立刻就能夠上線，分享給其他人。
使用 ChatGPT 討論應用程式方案
我強烈建議開發前，一定要先跟 ChatGPT，或者任何你習慣的語言模型，討論你想開發的程式。
讓它提醒你沒看到的盲點。
我這次設計的方案是，讓 Notion 當作後端，當你在 Notion 寫了一篇文章後，前端網頁就能夠自由呈現。
這樣的作法比起單純使用 Notion ，再Publish ，能夠控制的頁面功能較多。
開始使用 Replit 部署
當你要開始使用 Replit 時，可以先來看看它的方案
免費版（Starter）提供的功能如下：
免費註冊與使用，可立即開始雲端開發體驗
最多 10 個公開專案（Public apps，皆自動生成臨時分享連結）
僅支援公開專案（無法建立私人專案）
可試用 Replit Agent（AI 助手）部分功能，擁有基本的 AI 補全與程式生成能力
支援多種編程語言，可免安裝於瀏覽器即可開發
有限的開發時間與資源，1200分鐘
部署服務：能將程式直接分享、體驗部屬，包含基本流量限制（10GB/月）
每個專案 2GB 儲存空間，同時擁有一定記憶體與運算資源配額
我自己是使用 Core 這個方案，每月是25元美金
每月 $25 美金雲端資源額度
可建立無限多的專案（包括公開與私人專案）
支援最新 AI 模型存取
資源配額顯著提升：最多 8 vCPUs、16GB 記憶體、100GB 檔案存儲/流量
開發的時候，就把你之前討論後的提示詞，放到首頁對話框，送出即可
在此之前，由於本次我們希望把 Notion 當作後端，所以可以先按左側的 Integrations
在這裡我們可以跟 Notion 連結在一起，連結的時候它會要求你確認你要連結哪一個Notion頁面或者資料庫。
不過我發現，即使我們連結好特定資料庫，Replit 還是無法知道到底是哪一個 Notion 資料庫，
我們必須指定資料庫 ID
以本次為例子
Notion Database ID 就是斜線後，問號之前這一串數字
如果你不懂，問ChatGPT，他應該會告訴你同樣的答案 給它ID之後，他就能抓到文章了
中途我還增加功能，讓它也能夠抓到圖片
然後右上角的 Theme 也能設定大小、顏色
有什麼需要注意的細節
注意，25美金額度不多，可能很快就用完了，像我之前就花了30美金，還花超過額度
建議後端另外開發
單純開發前端的話，應該是不用花到太多錢
例如這次花了5美金，後續如果在新增一些功能，修改版型，
我預計大概15美金以內會搞定
怎麼部署
部署的時候只要按下旁邊的 Publish ，設定完網址，就能夠部署了
今天就示範到這裡，如果躍躍欲試，也想支持我，可以使用我的連結，平台會給我10美金的額度。我就可以測試更多範例，提供給各位參考。
https://replit.com/refer/taiwankaiyuan
問與答
Q1：Replit 可以從零到一鍵部署嗎？需要我手動處理哪些步驟？
A1：可以。Replit 提供雲端開發環境與一鍵 Publish 部署，免安裝、免自行配置相容性問題。你只要在瀏覽器撰寫並執行程式，設定好專案與網址即可部署。若需串接 Notion 作為後端，仍需提供目標資料庫的 Database ID，並在程式中完成資料抓取與頁面呈現的邏輯。
Q2：用 Replit 開發這類前後端整合，費用大約多少？有什麼控管重點？
A2：免費方案可體驗，但資源有限。作者使用每月 25 美元的 Core 方案，實作此案例前端大約花了 5 美元，後續擴充功能預計 15 美元內可完成。建議：將計算或長時資源移到後端（或自架服務），前端放 Replit；注意每月額度與部署流量，避免像先前一樣超支。
Q3：Notion 的 Database ID 要怎麼取得？
A3：打開要串接的資料庫頁面，從網址中找到資料庫 ID：通常是斜線之後、問號之前的一長串字元。將這段 ID 填入程式或 Replit 的環境變數中，程式即可精準抓取內容。
Q4：要怎麼讓前端同時抓到 Notion 文章內的圖片？
A4：在抓取文章內容時，同步處理富文字或檔案欄位中的圖片 URL，於前端渲染時將來源設為該 URL。若圖片需要授權或臨時簽章，建議透過後端代理或預先轉存，避免跨域或權限問題。
Q5：部署後如何監控流量與雲端額度，避免超支？
A5：定期查看 Replit 專案的使用儀表板，關注每月計算分鐘數、儲存、與流量。前端採用靜態化與快取策略，將重計算工作移至後端或批次處理。設定預算上限與告警門檻，超量時暫停非必要服務或降級模型。
工商時間
斗內
如果這篇文章幫你省下摸索時間、讓開發思路更清晰，那我的目標就達成了。
想讓我持續拆解更多實戰案例？訂閱與分享就是最直接的支持。 當然，也歡迎請我喝杯咖啡，讓我繼續向前衝！
付費社群
我創立的付費社群「一人公司 × AI 共學圈」現已上線。
這是專為想透過 AI 建立個人事業的朋友打造的學習空間。
加入後，你將獲得：
🎓 深度付費內容
主題涵蓋 AI 自動化應用、AI 知識管理術，以及 一人公司 的經營策略與實戰心法。
🎥 不定期線上直播
從工具操作、思維框架到真實案例拆解，幫助你快速整合 AI 與個人事業。
🎟 會員專屬優惠
享有進階課程與限定工作坊的優先報名權與折扣價格。
由於社群仍在持續完善中,現在推出早鳥優惠：
單次支付 10 美元，終身享有會員資格。
所有基礎課程內容永久開放，不需額外付費。
直播課程結束後，我會進行剪輯並加上字幕,方便你隨時複習。
待基礎課程完整上架後，將改為每月 5 美元 的訂閱模式。
如果你希望善用 AI 提升生產力、建立個人化工作系統,
歡迎加入「一人公司 × AI 共學圈」，
一起深入學習 AI 自動化應用、AI 知識管理術,
創造屬於你的理想工作模式。