📅 Encontro · 29 de julho de 2026

Segundo encontro: o projeto sai do seu computador

🚧 Em construção · atualizado em 02/08

Este é o resumo do segundo encontro. Ele conta, na ordem, o que a gente fez ao vivo: começamos de uma pasta vazia e terminamos com um site no ar que se atualiza sozinho. Os blocos "aprofundar" são opcionais.

🔁 Quer refazer no seu computador?

Este resumo conta o que a gente fez e por quê — ele não é um passo a passo. Pra fazer, siga por uma destas páginas, do começo: elas retomam tudo, com os pedidos prontos pra copiar, sem depender de você lembrar do encontro.

Travou em algum ponto? Manda no grupo onde parou — é assim que a página melhora.

🗺️ Onde este encontro se encaixa

Pense no caminho de um projeto em três lugares:

  • 1A sua pasta, no computador — onde você conversa com a IA.
  • 2O GitHub, na internet — a cópia do projeto e de todo o histórico.
  • 3O site no ar — o endereço que qualquer um abre.

A gente percorreu os três, de ponta a ponta, numa demonstração só.

A ordem do que aconteceu
  1. Uma pasta vazia e um pedido solto
  2. O GitHub e o repositório
  3. Juntando as duas pontas
  4. Uma mudança, e o que o GitHub mostra
  5. O site no ar
  6. O ciclo fechado
  7. Sem IA nenhuma: subir arquivo pelo site

1Uma pasta vazia e um pedido solto

Tudo começou do zero, na frente de vocês.

Uma pasta recém-criada, o Claude Code aberto nela, e um pedido de propósito bem vago: "invente um produto e faça a página" — sem dizer o assunto, sem nome, sem texto pronto, sem referência de visual.

  • A IA escolheu tudo: o produto (um curso fictício de ajuste de roupas), as cores, o estilo e o texto.
  • Mas apresentou as escolhas antes de sair fazendo — dava pra discordar de cada uma.
⚠️ Não é assim que se faz no dia a dia. O pedido vago foi de propósito, pra demonstração: era o jeito de ter uma página inteira pronta em dois minutos e mostrar o caminho completo. Na prática vale o contrário — quanto mais você disser o que quer (pra quem é, que tom, o que não pode faltar), melhor sai o resultado e menos você precisa corrigir depois.
Ainda assim, repare: mesmo com um pedido solto, as decisões passaram por você antes de virarem arquivo. Pedir pouco não é perder o controle.

2O GitHub e o repositório

Com a página pronta no computador, faltava tirá-la de lá.

Até esse ponto, o projeto existia num lugar só: aquela pasta. Se o computador quebrar, for roubado, ou se você quiser trabalhar de outro, não tem plano B.

O GitHub resolve isso guardando uma segunda via do projeto na internet — os arquivos e, junto com eles, todas as versões pelas quais o projeto passou.

Essa segunda via tem um nome: repositório (ou só "repo"). E vale separar as duas coisas: GitHub é o serviço; o repositório é o seu projeto lá dentro — ele tem uma página só dele, num endereço no formato github.com/seu-usuario/nome-do-projeto. Cada projeto tem o seu, eles não se misturam, e uma conta pode ter quantos você quiser.

Foi criado ali mesmo, no site: nome sem espaços, marcado como Private (só você vê) e vazio, sem nenhuma opção extra, pra poder receber o que já existia no computador.

Estar no GitHub ≠ estar publicado. O repositório guarda; ele não vira, sozinho, uma página que abre no navegador. Publicar veio depois.

3Juntando as duas pontas

O "linkar", como a gente falou na hora.

💻
No seu computador
a pasta do projeto, com os arquivos e o histórico
– – –sem ligação
☁️
No GitHub
o repositório recém-criado, ainda vazio

As duas pontas já existiam, mas uma não sabia da outra. Era só isso que faltava.

Essa ligação se pede em português, com o endereço do repositório na frase:

o que foi pedido no encontro
Associa este projeto ao repositório https://github.com/seu-usuario/primeira-pagina.git
O endereço em roxo é só um exemplo da cara que ele tem: é a página do seu repositório com um .git no fim. O seu aparece pronto pra copiar na própria tela do GitHub, logo depois de criar.
💡 Aprofundar: por que existem "duas cópias"
A partir daqui o projeto existe em dois lugares: a pasta do seu computador e a cópia lá no GitHub. Elas não se atualizam sozinhas. Você muda algo no computador e a cópia continua igual até você mandar. Por isso o pedido do dia a dia é sempre "envia pro GitHub", e a conferência é abrir o site e olhar.

4Uma mudança, e o que o GitHub mostra

Trocamos o preço do curso pra R$ 250 e mandamos pro GitHub.

Aí veio a parte que costuma surpreender. No site do GitHub, o repositório mostra uma lista de pontos salvos ao longo do tempo (na tela, aparecem como commits), cada um com data, quem fez e uma descrição.

Clicando num deles, aparece exatamente o que mudou:

Trecho de um ponto salvo aberto no GitHub: duas linhas com fundo vermelho, marcadas com sinal de menos, e logo abaixo duas linhas com fundo verde, marcadas com sinal de mais. O preço muda de 197 para 250 e o parcelamento de 19,60 para 24,90, com os próprios valores realçados dentro de cada linha.
A troca de preço, vista por dentro: em vermelho o que saiu, em verde o que entrou. E repare no realce dentro da linha: ele marca o trecho exato que mudou — aqui, só o valor.

Repare que o parcelamento mudou junto, sem ninguém ter pedido: ele dependia do preço, e a IA avisou disso.

Confira sempre com os próprios olhos. Depois de mandar, volte na página do repositório e atualize: os arquivos têm que estar lá. Não basta a IA dizer que enviou.

5O site no ar

Até aqui o projeto estava guardado, mas ninguém conseguia abrir.

Publicar era o passo seguinte natural, e havia dois caminhos na mesa:

  • Cloudflare — grátis pra esse tipo de site e, depois de associado ao GitHub, republica sozinho a cada mudança enviada.
  • Hostinger — pago, e feito pra site com WordPress e banco de dados.

Pra uma página feita de arquivos, como a nossa, o Cloudflare é o certo. No painel dele, em Workers & Pages, o mesmo repositório foi associado ao serviço — e poucos cliques depois o site tinha um endereço público, abrindo no navegador como qualquer outro.

💡 Aprofundar: quem é a Cloudflare

Sabe aquela tela de "verificando se você é humano" que aparece por um segundo antes de um site abrir? Na maioria das vezes é a Cloudflare. Ela funciona como uma portaria na frente dos sites: filtra ataque e tráfego falso, e entrega o conteúdo pela máquina mais perto de quem está acessando.

Pelos números dela, 1 em cada 5 sites da internet passa por lá, com máquinas em 337 cidades. É a mesma estrutura que fica na frente de meio mundo que pode servir uma página sua, de graça.

6O ciclo fechado

A partir daqui, publicar deixou de ser uma tarefa.

Com tudo ligado, foi feito mais um pedido — desta vez bem aberto: "o que dá pra colocar aqui de útil pra quem visita?". Vale reparar nisso: você não precisa saber o que quer. Dá pra pedir sugestões, ver as ideias e escolher. Foram escolhidas duas, e ficaram prontas na hora:

  • Uma ficha de medidas, que a pessoa preenche e guarda.
  • Uma calculadora, que mostra o resultado na hora, conforme ela mexe.
A ficha de medidas: à esquerda, o desenho de uma calça com as medidas indicadas; à direita, os campos de cintura, quadril, gancho, entrepernas e boca da perna. O campo do quadril está selecionado, e a medida correspondente aparece destacada em vermelho no desenho.
A ficha, feita na hora. Quando você mexe num campo, a medida correspondente acende no desenho — aqui, o quadril.

E aí veio a demonstração que fecha tudo: as mudanças foram enviadas pro GitHub e o site se atualizou sozinho, sem ninguém publicar nada. É esse o ciclo do dia a dia — você muda, envia, e pronto.

💡 Aprofundar: isso tem nome, e por que funciona numa página comum

Essas partes que respondem ao visitante são feitas com JavaScript: instruções que viajam junto com a página e que o navegador de quem visita executa, no computador dessa pessoa. É por isso que a página reage em vez de só mostrar texto.

E é por isso que nada disso briga com publicar do jeito simples: o serviço que hospeda continua só entregando arquivos. Quem faz a conta é o navegador, não o serviço.

⚠️ Onde não dá: como tudo acontece na máquina de quem visita, nada fica guardado num lugar comum. Login de verdade, informação de várias pessoas junta, e-mail, cobrança — isso precisa de outra estrutura. E vale saber desde já: o arquivo inteiro é baixado pelo navegador, então o que estiver escrito ali pode ser lido — não serve pra guardar segredo.

7Sem IA nenhuma: subir arquivo pelo site

Um caminho paralelo, que serve pra quem já tem arquivos prontos.

No fim, ficou a demonstração de que dá pra mandar arquivo pro repositório direto pelo site do GitHub, arrastando — e até editar um arquivo ali mesmo, pelo navegador, sem abrir o computador.

Isso vale saber por um motivo prático: se você já tem um site pronto, os arquivos dele podem ir pro repositório por esse caminho, sem passar por nada. E, uma vez lá dentro, o resto é igual — associa ao Cloudflare e ele vai pro ar.

Os dois caminhos convivem. Pela IA, quando você está criando ou mudando; pelo site, quando é só colocar um arquivo que já existe.

🌱 O que ainda vem

Este resumo está sendo completado. O que falta encaixar:

  • 🔎Detalhes que ficaram de fora — se algum assunto do encontro não está aqui, é porque ainda não foi escrito, não porque não teve.
  • 🖼️Mais telas das partes que são mais fáceis de ver do que de ler.
Projeto IA · da família
← Todos os encontros