1. 前言:當你使用 Gemini Canvas 時,會遇到什麼問題?
如果你用過 Gemini Canvas 來做設計工具或互動頁面,可能會遇到這些困擾:
Gemini Canvas 的限制
Gemini Canvas 雖然可以無限分享,但這個「分享」其實是把整個專案都分享出去,包含原始的程式碼。這代表:
- 你的程式碼會完全暴露給別人看
- 別人可以直接複製你的作品
- 原本的網址很醜,不適合正式使用
這些問題讓很多人頭痛。有沒有更好的解決方案呢?
這篇文章會一步步帶你把 Gemini Canvas 做出的工具部署到雲端,變成一個屬於你的專屬網址。完成之後,你將擁有一個可以分享給別人的固定網址,甚至可以把這個網址提交到 Google Search Console,讓大家在搜尋時更容易找到你的網站。
2. 環境與素材準備
2-1 把專案下載到電腦上
在開始部署之前,我們先把你在 Gemini Canvas 裡完成的作品,下載成可以部署的網站檔案。
步驟一:建立空資料夾
在電腦上先建立一個空的資料夾,專門用來存放這次下載的網站檔案。
步驟二:把程式碼貼到下載工具
請先打開這個小工具:
回到 Gemini Canvas,把 HTML 複製起來,貼到「下載 HTML」的左側的輸入框裡。
步驟三:下載檔案到資料夾
在工具中點擊「下載」按鈕,並選擇第一步所建立的資料夾,將檔案下載到那個資料夾裡。這裡有一個小細節要注意:請不要修改下載下來的檔名,務必保持檔名是 index.html,這樣 Zeabur 在自動部署時,才能正確識別這個檔案。
2-2 註冊 Zeabur
Zeabur 是一個非常適合初學者的雲端部署平台。設定簡單、操作直覺,非常適合用來部署你的設計工具。如果你還沒有 Zeabur 帳號,可以點擊這裡前往
Zeabur 每個月都會提供 5 美元的免費額度,如果只是部署少量的專案,實際支出通常非常低。像是純靜態網頁的部署,每個月大概不到 10 元台幣 就能運作。
另外,你在註冊時不需要綁定信用卡,只要完成一次性的電話驗證即可。電話驗證是 Zeabur 用來防止惡意註冊和濫用資源的安全機制,對一般使用者來說只要照步驟完成就可以安心使用。
3. 把專案部署到 Zeabur 囉
現在我們已經註冊好 Zeabur,專案也順利下載到電腦裡了,接下來就是要學著把專案部署到 Zeabur。以下會用三個步驟帶你完成整個流程。
步驟一:上傳專案到 Zeabur
首先,你需要把下載的專案上傳到 Zeabur。以下是詳細的操作步驟:
操作重點:
- 在 Zeabur 中建立一個新專案
- 在地區選單中選擇「Silicon Valley」地區
- 點選「本機專案」,選擇你剛剛建立並下載好的專案資料夾
步驟二:建立網域(Zeabur 子網域)
接下來,我們要幫專案建立一個可以分享出去的網址。這裡先使用 Zeabur 提供的子網域,未來如果你有自己的網域(例如:yourname.com),也可以再另外綁定。
操作重點:
- 在專案頁面中,點選上方的「Domains」標籤
- 新增一個 Zeabur 子網域,例如:
yourtool(只能使用英文小寫或數字)
小提醒:這裡輸入的「網域名稱」不能包含空白、符號或大寫字母,建議使用簡單好記的英文單字搭配數字。
建立完成後,你會得到一個類似 https://yourtool.zeabur.app 的網址,之後就可以用這個網址分享給其他人。
步驟三:開啟並檢查你的自訂網域
當 Zeabur 後台中你的網址那一行變成綠色狀態,代表網域設定已經生效,這時你就可以實際打開你的自訂網域,確認網站是否正常運作:
檢查重點:
- 確認網址列已經顯示你的自訂網域,例如:
yourname.com - 確保畫面載入的網站內容正確,沒有出現 404 或錯誤頁面
- 在手機與桌機各打開一次,確認在不同裝置上顯示也都正常
4. 總結
透過這個方法,你可以:
- 讓更多人可以透過網址直接使用你的 Gemini Canvas 作品
- 使用自己喜歡的網址,讓作品看起來更專業
- 完全掌控自己的專案,隨時可以修改、更新與重新部署
整個流程其實很簡單:下載專案 → 準備 Zeabur 環境 → 把專案部署上去並設定網域。只要按照這些步驟,你就能讓你的 Gemini Canvas 設計在網路上穩定運作。
只要你學會這套流程,不管是哪個平台,像是 ChatGPT、Claude、Grok 所生成的檔案,都可以先下載下來,然後再部署到 Zeabur 上面去,讓你的作品真正被更多人使用。
如果你已經能夠跟著這篇教學順利完成部署,其實就代表你已經掌握了入門的 Vibe Coding 技能。
接下來,如果你想學習如何打造更完整的專案,包含串接後台資料庫、會員系統與更多商業應用場景,歡迎報名我的實體進階實戰課程,一起把這些作品變成真正能在現實世界運作的產品。