Playbook de Deploy

Base

O que você precisa saber

▼

📁

Repositório

A pasta do projeto no GitHub. Tudo que você criar fica salvo lá com histórico completo de cada mudança.

📸

Commit

Uma "foto" do código em um momento. Você define uma mensagem e o Git guarda aquele estado.

⬆️

Push

Envia commits pro GitHub. Commit salva local — push manda pra nuvem e dispara o deploy automaticamente.

🚀

Deploy

Publicar o site. O Cloudflare Pages faz isso sozinho toda vez que você dá push.

🌿

Branch

Uma versão paralela do projeto. Você vai trabalhar sempre na branch main por padrão.

⬇️

Clone

Baixar um repositório do GitHub pro seu computador pra começar a trabalhar nele.

IA

Usando a IA do Kiro

▼

O Kiro tem IA embutida — use ela pra tudo

O Kiro usa Claude (da Anthropic) como modelo de IA. Você descreve o que quer em português mesmo, e ele lê seu projeto, cria os arquivos, corrige bugs e explica o que fez. Pense nele como um programador parceiro que nunca reclama.

Vibe Mode

Chat livre

Abra o painel de chat com Ctrl + L (ou ⌘ + L no Mac). É aqui que você vai passar a maior parte do tempo — manda o prompt, a IA cria ou edita o código.

💡

DicaAtive o Autopilot para o Kiro aplicar as mudanças automaticamente sem pedir confirmação em cada arquivo.

Spec Mode

Projetos maiores

Você descreve o projeto completo e o Kiro gera requisitos, design e um plano de tarefas antes de escrever uma linha de código. Ideal para projetos mais complexos.

📋

Quando usarSe o projeto tem várias páginas ou funcionalidades, comece pelo Spec Mode pra ter tudo organizado.

Como pedir

✅ Prompts que funcionam bem

Seja específico: diga o que quer, onde quer e como deve ficar.

Cria uma landing page de portfólio em HTML e CSS com seção de projetos, sobre mim e contato. Usa cores escuras e fontes modernas.

O botão "enviar" do meu formulário não faz nada quando clico. Corrige o JavaScript pra ele mostrar uma mensagem de sucesso.

Adiciona uma navbar fixa no topo com os links: Início, Projetos, Contato. Quando rolar a página, ela fica com fundo escuro.

Transforma esse site em responsivo. Nos celulares o menu deve virar um hamburguer e as colunas devem empilhar.

🎯 Dicas pra pedir melhor

Pequenos ajustes no prompt fazem diferença enorme no resultado.

Diga o contexto"No arquivo index.html, na seção hero..." é muito melhor que "na página".

Peça explicação"Explica o que você fez" faz ele detalhar as mudanças antes de aplicar.

Itere sem medoNão ficou bom? Manda "ajusta para..." ou "prefiro com..." — isso é normal.

Cole o erroQuando der bug, copie a mensagem de erro do console e cole no chat. O Kiro resolve.

Peça revisão"Revisa meu código e me diz se tem algo errado ou que pode melhorar" funciona muito.

Descreva o visual"Estilo minimalista com muito espaço em branco e tipografia grande" gera resultados bem mais precisos.

⚠️

Lembra sempre Depois que o Kiro editar os arquivos, você ainda precisa fazer commit + push pro GitHub. O Kiro edita o código — quem publica é o Git.

Missão 01

🛸 Fluxo completo do zero

Subir projeto pela primeira vez

▼

Passo 01 · GitHub

Crie o repositório

Acesse github.com → clique em "New" (botão verde) → escolha um nome sem espaços (ex: meu-projeto) → marque "Add a README file" → clique em "Create repository".

💡

Dica de nomeUse letras minúsculas e hífens — sem espaços, acentos ou caracteres especiais. O nome vira parte da URL do site.

Passo 02 · Terminal do Kiro

Conecte o repositório ao seu computador

Existem dois cenários aqui. Escolha o que se aplica:

Criou o repo com o README marcado? Perfeito. No GitHub clique em Code → copie a URL HTTPS. Depois no terminal do Kiro:

$git clone https://github.com/SEU-USUARIO/meu-projeto.git

$cd meu-projeto

Pronto — sua pasta local já está linkada ao GitHub. Continue para o Passo 03.

Passo 03 · Kiro + IA

Crie o código com a IA do Kiro

Abra a pasta no Kiro (File → Open Folder). Use o chat (Ctrl + L) pra criar o projeto:

Cria um site de portfólio completo com HTML, CSS e JS. Quero seções de apresentação, projetos e contato. Design moderno e responsivo.

⚠️

ImportanteO arquivo principal deve se chamar index.html e estar na raiz da pasta. Sem isso, o Cloudflare não encontra o site.

Passo 04 · Terminal

Commit e push — sobe pro GitHub

Rode os 3 comandos em sequência:

$git add .

$git commit -m "primeiro commit"

$git push

💡

O que cada um fazadd . seleciona tudo · commit tira a foto com mensagem · push manda pro GitHub

Passo 05 · Cloudflare

Conecte o repositório no Cloudflare Pages

Acesse dash.cloudflare.com → Workers & Pages → Create → aba Pages → Connect to Git → autorize o GitHub → selecione o repositório → Begin setup.

⚙️

Configurações de buildPara sites HTML/CSS/JS: deixe Build command e Build output directory em branco. O Cloudflare detecta automaticamente.

Passo 06 · Cloudflare

Aguarde o deploy e abra o site

Clique em Save and Deploy. Quando aparecer ✓ Success, o site está no ar. O Cloudflare gera uma URL tipo seu-projeto.pages.dev.

🎉

De agora em dianteToda vez que você der push, o Cloudflare faz o deploy automaticamente. Você nunca mais precisa entrar no painel.

Missão 02

🔁 Rotina diária

Atualizar um projeto existente

▼

📌

Memoriza esse fluxoÉ isso que você vai repetir pra sempre. Três comandos, dois minutos, site atualizado.

Passo 01 · Kiro + IA

Faça as alterações com ajuda da IA

Abra a pasta do projeto no Kiro. Edite direto ou use o chat (Ctrl + L) pra pedir mudanças:

Adiciona mais 3 projetos na seção de portfólio com imagens placeholder e descrições fictícias.

Muda a cor primária do site de azul para verde esmeralda em todos os lugares.

Passo 02 · Terminal

Add, commit e push

Os mesmos 3 comandos de sempre:

$git add .

$git commit -m "descreva o que mudou"

$git push

✍️

Mensagem de commitEscreva algo descritivo: "adiciona seção de contato" ou "corrige bug no menu mobile". Vai te salvar quando precisar achar uma mudança.

Passo 03 · Automático

Cloudflare detecta e publica

Depois do push, o Cloudflare Pages detecta automaticamente e começa um novo build. Em 1 a 3 minutos o site já está atualizado.

Missão 03

🔥 Problemas

Erros comuns

▼

🤖

Dica de ouroPra qualquer erro: copie a mensagem e cole no chat do Kiro com "como resolvo esse erro?". Na maioria das vezes ele resolve.

Build FailedDeploy falhou com erro vermelho▼

Causa mais comum: arquivo referenciado no HTML não existe, ou nome com capitalização errada.

01No Cloudflare, clique no deploy com erro e leia os logs — vai mostrar qual linha deu problema.

02Confira se todos os arquivos estão na pasta com os nomes exatos como o HTML referencia.

03Corrija, faça git add . → commit → push e aguarde o novo build.

404Página não encontrada ao acessar o site▼

Causa mais comum: o arquivo principal não se chama index.html, ou está dentro de subpasta em vez de na raiz.

01Verifique se existe um index.html diretamente na raiz do repositório.

02Se tiver outro nome, renomeie para index.html.

03Faça push e espere o novo deploy.

CacheMudei o código mas o site não atualizou▼

Causa mais comum: browser usando versão antiga em cache, ou você esqueceu o push.

01Confirme que o deploy terminou com sucesso no painel do Cloudflare.

02No browser, tente Ctrl + Shift + R ou abre em aba anônima.

03Se ainda não atualizou, rode git status para ver arquivos não commitados.

$git status

Push ErrorTerminal travou ou deu erro no push▼

Causa mais comum: GitHub pediu autenticação ou o repositório tem mudanças que você não tem local.

01Se pediu senha: o GitHub não aceita mais senha — use um Personal Access Token em Settings → Developer Settings → Tokens.

02Se der "remote has changes": rode git pull primeiro, depois tente o push de novo.

03Se não resolver, cole o erro no chat do Kiro. Ou chama o pai. 😄

$git pull

Auth"Repository not found" mesmo o repo existindo▼

Causa: o GitHub não aceita mais senha normal via HTTPS desde 2021. Sem autenticação válida ele retorna "not found" por segurança — não é o nome errado.

01Acesse github.com → foto do perfil → Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token (classic).

02Dê um nome qualquer, escolha expiração e marque o escopo repo (primeiro checkbox). Clique em Generate token e copie o token agora — ele só aparece uma vez.

03Rode git push -u origin main novamente. O Windows vai abrir uma janela pedindo login — coloque seu usuário e cole o token no campo de senha.

04Se não abrir janela, force com o comando abaixo (substitua SEU-USUARIO) e tente o push de novo:

$git remote set-url origin https://SEU-USUARIO@github.com/SEU-USUARIO/meu-projeto.git

💡

Só uma vezO Windows Credential Manager salva o token automaticamente. Da próxima vez o push funciona direto, sem pedir nada.

IAO Kiro gerou código mas não funcionou▼

Acontece às vezes: a IA pode gerar código com pequenos erros, especialmente em funções mais complexas.

01Abra o DevTools do browser com F12 → aba Console — vai aparecer a mensagem de erro.

02Copie o erro e cole de volta no chat do Kiro: "deu esse erro no console, resolve:"

03Se a IA errar várias vezes no mesmo ponto, tente reformular o prompt sendo mais específico.

Referência

Comandos essenciais

▼

git statusMostra o que foi alterado e o que ainda não foi commitado

git add .Seleciona todos os arquivos modificados para o commit

git commit -m "mensagem"Salva um snapshot do código com uma descrição

git pushEnvia commits pro GitHub e dispara o deploy automático

git pullBaixa mudanças do GitHub pro seu computador

git log --onelineLista todos os commits feitos com data e mensagem

git clone [URL]Baixa um repositório do GitHub pro computador

Playbookde Deploy

O que você precisa saber

Usando a IA do Kiro

Subir projeto pela primeira vez

Atualizar um projeto existente

Erros comuns

Comandos essenciais

Playbook
de Deploy