Eu sou o Dante Testa e vou te mostrar, do zero, como criar uma aplicação simples usando inteligência artificial e hospedar gratuitamente no Netlify usando apenas HTML, CSS e JavaScript. Se você acha que essas três tecnologias não são capazes de muita coisa, espere até ver o exemplo do gerador de QR code — e depois imagine o que dá para fazer com soluções como um cardápio digital controlado por Google Sheets.
Atenção: por que isso importa?
Hospedar projetos sem gastar com servidor é uma vantagem enorme para quem está começando, quer testar ideias (MVPs) ou oferecer serviços digitais para pequenas empresas. Com IA gratuita para gerar código (eu uso o Kimi), um editor leve como o VS Code e o Netlify, você tem todo o pipeline: gerar, editar, testar e publicar — sem custo.
O que você vai aprender aqui
- Como gerar código com uma IA gratuita (ex.: KIMI).
- Como estruturar e editar um projeto no VS Code.
- Como fazer deploy manual no Netlify — upload da pasta do projeto.
- Como atualizar, renomear e deletar projetos no Netlify.
- Ideias para monetizar e ferramentas profissionais (ex.: Windsurf).
Passo a passo: do código à hospedagem
Pré-requisitos
- VS Code instalado (editor gratuito).
- Conta no Netlify (gratuita).
- Uma IA para gerar código (usei o Kimi — gratuito).
1. Gerar o código com a IA
Peça para a IA criar uma aplicação simples. No meu exemplo eu gerei um gerador de QR code onde o usuário digita uma URL, visualiza o QR code em tempo real e pode fazer o download da imagem. Peça à IA para entregar os arquivos HTML, CSS e JavaScript. O resultado vem pronto para colar dentro do seu arquivo index.html.
2. Criar a pasta do projeto e abrir no VS Code
- Abra o VS Code.
- Crie uma nova pasta (ex.: “QR”).
- No VS Code, clique com o botão direito e crie um arquivo chamado index.html — esse será o arquivo principal.
Observação importante: o Netlify procura o arquivo index.html como ponto de entrada, então ele precisa estar na raiz da pasta que você fará o upload.
3. Colar o código, salvar e testar
- Cole o código gerado pela IA no index.html.
- Salve (Ctrl+S).
- Use a pré-visualização do VS Code (ou abra o arquivo no navegador) para testar. No meu exemplo, conforme eu digitava uma URL ele já gerava o QR code em tempo real e permitia o download.
Deploy manual no Netlify
1. Criar conta e confirmar e-mail
Crie sua conta no Netlify e confirme o e-mail. Depois do primeiro login você verá a tela para deploy manual.
2. Upload da pasta (não apenas dos arquivos)
- Clique em “Deploy manual” ou “Browse to upload”.
- Selecione a pasta inteira do projeto (por exemplo, a pasta “QR”) — o Netlify espera a pasta completa com index.html e qualquer subpasta (imagens, scripts, etc.).
- Faça o upload e aguarde o Netlify processar. Em poucos segundos seu site estará no ar com uma URL netlify.app.
3. Personalizar o nome e domínio
Você pode alterar o nome do projeto via “Quick setup” ou “Project configuration” e também vincular um domínio personalizado ou proteger com senha se desejar. Eu normalmente deixo para finalizar depois, a opção “Finish later” aparece e você pode ajustar quando quiser.
Atualizar, renomear e deletar projetos
- Atualizar: Dentro do projeto vá em “Deploys” e envie novamente a mesma pasta para sobrescrever os arquivos.
- Renomear: Em “Project configuration” > “Change project name”, altere o nome do seu projeto.
- Deletar: Em “Project configuration” existe a opção “Delete this project” — confirme usando o código gerado pelo Netlify.
Gerenciando vários projetos
Você pode hospedar quantos projetos quiser no Netlify (dentro das limitações da conta gratuita). Eu mantenho vários microsites e protótipos lá — por exemplo, um cardápio digital conectado ao Google Sheets (meu “cardápio Sheets”) e até um mini cardápio de pipoca gourmet com imagens em uma subpasta. Basta fazer upload de cada projeto como uma pasta separada.
Monetização: como ganhar dinheiro com isso
Hospedar de graça abre portas para prestar serviços a clientes sem custo de infraestrutura. Algumas ideias:
- Oferecer cardápios digitais para restaurantes e hospedar o site gratuitamente no Netlify cobrando uma mensalidade pelo serviço e manutenção.
- Vender pequenos sites institucionais ou landing pages geradas com IA e entregar o link hospedado.
- Criar ferramentas úteis (geradores de QR, calculadoras, mini-SaaS) e revender personalizações.
Com criatividade, você pode montar um portfólio rápido, provar valor para clientes e cobrar pela implementação e suporte — mantendo a hospedagem gratuita para reduzir custos.
Ferramentas de IA: gratuitas e profissionais
Existem várias IA que geram código. No meu fluxo eu uso o Kimi (gratuito) para gerar coisas rápidas. Outras opções gratuitas existem (queen, deep siic, etc.).
Se você precisa de uma solução mais profissional e está disposto a investir, recomendo o Windsurf (pago). Ele tem uma interface muito parecida com o VS Code, preview integrado e várias ferramentas que aceleram a criação de projetos complexos. Eu uso e tenho vídeos explicando como tirar mais proveito — se quiser uma aula VIP, me chama no WhatsApp.
Meu WhatsApp: +55 19 99802-1956
Considerações finais
Hospedar no Netlify é uma solução prática, rápida e sem custo para muitos projetos feitos com HTML, CSS e JavaScript — especialmente quando combinada com a velocidade de criação que a inteligência artificial proporciona. Use essa cadeia (IA → VS Code → Netlify) para testar ideias, validar MVPs e começar a prestar serviços digitais agora mesmo.
Quer Aprender Mais? Clique Aqui
FAQ
1. É possível criar um site sem saber programar?
Sim! Usando uma IA como a Kimi, você consegue gerar automaticamente o código HTML, CSS e JavaScript. Basta copiar e colar no VS Code e seguir o tutorial para colocar o site no ar via Netlify.
2. O Netlify é realmente gratuito?
Sim. O Netlify oferece um plano gratuito excelente para projetos pessoais, MVPs, portfólios e sites simples. Ele permite múltiplos projetos com deploys rápidos e sem custos mensais.
3. Posso hospedar quantos projetos quiser?
Dentro das limitações da conta gratuita do Netlify, sim. Você pode criar vários microsites e fazer upload separadamente de cada pasta como um projeto novo.
4. Como atualizar um site que já está no Netlify?
Acesse o painel do projeto, vá até a aba “Deploys” e envie novamente a pasta atualizada — ela sobrescreve os arquivos anteriores automaticamente.
5. Preciso usar Git ou linha de comando?
Não. Este tutorial mostra como fazer tudo de forma manual via upload direto no painel do Netlify — sem precisar de Git, terminal ou comandos complicados.
6. É possível usar um domínio personalizado no Netlify?
Sim. Após o deploy, você pode configurar um domínio próprio ou usar um subdomínio gratuito do Netlify (ex.: suapagina.netlify.app).
7. Como ganhar dinheiro com esses sites gratuitos?
Você pode oferecer serviços como cardápios digitais, landing pages ou miniaplicações para pequenos negócios, cobrando pela criação, personalização e suporte — enquanto mantém a hospedagem gratuita.
8. Qual IA gratuita foi usada no vídeo?
Foi usada a IA Kimi, que gera código rapidamente com base em comandos simples. Existem outras opções também, mas o foco foi na praticidade da Kimi.
9. O que é o Windsurf citado no vídeo?
O Windsurf é uma ferramenta profissional paga, parecida com o VS Code, que facilita a criação de projetos com preview integrado e recursos avançados. É indicada para quem quer criar projetos mais robustos.
10. Onde consigo ajuda ou consultoria para começar?
Você pode entrar em contato com o criador do vídeo, Dante Testa, pelo WhatsApp: +55 19 99802-1956 para tirar dúvidas ou agendar uma aula VIP.
