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

操作重點:

  1. 在 Zeabur 中建立一個新專案
  2. 在地區選單中選擇「Silicon Valley」地區
  3. 點選「本機專案」,選擇你剛剛建立並下載好的專案資料夾

步驟二:建立網域(Zeabur 子網域)

接下來,我們要幫專案建立一個可以分享出去的網址。這裡先使用 Zeabur 提供的子網域,未來如果你有自己的網域(例如:yourname.com),也可以再另外綁定。

步驟二:設定自訂網域

操作重點:

  1. 在專案頁面中,點選上方的「Domains」標籤
  2. 新增一個 Zeabur 子網域,例如:yourtool(只能使用英文小寫或數字)

小提醒:這裡輸入的「網域名稱」不能包含空白、符號或大寫字母,建議使用簡單好記的英文單字搭配數字。

建立完成後,你會得到一個類似 https://yourtool.zeabur.app 的網址,之後就可以用這個網址分享給其他人。

步驟三:開啟並檢查你的自訂網域

當 Zeabur 後台中你的網址那一行變成綠色狀態,代表網域設定已經生效,這時你就可以實際打開你的自訂網域,確認網站是否正常運作:

步驟三:開啟你的自訂網域

檢查重點:

  1. 確認網址列已經顯示你的自訂網域,例如:yourname.com
  2. 確保畫面載入的網站內容正確,沒有出現 404 或錯誤頁面
  3. 在手機與桌機各打開一次,確認在不同裝置上顯示也都正常

4. 總結

透過這個方法,你可以:

  • 讓更多人可以透過網址直接使用你的 Gemini Canvas 作品
  • 使用自己喜歡的網址,讓作品看起來更專業
  • 完全掌控自己的專案,隨時可以修改、更新與重新部署

整個流程其實很簡單:下載專案 → 準備 Zeabur 環境 → 把專案部署上去並設定網域。只要按照這些步驟,你就能讓你的 Gemini Canvas 設計在網路上穩定運作。

只要你學會這套流程,不管是哪個平台,像是 ChatGPT、Claude、Grok 所生成的檔案,都可以先下載下來,然後再部署到 Zeabur 上面去,讓你的作品真正被更多人使用。

如果你已經能夠跟著這篇教學順利完成部署,其實就代表你已經掌握了入門的 Vibe Coding 技能。

接下來,如果你想學習如何打造更完整的專案,包含串接後台資料庫、會員系統與更多商業應用場景,歡迎報名我的實體進階實戰課程,一起把這些作品變成真正能在現實世界運作的產品。

前往實體進階實戰課程