Gemini 網站部署

部署你的
Gemini prototype

把 Gemini 生成的 HTML 頁面、React prototype 或靜態前端匯出,發佈成可審核、可分享,也能接自訂網域的 HTTPS 網站。

查看步驟
Gemini
AI
這是一個 React prototype。如果使用 npm packages,部署前請先 build,並避免把 API key 放進前端 bundle。
App.tsxReact
import React from 'react';
export default function App() {
return <div className="bg-slate-950">...
}
把生成的檔案拖放到下方

哪些 Gemini 輸出適合靜態部署?

Gemini 可能在同一段對話裡生成前端、App 邏輯和 API 範例。DeployPages 負責部署其中的靜態前端部分。

HTML 登陸頁

上傳 index.html,以及它引用的 CSS、JavaScript、圖片或字型。這是簡單生成頁最快的路徑。

React prototypes

如果 Gemini 生成 React components 或 Vite 專案,請先執行 build,再上傳產生的靜態 output 資料夾。

Gemini API demos

前端可以發佈在這裡,但需要私密金鑰的 Gemini API 呼叫應放在後端或 serverless function。

文件與產品 mockup

Gemini 協助產生的文件、產品頁、內部 demo 和審核 prototype,只要能靜態匯出,就能用真網址分享。

三步驟把 Gemini 輸出變成上線網站

01
01

生成前端

請 Gemini 產生靜態頁面、prototype、登陸頁或 React 介面,並列出必要檔案和 dependencies。

02
02

準備可部署輸出

簡單 HTML 可直接保存;React/Vite 輸出請先 build 成 dist 這類靜態資料夾。

03
03

上傳並檢查

把靜態檔案放進 DeployPages,再用上線網址檢查路由、圖片、Console 錯誤和外部 API 呼叫。

公開 Gemini build 前先檢查

生成的 prototype 可能看起來已完成,但仍藏著佔位文案、缺失資源或不安全的前端金鑰。

API key 安全

不要把私人 Gemini API key 或 service credential 放進瀏覽器程式碼。受保護呼叫請放到後端。

Build output

React 或 Vite 專案請部署建置後的 output 資料夾,不要上傳原始碼檔案或 node_modules。

資源確認

把想像中的檔名和佔位圖片換成真檔案或穩定託管網址,再上傳。

瀏覽器 QA

用手機和桌機開啟已部署網站、檢查 Console 錯誤,並測試主要連結或表單。

常見 Gemini 部署問題

Fix 01

prototype 需要 Gemini API key

把 API 呼叫移到後端或 serverless endpoint。靜態前端無法安全隱藏私人 API key。

Fix 02

React 程式碼還不能直接給瀏覽器跑

安裝 dependencies 並執行 build 指令。打包後再上傳 dist/build 資料夾。

Fix 03

生成的資源缺失

請 Gemini 列出完整檔案結構,然後建立或替換每個被引用的圖片、圖示、stylesheet 和字型。

Fix 04

表單或登入流程不能用

靜態託管可以渲染 UI。提交、登入、資料庫和受保護操作需要後端服務。

Gemini 部署常見問題

可以上傳大型多檔 Gemini 專案嗎?

可以。如果 Gemini 生成多個前端檔案,請保留專案結構並上傳整個資料夾,不要只上傳單一檔案。

如果生成的程式碼有錯呢?

你可以在本機修正,或請 Gemini 產生修正版,再重新上傳修正後的 build。DeployPages 不會把你鎖在第一版輸出。

支援哪些前端 stack?

靜態 HTML、React、Vue,以及大多數瀏覽器執行的前端輸出都能發佈,只要最終結果是靜態 build。

可以在這裡部署 Gemini API App 嗎?

可以部署前端,但私密 Gemini API 呼叫應放在後端或 serverless endpoint。不要把私密 key 暴露在瀏覽器程式碼裡。

如果 Gemini 生成的是 Next.js App 呢?

如果 App 不需要伺服器功能,請匯出成靜態網站並上傳 out 目錄。SSR、API routes 和 middleware 需要可執行伺服器的 runtime。