Módulo 05

Crie e publique uma página web

Uma página pro seu serviço, seu evento ou seu link da bio, criada pelo Claude e publicada por você, sem contratar ninguém e (na maioria dos casos) sem gastar nada. E você vai descobrir de uma vez por todas quando precisa ou não de GitHub.

Pré-requisitos: Módulos 01 e 02

Ao final deste módulo você vai:

Entender o caminho de uma página: arquivo → hospedagem → endereço;
Ter criado uma landing page com o Claude e testado no seu navegador;
Ter publicado a página com um link público pra compartilhar;
Saber decidir quando GitHub é necessário (adianto a resposta: quase nunca, no seu caso).

Os 3 pedaços de qualquer site

Desmistificando em uma frase: um site é um arquivo (a página, escrita em HTML), guardado num computador ligado 24h (a hospedagem), acessível por um endereço (o domínio). O Claude resolve o primeiro pedaço inteiro; os outros dois você resolve com cliques.

Arquivo + hospedagem + endereço. Só isso.

A escada de publicação (e onde entra o GitHub)

Existem vários jeitos de colocar uma página no ar. Suba a escada só até o degrau que você precisa:

Degrau	Como	Ideal para
1. Link do Claude	Peça a página no claude.ai como artefato e use o botão de compartilhar: link público na hora.	Testar uma ideia hoje, mostrar pra alguém, uso temporário.
2. Netlify Drop	Arraste a pasta do site pra `app.netlify.com/drop`. Site real, grátis, endereço tipo `seunome.netlify.app`.	Sua landing page oficial, página de evento. O degrau deste módulo.
3. Domínio próprio	Registre `seunome.com.br` (~R$ 40/ano no registro.br) e aponte pro site do degrau 2.	Presença profissional permanente.
4. GitHub + Vercel/Netlify	O site vive num repositório (um cofre de arquivos online); cada mudança publica sozinha.	Sites que mudam toda semana, projetos com mais gente.

Pra landing page de autônomo, a resposta é quase sempre: não precisa.

💡

O que é GitHub, afinal? Um cofre online para arquivos de projetos, com histórico de todas as versões, feito para equipes de desenvolvedores. Ferramenta excelente, mas pro seu site de uma página é como alugar um galpão pra guardar uma bicicleta.

Mão na massa: do zero ao link público

Defina o objetivo da página em uma frase

Uma página boa tem UM objetivo: "agendar uma conversa", "inscrever-se no evento", "chamar no WhatsApp". Escreva essa frase antes de pedir qualquer coisa. Página que quer tudo não consegue nada.
Peça a página ao Cowork usando o kit

Crie a pasta 05 Projetos com Claude\landing-reviva, copie para dentro dela a pasta 03 Marketing/marca do kit (cores, fonte e logo) e conecte a pasta landing-reviva no Cowork. Use o prompt "Landing page" abaixo. Peça tudo em um único arquivo HTML: isso simplifica a publicação.
Teste no seu navegador

Dê dois cliques no arquivo index.html da pasta: ele abre no navegador como um site de verdade, só que visível apenas pra você. No celular ainda não dá pra ver, porque o arquivo existe só no seu computador. É exatamente isso que a publicação resolve, no passo 5.
Rode o ciclo de refinamento

Igual aos documentos: "o título não tem a ver comigo", "quero as cores mais quentes", "o botão do WhatsApp tem que aparecer sem rolar a página". Repita até dar orgulho.
Publique com o Netlify Drop

Acesse app.netlify.com/drop e crie a conta gratuita. Agora o gesto: deixe o navegador aberto nessa página e abra o Explorador de Arquivos por cima, numa janela menor. Clique na pasta landing-reviva, segure o botão do mouse, arraste até a área pontilhada da página do Netlify e solte.
Em segundos você recebe um endereço público (algo como seunome.netlify.app). Dá pra personalizar esse nome nas configurações do site.
Teste o link no celular e divulgue

Abra o endereço no seu celular, confira tudo, e pronto: coloque na bio do Instagram, mande no WhatsApp. Seu site está no ar. Pra atualizar depois: edite com o Claude e arraste a pasta de novo no mesmo lugar.

Prompt · landing page

Crie uma landing page para a clinica ficticia "Espaco Reviva", em um UNICO arquivo chamado index.html (tudo incluido nele, sem arquivos separados).

Objetivo da pagina: fazer o visitante clicar no botao de WhatsApp para agendar uma avaliacao.

Use como fonte:
- "../espaco-reviva/00 Sobre o negocio/posicionamento.md" para a promessa e publico;
- "../espaco-reviva/00 Sobre o negocio/servicos-e-precos.md" para servicos e valores;
- "../espaco-reviva/03 Marketing/depoimentos.txt" para depoimentos;
- "marca/guia-de-marca.md" e os arquivos de logo em "marca/" para cores, fonte e identidade visual.

Estrutura: 1) titulo forte com a promessa da Reviva, 2) para quem e (a dor que resolve), 3) como funciona em 3 passos, 4) quem sao as profissionais (Renata, Camila, Sofia), 5) depoimentos, 6) botao de acao bem visivel, que apareca tambem logo no topo.

Aplique a identidade visual do kit: cores exatas, fonte recomendada e logo. Tem que ficar perfeita no celular. Me pergunte o que faltar antes de comecar.

Casos de uso

Caso básico

A landing page do Espaco Reviva

O passo a passo acima, usando os arquivos do kit. Em uma tarde você cria uma página profissional para a clínica fictícia, já com a cara da marca: cores, fonte, logo e depoimentos. Depois é só repetir o processo para o seu negócio.

Caso avançado

Landing page do SEU negócio

Depois de publicar a página da Reviva, crie a sua. Copie a pasta landing-reviva, renomeie para minha-landing, troque os arquivos de marca pelos seus (ou descreva suas cores/fonte/logo no prompt) e peça:

Prompt · landing page do meu negócio

Reescreva esta landing page para o meu negocio. Troque tudo que for da clinica Espaco Reviva pelas minhas informacoes:

- Meu servico: [descreva];
- Minha promessa principal: [descreva];
- Publico: [descreva];
- Depoimentos: [cole 2 ou 3, ou deixe espacos para preencher depois];
- Identidade visual: [cole suas cores, fonte e descreva seu logo, ou use os arquivos na pasta marca/ se tiver].

Mantenha a estrutura, o objetivo (botao de acao para [agendar/chamar no WhatsApp]) e a responsividade no celular. Tudo em um unico index.html.

Domínio próprio: registre no registro.br (domínios .br, ~R$ 40/ano) e peça ao Claude: "me guie pra apontar meu domínio pro meu site no Netlify". É uma configuração de 15 minutos, e ele te acompanha tela a tela.

Perguntas frequentes

Quanto custa manter um site assim?

Degraus 1 e 2: zero. O plano gratuito do Netlify aguenta com folga o tráfego de uma landing de autônomo. O único custo opcional é o domínio próprio (~R$ 40/ano). Compare com R$ 100-300/mês de plataformas de site prontas.

Preciso aprender HTML?

Não. Você precisa saber DESCREVER o que quer; o Claude escreve o código. É útil só saber o que o HTML é (o arquivo da página), pra não ter medo dele. Se abrir o arquivo e ver códigos, feche sem culpa: ninguém precisa ler esse código, nem quem programa lê o dos outros.

Como atualizo a página depois de publicada?

Edite com o Claude na sua pasta local ("muda o preço pra R$ 300") e arraste a pasta de novo no painel do seu site no Netlify. A nova versão substitui a antiga no mesmo endereço, em segundos. Se um dia isso virar rotina semanal chata, aí sim o degrau 4 (GitHub) automatiza.

Meu site vai aparecer no Google?

Com o tempo e otimização, sim. Peça ao Claude pra incluir título e descrição otimizados pra busca (ele sabe o que é SEO). Mas seja realista: pra autônomo, o site funciona primeiro como destino de link (bio, WhatsApp, cartão), não como fonte de tráfego do Google. Divulgação ativa vem primeiro.

Onde caem as respostas do formulário?

No painel do serviço de formulário. Com Tally (grátis e em português): as respostas ficam em tally.so, com aviso por e-mail a cada inscrição, e dá pra mandar tudo automaticamente pra uma planilha do Google, que o seu Claude já alcança via Composio. Círculo completo.

Por que não usar Wix, Canva ou outra plataforma de arrastar?

São opções válidas! A diferença: aqui o site é um ARQUIVO SEU, editável por conversa com a IA, hospedado de graça, sem mensalidade e sem ficar preso a plataforma. Se você já paga e usa bem um construtor, mantenha. Se está começando do zero, o caminho deste módulo é mais barato e mais seu.

Posso ter várias páginas (site completo) em vez de uma?

Pode: peça "crie também uma página 'sobre.html' e linke as duas". A pasta com os dois arquivos sobe pro Netlify do mesmo jeito. Mas comece com uma página só: site grande sem conteúdo validado é enfeite. A landing ensina o que seu público quer ler.

O endereço "meusite.netlify.app" não pega mal?

Pra testar e pros primeiros meses, é perfeitamente aceitável; o que pega mal é não ter página nenhuma. Quando o negócio validar, R$ 40/ano resolvem: seunome.com.br apontando pro mesmo site.

E se o link do Claude (degrau 1) for suficiente pra mim?

Ótimo, use! Pra mostrar um cardápio de serviços a um cliente, validar uma ideia, criar uma página de agradecimento rápida, o artefato compartilhado resolve sem tocar em hospedagem. Só suba o degrau quando o link virar coisa oficial do negócio (bio, materiais impressos).

Alguém pode "hackear" ou derrubar meu site?

Uma landing estática (sem senha, sem banco de dados) é o tipo mais seguro de site que existe: não há o que invadir. A hospedagem é de uma empresa grande com proteções profissionais. Seu único cuidado real: a senha da SUA conta no Netlify (use senha forte e única).

Registrei um domínio anos atrás e nunca usei. Serve?

Serve, e domínio parado é ativo desperdiçado. Verifique se ainda está pago (no site onde registrou) e peça ao Claude pra te guiar no apontamento pro seu novo site. É o upgrade mais barato que existe: custo zero, você já pagou.