Motor de sites
Cada site novo começa do zero e te trava por semanas. Este é o motor que faz site no modelo de agência, replicável: você clona, troca a marca e os textos, e entrega. É o mesmo motor que fez este site que você está lendo.
O que resolve
Fazer site do zero toda vez é o que trava quem quer entregar site como serviço: cada projeto vira uma obra. Este motor quebra isso. É um site-base pronto e bem feito (rápido, bonito, ranqueado no Google) que você duplica pra cada cliente: troca cores, marca e conteúdo, e o esqueleto continua o mesmo. Você entrega no padrão de agência trabalhando sozinho. É literalmente o que roda por baixo deste site.
Os ingredientes
- O programa do site (o repo). Feito em Next.js, um jeito moderno de montar sites rápidos e bem ranqueados. Você não precisa dominar, o Claude Code mexe com você.
- Um painel pra editar os textos embutido (o Keystatic): você ou o cliente troca títulos, posts e imagens numa telinha simples, sem tocar em código.
- Uma conta na Vercel (grátis pra começar): é onde o site fica hospedado. Toda vez que você muda algo, ela publica sozinha.
- Claude Code + GitHub pra clonar, ajustar e guardar. O "01 · Instalação do zero" cobre o zero.
Acesso liberado pra membro. O repo é privado no GitHub, amarrado ao seu login.
O modo de preparo
- Baixa o repo do motor e abre no Claude Code.
- Troca a marca: pede pro Claude Code ajustar cores, fontes e logo pro cliente. O motor já é organizado pra isso ser rápido.
- Põe o conteúdo pelo painel (o Keystatic): textos, páginas e imagens, sem mexer em código.
- Conecta o repo ao seu GitHub e liga na Vercel. A partir daí, cada mudança que você salva a Vercel publica sozinha, no ar em segundos.
- Aponta o domínio do cliente pra Vercel e o site tá entregue.
O que queimou
As cicatrizes que você não paga porque eu já paguei:
- Animação que some pro Google (e no preview). Aquele efeito de o texto "aparecer" conforme você rola a página tem uma armadilha: quando a página não está visível (aba de fundo, ou o robô do Google abrindo pra indexar), o efeito trava e o texto fica invisível. Resultado: seu conteúdo some justo pra quem decide teu ranking. O motor já traz cada aparição com uma rede de segurança: se o efeito não roda, o texto aparece do mesmo jeito.
- "Renderizou" não é o mesmo que "tá pronto". Um print automático da tela não carrega as imagens que só entram quando você rola até elas, então parece que está tudo certo quando não está. Aprendi a olhar de verdade, tela cheia, e criticar corte, vão e imagem faltando antes de dizer que entregou.