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。