Criar um site no Google AI Studio é a parte fácil: você descreve o que quer e o Gemini monta tudo em minutos. O problema começa depois, quando chega a hora de publicar o site do Google AI Studio num endereço de verdade, que qualquer pessoa consiga abrir.
É nesse ponto que muita gente trava. O site funciona dentro do AI Studio, mas na hospedagem aparece uma página em branco, os recursos de IA param de responder ou o domínio não aponta para lugar nenhum.
O canal MeticsMedia publicou um tutorial mostrando o caminho completo, do GitHub ao domínio próprio. Neste passo a passo você vê o mesmo processo, explicado em português e com cuidados extras para quem está no Brasil.
Por que o site não vai para o ar sozinho
O Google AI Studio é um ambiente de criação. Ele gera o código do site, mas não é um serviço de hospedagem pensado para deixar seu projeto no ar com domínio próprio, painel de controle e atualizações automáticas.
Para isso você precisa de três peças trabalhando juntas. O vídeo organiza o processo exatamente nessa ordem:
| Peça | Para que serve | Exemplo usado no vídeo |
|---|---|---|
| Repositório no GitHub | Guardar o código do site e servir de ponte para a hospedagem | Projeto salvo direto do AI Studio |
| Hospedagem com Node.js | Rodar o site 24 horas por dia num servidor | Hostinger, com app web em Node.js |
| Domínio próprio | Dar um endereço fácil de lembrar ao site | Domínio conectado no painel da hospedagem |
Os fatos sobre o vídeo vêm do título, da descrição e dos capítulos publicados pelo canal. As explicações sobre segurança da chave e domínio .com.br são nossas, para você não cair nas armadilhas mais comuns.
O que você precisa antes de começar
Separe estes itens antes de seguir o passo a passo. Com tudo à mão, o processo inteiro leva pouco tempo:
- Um projeto de site já criado e funcionando dentro do Google AI Studio.
- Uma conta gratuita no GitHub, onde o código vai ficar guardado.
- Uma hospedagem que aceite aplicações em Node.js. O vídeo usa a Hostinger, mas o raciocínio vale para outras empresas.
- Sua chave de API do Gemini, gerada no próprio Google AI Studio.
- Um domínio, se quiser um endereço próprio. Para público brasileiro, um .com.br registrado no Registro.br passa mais confiança.
Como publicar o site do Google AI Studio: passo a passo
Siga os passos na ordem. Cada um corresponde a um capítulo do tutorial original, com explicações adaptadas:
O vídeo começa explicando que hospedagem é o computador que fica ligado o tempo todo servindo seu site. Sem ela, o projeto só existe dentro do AI Studio. Escolha um plano que suporte Node.js, porque os sites gerados pelo AI Studio usam esse ambiente para rodar.
No painel da hospedagem, crie um novo site do tipo aplicação web em Node.js. No tutorial, essa etapa é feita na Hostinger, mas o conceito é o mesmo em qualquer serviço compatível: você cria o espaço que vai receber o código.
Dentro do Google AI Studio, use a opção de salvar o projeto no GitHub. Isso cria um repositório com todo o código do site. A partir daqui, o GitHub vira a fonte oficial do seu projeto e a ponte entre o AI Studio e a hospedagem.
Ainda no painel da hospedagem, conecte o domínio que você quer usar. Se ele foi comprado em outro lugar, será preciso apontar o DNS para a hospedagem. Essa propagação pode levar algumas horas, então vale fazer este passo cedo.
Se o seu site usa recursos de IA, como um chat ou um gerador de textos, ele precisa da chave de API do Gemini para funcionar fora do AI Studio. Cadastre a chave nas variáveis de ambiente da hospedagem, nunca colada direto no código.
Conecte o repositório do GitHub à aplicação Node.js na hospedagem e inicie a publicação. A hospedagem baixa o código, instala as dependências e coloca o site no ar no endereço configurado.
Esse é o erro que pega quase todo mundo: o site abre, mas aparece só uma tela branca. O canal sugere pedir ao próprio AI Studio para ajustar o arquivo vite.config.ts, definindo a base como “/” para produção, sem mudar mais nada no design. Depois disso, publique de novo.
Com AI Studio, GitHub e hospedagem conectados, as mudanças feitas no AI Studio e salvas no GitHub passam a aparecer no site publicado sem você precisar repetir o processo. É o chamado auto-sync mostrado no fim do vídeo.
Entendendo o erro da página em branco
Muitos sites do AI Studio são montados com o Vite, uma ferramenta que empacota o código para o navegador. A opção “base” diz ao Vite em qual caminho os arquivos do site vão morar quando ele for publicado.
Se esse caminho não bate com a forma como a hospedagem serve o site, o navegador procura os arquivos no lugar errado e não encontra nada. O resultado é a temida tela branca, sem mensagem de erro visível.
Por isso a correção sugerida no vídeo é tão curta: ajustar a base para “/” faz o navegador buscar os arquivos a partir da raiz do domínio. A instrução de não mudar mais nada evita que a IA aproveite o pedido para alterar o visual do site.
Cuidados com a chave de API e com os custos
A chave do Gemini é como a senha da sua conta de IA. Quem tiver acesso a ela pode gerar consumo em seu nome, e isso vira cobrança se você estiver num plano pago.
Algumas práticas simples reduzem o risco:
- Guarde a chave só nas variáveis de ambiente da hospedagem, nunca em arquivos enviados ao GitHub.
- Se o repositório for público, confira se nenhum arquivo com a chave foi enviado por engano.
- No console do Google Cloud, aplique restrições à chave e acompanhe o consumo com frequência.
- Se desconfiar de vazamento, gere uma chave nova e apague a antiga imediatamente.
Também vale lembrar que sites com IA geram custo a cada uso. Um chat aberto ao público pode receber muitas mensagens de uma vez, então acompanhe o painel de faturamento nos primeiros dias.
Perguntas frequentes
Preciso saber programar para publicar o site?
Não. O processo do vídeo é feito por painéis e botões, e a única edição de código, a da página em branco, é pedida ao próprio AI Studio em linguagem comum.
Posso usar outra hospedagem além da Hostinger?
Sim. O tutorial usa a Hostinger, mas qualquer hospedagem que rode aplicações Node.js e se conecte ao GitHub segue a mesma lógica. Os nomes dos menus mudam de uma empresa para outra.
Por que meus recursos de IA pararam depois de publicar?
Na maioria dos casos, falta cadastrar a chave de API do Gemini na hospedagem. Dentro do AI Studio a chave é usada automaticamente, mas fora dele você precisa configurá-la.
As mudanças que faço no AI Studio aparecem sozinhas no site?
Sim, depois de configurar a sincronização com o GitHub. Ao salvar as alterações no repositório, a hospedagem publica a nova versão automaticamente.
Conclusão
Publicar um site do Google AI Studio exige três conexões: GitHub, hospedagem com Node.js e domínio. Com a chave do Gemini bem guardada e a correção da página em branco, o projeto sai do ambiente de testes e vira um site de verdade.
Ainda não criou seu projeto? Veja nosso tutorial de como criar um app com Google AI Studio e Firebase. E, se quiser outra abordagem, confira o guia de vibe coding no Base44. O vídeo original está no canal MeticsMedia.