Aula 19Projeto final: do pedido à página no ar

Objetivos

Ao final desta aula você vai ter:

• Terminado a sua página com o fluxo da Aula 06, a partir de um plano da página inteira
• Escrito as regras da casa num CLAUDE.md
• Conferido o resultado pelo que se vê: no computador, numa janela estreita e no seu celular
• Revisado tudo antes de publicar, com o .env fora de todas as versões
• Criado uma conta no GitHub e posto a página no ar, de graça, com um endereço para mandar a quem quiser
• Feito uma seção nova numa linha paralela (branch) e levado essa seção para o site por um pedido para juntar (pull request), revisado no site do GitHub
• Criado uma skill com os passos de uma seção nova

Chegou a hora de juntar tudo. Nesta aula, você termina a página da confeitaria, ou a da sua ideia, e põe no ar, com um endereço de verdade, como https://seu-usuario.github.io/confeitaria/, para mandar a quem quiser. Cada etapa usa o que você aprendeu numa aula do curso, indicada no título.

A página é pequena de propósito: o que importa é o jeito de trabalhar. Planejar antes de fazer, conferir pelo que se vê, revisar antes de publicar e guardar uma versão sempre que algo funcionar.

O que você vai precisar:

• a pasta da sua página, com o Git das Aulas 06 a 10: o cardápio com filtro, o formulário de encomenda e a trava do envio;
• um e-mail para a conta no GitHub e um celular, para a verificação em duas etapas e para ver a página no ar;
• tempo: as etapas cabem em dias diferentes. Para voltar de onde parou, entre na pasta e abra a conversa com claude --continue (Aula 10).

Não acompanhou a página ao longo do curso? Comece pelo pedido da Aula 03, prepare o Git como na Aula 06 e siga daqui: o plano da Etapa 2 pede o que faltar.

💡 A aula inteira é no Manual. Abra o terminal, entre na pasta e abra o Claude Code: cd Documents/confeitaria, com o nome da sua pasta, e depois claude. Aperte Shift + Tab uma vez e confira se aparece manual mode on. No Manual, cada mudança e cada comando esperam o seu sim, menos os que só olham. Toda vez que voltar a uma conversa, confira de novo.

Etapa 1 · As regras da casa (Aula 11)

O CLAUDE.md é um arquivo de anotações que o Claude lê no começo de toda conversa: o que você escrever nele, não precisa repetir. Fez a Aula 11? Então ele já existe: peça ao Claude para conferir se ele tem as regras do pedido abaixo e completar o que faltar. Se ainda não existe, peça:

Crie um CLAUDE.md com as regras da casa desta página: o texto é em
português do Brasil; as cores são os tons de rosa de hoje; o modo escuro,
o filtro do cardápio e o formulário de encomenda têm de continuar
funcionando; a página precisa ficar fácil de ler no celular; não instale
nada sem me perguntar; e, antes de rodar um comando, explique em
português simples o que ele faz.

Tem o decisoes.md da Aula 07? Acrescente ao pedido: "e use as cores e os textos combinados no decisoes.md".

Leia o arquivo que ele propõe e aprove. Depois, peça "guarde uma versão com o CLAUDE.md" e aprove os comandos do Git, como na Aula 06.

Etapa 2 · O plano da página completa (Aulas 04 e 06)

Aperte Shift + Tab até aparecer plan mode on e faça o pedido com as cinco partes da Aula 04:

Quero terminar a página da confeitaria, numa página só, com quatro
partes, nesta ordem: o início, com o nome e a frase de boas-vindas;
o cardápio com o filtro por tipo de doce; as encomendas pelo WhatsApp;
e o horário de funcionamento com um endereço de exemplo. O que já
existe, como o filtro, o formulário e o modo escuro, tem de continuar
funcionando. Está pronta quando der para ler tudo num celular sem dar
zoom, sem nada cortado nas laterais e com os botões fáceis de tocar com
o dedo. Para conferir, eu te mando um print da página no computador e
outro numa janela estreita, do tamanho de um celular.

Ficou algo no "deixar para depois" da Aula 09, como o rosa diferente de um botão? Ponha no pedido também: o plano é a hora de juntar o que estava esperando.

O Claude devolve um plano. Revise com calma. Antes de aprovar, peça um ajuste seu: escolha No, keep planning (não, continuar planejando) e escreva, por exemplo:

Ponha um menu no topo, com Cardápio, Encomendas e Onde estamos, que leve até cada parte da página.

O plano podia estar certo sem esse menu. O ajuste é de gosto, e é aí que está a graça: a página é sua, e é você quem conduz, enquanto mudar de ideia ainda não custa nada. Quando o plano estiver bom, escolha Yes, manually approve edits (sim, aprovar as edições uma a uma).

Etapa 3 · Fazer no Manual, conferindo pelo que se vê (Aulas 04 a 06)

A cada mudança, o Claude mostra o que vai mudar no arquivo e pergunta se pode. Aceite as que fizerem sentido. Não entendeu uma? Recuse com Tab e peça a explicação em português simples, como na Aula 05.

Quando ele terminar, abra a página no navegador: dois cliques no index.html, ou peça "abra a página no navegador". Se ela já estava aberta, atualize: F5 no Windows e no Linux, Command + R no Mac. Confira:

1. O menu do topo leva até cada parte.
2. No cardápio, ao clicar em Bolos, só os bolos aparecem; em Todos, os seis voltam.
3. Nas encomendas, preencha o nome, o doce e a data, confira a prévia da mensagem e clique em Enviar pelo WhatsApp: o clique leva ao WhatsApp. Com o número inventado, a conversa não chega a abrir, como na Aula 09.
4. O horário e o endereço estão no fim.
5. Com o modo escuro ligado, tudo continua fácil de ler.

Agora, o teste do celular, ainda no computador: arraste a borda da janela do navegador até ela ficar o mais estreita possível, perto do tamanho de um celular. Tire um print, como na Aula 04, cole na caixa de texto (Ctrl + V, ou Alt + V no Windows) e peça:

Este é o print da página numa janela estreita. Confira se dá para ler tudo sem zoom, se nada ficou cortado nas laterais e se os botões são fáceis de tocar com o dedo.

Viu algo errado? Peça o ajuste, aprove e confira de novo. O celular de verdade entra na Etapa 9, com a página no ar.

Guarde uma versão a cada passo que funcionar: "guarde uma versão com uma mensagem em português explicando o que mudou". Se o passo seguinte der errado, você volta para a última versão guardada, como na Aula 10, sem perder o que já estava bom.

Etapa 4 · Revisar antes de publicar (Aula 09)

Daqui a pouco, tudo o que está nas versões guardadas vai para a internet. Antes, a revisão da Aula 09, com mais cuidado do que nunca.

O que mudou. Peça:

Liste os arquivos que mudaram desde a primeira versão guardada e explique cada mudança em português simples.

Depois, pergunte: "mudou algum arquivo que eu não pedi?". Os dois pedidos usam comandos do Git que só olham e rodam sem pedir licença.

A segunda opinião. Rode o revisor da Aula 09, apontando para o arquivo da página:

/code-review index.html

Se a sua página também tem um estilo.css, rode de novo com /code-review estilo.css. Separe cada achado nas três pilhas da Aula 09. Por exemplo (os seus achados serão outros):

Para corrigir, peça a correção e confira você mesmo, com um print, como na Etapa 3.

A senha de fora. Peça:

Confira se o .gitignore ainda tem o .env e se o .env aparece em alguma versão guardada.

A resposta certa: o .gitignore tem o .env, e nenhuma versão guardada tem o .env. Se alguma tiver, pare aqui e pergunte ao Claude como tirar o .env das versões antes de enviar qualquer coisa: o que está numa versão vai junto para a internet. No curso, a senha do .env é falsa, mas o cuidado é o mesmo da senha de verdade.

Os seus dados. O repositório vai ser público: qualquer pessoa vê todos os arquivos e todas as versões guardadas. Antes de enviar, olhe:

• O telefone. O número das encomendas ainda é o inventado da Aula 09, (11) 90000-0000? Para mostrar a página, deixe assim. Com o número de verdade, ele aparece para qualquer pessoa, na página e no repositório, e continua no histórico mesmo que você o tire depois. Só troque se ele puder ser público.
• O endereço. O de exemplo serve. Se o Claude usou um de verdade, como o da sua casa, troque.
• O seu e-mail. O e-mail que assina as versões (Aula 06) aparece no histórico. A Etapa 5 mostra como usar um e-mail privado nas próximas versões.
• Os outros arquivos. Vão todos, menos o que está no .gitignore: o CLAUDE.md, o decisoes.md, o .gitignore e a pasta .claude, com o settings.json e as skills que você criou (Aula 13), também. Nada disso é segredo, mas é bom saber. O index-copia.html da Aula 05 também vai, e ganha um endereço próprio no site. Se não precisa mais dele, peça para apagar.

Corrigiu algo? Confira com um print e guarde uma versão.

Etapa 5 · A sua conta no GitHub

O GitHub é um site que guarda projetos na internet. Com uma conta, você guarda lá as suas versões e liga o GitHub Pages, que põe a página no ar de graça. A conta gratuita basta para tudo nesta aula.

1. No navegador, abra https://github.com/signup. Dá para entrar com um e-mail ou com Continue with Google (continuar com o Google).
2. Siga os passos da tela. Escolha o nome de usuário com calma: ele vira parte do endereço da página, https://seu-usuario.github.io/confeitaria/. Prefira um nome curto e fácil de ditar.
3. Confirme o e-mail. Durante o cadastro, o GitHub pede para você verificar o seu e-mail. Sem isso, ele não deixa criar um repositório.

A verificação em duas etapas. Além da senha, o GitHub passa a pedir um código que muda a cada poucos segundos, gerado num aplicativo do seu celular. Ele recomenda fortemente e exige de algumas contas, avisando por e-mail quando chega a vez delas. Ligue já:

1. No celular, instale um aplicativo de códigos (o GitHub chama de TOTP app), como o Google Authenticator ou o Microsoft Authenticator. O GitHub aceita qualquer um.
2. No GitHub, clique na sua foto, no canto de cima, à direita, e em Settings (configurações).
3. Na barra lateral, na seção "Access" (acesso), clique em Password and authentication (senha e autenticação).
4. Na parte "Two-factor authentication" (verificação em duas etapas), clique em Enable two-factor authentication (ligar a verificação em duas etapas).
5. Em "Scan the QR code" (leia o código QR), aponte o aplicativo para o código da tela. Ele mostra um número de seis dígitos: digite esse número no campo de "Verify the code from the app" (confirme o código do aplicativo).
6. Em "Save your recovery codes" (seus códigos de recuperação), clique em Download (baixar) e deixe o arquivo num lugar seguro: os códigos de recuperação devolvem a sua conta se você perder o celular. Depois, clique em I have saved my recovery codes (já deixei os códigos num lugar seguro).

Opcional: um e-mail privado nas versões. O e-mail que assina as versões aparece para quem olhar o histórico. Para esconder:

1. Em Settings, na seção "Access", clique em Emails (e-mails) e marque Keep my email addresses private (manter os meus e-mails privados).
2. O GitHub mostra um endereço que termina em @users.noreply.github.com. Copie esse endereço e peça ao Claude, com ele no lugar do de exemplo:

Configure o Git desta pasta para assinar as próximas versões com o e-mail 12345678+seu-usuario@users.noreply.github.com.

⚠️ Vale só daqui para a frente. As versões que você já guardou continuam com o e-mail da Aula 06, e elas vão para o GitHub junto com as novas. Se esse e-mail não pode aparecer, pergunte ao Claude antes do primeiro envio: "as versões antigas têm um e-mail que eu não quero publicar; quais são as minhas opções?"

Etapa 6 · O gh, o GitHub no terminal

O gh é o programa oficial do GitHub para o terminal. Com ele, o Claude cria o repositório e abre o pedido para juntar por você. Ele não vem no computador: você instala uma vez e faz o login.

Saia do Claude Code com /exit: a conversa fica guardada, e você volta a ela no fim desta etapa. Os comandos daqui são seus, digitados direto no terminal.

Windows. Digite:

winget install --id GitHub.cli --source winget

Se o Windows ou o winget fizerem alguma pergunta durante a instalação, leia com calma e aceite: é o instalador oficial. No fim, feche a janela do terminal e abra outra: só uma janela nova enxerga o gh, e uma aba nova não basta.

Mac. O gh se instala pelo Homebrew, um instalador de programas para o terminal. Confira se ele já existe:

brew --version

Apareceu um número de versão? Pule para o brew install gh, mais abaixo. Apareceu command not found (comando não encontrado)? Instale o Homebrew pela página oficial: abra https://brew.sh no navegador e, na parte Install Homebrew (instalar o Homebrew), clique no botão de copiar, ao lado do comando. Cole no terminal e aperte Enter.

É o tipo de comando com que a Aula 05 pediu cuidado: baixar um programa e rodar na hora. Aqui, quem decide é você, copiando do endereço oficial, como fez com o instalador do Claude Code na Aula 03. O instalador explica o que vai fazer e espera você confirmar com Enter antes de começar. Ele pede a senha do seu usuário, e é normal nada aparecer na tela enquanto você digita. No fim, ele mostra uma parte chamada Next steps (próximos passos), com comandos para colar: cole e rode cada um, porque sem eles o Homebrew não funciona. Depois, feche a janela do terminal, abra outra e instale o gh:

brew install gh

Num Mac com processador Intel, ou com macOS anterior ao 15 (Sequoia), o Homebrew avisa que essa configuração não tem suporte completo e pode demorar bem mais, porque monta o gh no seu computador. Para saber qual é o seu, abra o menu da Apple e clique em Sobre Este Mac. Deixe terminar e, se der erro, copie a mensagem e peça ajuda ao Claude.

Linux. No Ubuntu e no Debian, abra no navegador a página oficial "Installing gh on Linux and BSD" (instalar o gh no Linux e no BSD), em https://github.com/cli/cli/blob/trunk/docs/install_linux.md. Em "Recommended (Official)" (recomendado, oficial), na parte Debian, passe o mouse sobre o bloco que vem depois de "To install:" (para instalar) e clique no botão de copiar, no canto do bloco. Cole o bloco inteiro no terminal e aperte Enter. O sudo pede a senha do seu usuário, e é normal nada aparecer na tela enquanto você digita.

Não instale o gh pelos pacotes que já vêm no Ubuntu e no Debian: a mesma página avisa que, desde novembro de 2025, as versões 2.45 e 2.46 desses pacotes não funcionam mais com o GitHub, e recomenda o pacote oficial. No Fedora, é um comando só: sudo dnf install gh.

Conferir. Digite gh --version. Apareceu um número de versão? O gh está instalado.

O login. Digite:

gh auth login

Ele faz quatro perguntas. Escolha com as setas e confirme com Enter:

O Yes da terceira é o que deixa o Git enviar as suas versões sem pedir senha a cada envio. Depois das perguntas, o gh mostra um código de uso único, como A1B2-C3D4. Anote, aperte Enter, e o navegador abre numa página do GitHub. Se pedir, entre na sua conta, com a senha e o código do aplicativo da Etapa 5. Digite o código e autorize o acesso. De volta ao terminal, aparecem Authentication complete. (login concluído) e Logged in as seu-usuario (entrou como seu-usuario). Para conferir depois, gh auth status mostra a conta.

Volte ao Claude Code. Entre na pasta e retome a conversa: cd Documents/confeitaria e claude --continue (Aula 10). Confira se aparece manual mode on.

Etapa 7 · A trava do envio (Aula 10)

Na Aula 10, você criou uma regra ask (perguntar) para o Claude sempre pedir licença antes de enviar para o GitHub (o Git chama de push). Confira se ela está lá, antes do primeiro envio: digite /permissions. O painel mostra a regra Bash(git push *) e de qual arquivo ela veio (Esc fecha o painel).

Não está? Peça, como na Aula 10:

crie uma regra ask no .claude/settings.json para que você sempre me pergunte antes de enviar para o GitHub (git push)

A pasta .claude é protegida, então ele pede licença: aprove. Depois, guarde uma versão com a regra nova.

Por que conferir agora? A partir da Etapa 9, cada envio para a linha principal muda o site no ar. No Manual, todo envio já espera o seu sim. A trava é para o dia em que você usar o modo auto: nele, o Claude envia sem perguntar, até na linha principal, e a regra ask continua perguntando. Ela pega o envio do jeito como o Claude costuma escrever o comando, não todos os jeitos possíveis: é uma trava, não uma cerca. Por isso, continue lendo cada pedido de comando. E o CLAUDE.md da Etapa 1 orienta, mas não tranca nada: quem tranca são as regras.

Etapa 8 · O repositório público e o primeiro envio

Agora, o Claude cria o repositório no GitHub. Peça:

Crie no GitHub, com o gh, um repositório público chamado confeitaria, ligado a esta pasta. Ainda não envie nada.

O nome do repositório vira a segunda parte do endereço: https://seu-usuario.github.io/confeitaria/. Na sua ideia, use o nome da sua pasta. No Manual, o comando aparece antes de rodar, algo como gh repo create confeitaria --public --source=. --remote=origin. Peça a explicação, se quiser, e aprove.

⚠️ Público quer dizer público. Qualquer pessoa vê todos os arquivos do repositório e todas as versões guardadas, com as mensagens, as datas, o nome e o e-mail que assinam cada uma. É o preço do plano gratuito: nele, o GitHub Pages só publica a partir de um repositório público. Por isso a revisão da Etapa 4 veio antes.

Agora, o primeiro envio. Peça:

Envie as versões guardadas da linha principal para o GitHub.

O pedido de permissão aparece, por causa do Manual e da trava, com um comando como git push -u origin main. Leia e aprove com Yes (sim), só desta vez.

Confira no navegador: abra https://github.com/seu-usuario/confeitaria. Os arquivos da página estão lá, e o .env não está. O histórico também foi, com as suas mensagens em português: no site, as versões guardadas se chamam commits.

Etapa 9 · A página no ar, com o GitHub Pages

No site do GitHub, na página do repositório:

1. Embaixo do nome do repositório, clique em Settings (configurações). Se não aparecer, procure no menu ao lado das outras abas.
2. Na barra lateral, na seção "Code, planning, and automation", clique em Pages.
3. Em "Build and deployment" (montagem e publicação), em "Source" (origem), escolha Deploy from a branch (publicar a partir de uma linha).
4. No menu da linha, escolha main. No menu da pasta, deixe / (root), a pasta inteira.
5. Clique em Save (salvar).

O GitHub leva até 10 minutos para publicar. Atualize a página de Pages de vez em quando: quando aparecer o botão Visit site (visitar o site), a página está no ar, no endereço:

https://seu-usuario.github.io/confeitaria/

Agora, o celular de verdade. Mande o endereço para você mesmo no WhatsApp e abra no celular. Confira o mesmo da Etapa 3: o menu, o filtro, o formulário, o modo escuro e, principalmente, se dá para ler tudo sem zoom. Toque em Enviar pelo WhatsApp: o toque leva ao WhatsApp, mas, como o número é inventado, a conversa não chega a abrir. Viu algo errado? Tire um print no celular, mande para o computador (por e-mail, por exemplo) e mostre ao Claude.

Daqui em diante, cada envio para a linha principal muda o site no ar, em até 10 minutos. Por isso, a próxima seção vai por outro caminho.

⚠️ Os limites do GitHub Pages. Ele serve para mostrar projetos, não para tocar um negócio: as regras dele não permitem usar o site gratuito como loja ou canal de vendas, nem para receber senhas ou números de cartão. Para mostrar a página que você fez, à família, aos amigos ou num portfólio, ele é ótimo. Os limites de tamanho (1 GB por site, cerca de 100 GB de transferência por mês e cerca de 10 publicações por hora) ficam muito longe de uma página como esta. Se a confeitaria for de verdade e for vender pelo site, procure uma hospedagem feita para isso.

Etapa 10 · Depoimentos numa linha paralela, até o pedido para juntar

Com a página no ar, uma seção nova pede outro caminho: se você mudar direto na linha principal, cada versão enviada aparece no site, pronta ou não. A saída é uma linha paralela (o Git chama de branch): um caminho separado de versões, para mexer sem afetar a linha principal. Quando a seção ficar boa, um pedido para juntar (pull request) leva o que foi feito na linha paralela para a principal, com uma revisão no site do GitHub antes.

É uma tarefa nova, então comece do zero, como na Aula 07: digite /clear. Depois, aperte Shift + Tab até aparecer plan mode on e peça:

Crie uma linha paralela chamada depoimentos e, nela, uma seção de
depoimentos de clientes depois do cardápio, com três depoimentos de
exemplo, cada um com um nome e uma frase. Está pronto quando a seção
ficar fácil de ler no modo escuro e numa janela estreita. Para
conferir, eu te mando um print.

💡 Numa página de verdade, use depoimentos de verdade, com a permissão de quem escreveu. Os de exemplo servem para treinar.

Aprove o plano com Yes, manually approve edits e faça como na Etapa 3: mudança por mudança, conferindo com prints. Repare numa coisa: o site no ar continua sem os depoimentos. Eles estão só na linha paralela, no seu computador.

Ficou bom? Guarde uma versão. Depois, peça:

Envie a linha depoimentos para o GitHub e abra um pedido para juntar (pull request) para a main, com uma descrição em português do que mudou.

A trava pergunta antes do envio, e o Manual pergunta antes de abrir o pedido: leia e aprove os dois. No fim, o Claude mostra o endereço do pedido.

A revisão, no site do GitHub. Abra o endereço do pedido, ou, na página do repositório, clique em Pull requests (pedidos para juntar) e escolha o seu.

1. Clique na aba Files changed (arquivos alterados). Ela mostra, linha por linha, o que muda na linha principal se você juntar: em verde, o que entra; em vermelho, o que sai.
2. Confira com a pergunta da Aula 09: mudou algum arquivo que eu não pedi? Só o arquivo da página deveria aparecer, com a seção nova. Se aparecer outro, volte ao Claude e pergunte por quê, antes de juntar.
3. Quer anotar algo numa linha? Passe o mouse sobre ela e clique no ícone azul de comentário. É opcional.

No GitHub, quem abriu o pedido não pode aprová-lo. Mas, como o repositório é seu, você junta mesmo assim.

Juntar. Volte para a página do pedido e desça até o fim:

1. Clique em Merge pull request (juntar o pedido) e, depois, em Confirm merge (confirmar).
2. Se aparecer Delete branch (apagar a linha paralela), pode clicar: ela já foi juntada, e a lista de linhas fica arrumada.

Em até 10 minutos, os depoimentos aparecem no site. Confira no celular.

Traga a linha principal de volta. O pedido foi juntado no GitHub, não no seu computador: aqui, a linha principal ainda não tem os depoimentos. Peça:

Volte para a linha principal e traga do GitHub as versões novas dela.

Aprove os comandos e abra a página no navegador: os depoimentos estão lá. Sem esse passo, a próxima mudança começaria da linha principal antiga.

Etapa 11 · Uma skill para a próxima seção (Aula 13)

Toda seção nova segue os passos que você acabou de fazer. Isso é trabalho para uma skill: você ensina os passos uma vez, e o Claude segue sozinho nas próximas vezes. Peça:

Crie uma skill de projeto em .claude/skills/nova-secao/SKILL.md com os
passos que seguimos nos depoimentos: criar uma linha paralela com o
nome da seção; planejar a seção, com o critério de ficar fácil de ler
no modo escuro e numa janela estreita; fazer mudança por mudança; me
pedir um print para conferir; guardar uma versão; enviar a linha para
o GitHub e abrir um pedido para juntar para a main, com uma descrição
em português; e, quando eu disser que juntei, voltar para a linha
principal e trazer do GitHub as versões novas dela. Na descrição da
skill, diga para usar quando eu pedir uma seção nova na página.

Como a pasta .claude é protegida (Aula 05), ele pede licença para criar o arquivo. Leia os passos e aprove. Depois, guarde uma versão com a skill e envie a linha principal para o GitHub: a trava pergunta, e a página no ar continua igual, porque a skill não faz parte dela.

Para usar a skill, digite /clear, para começar a tarefa do zero. Se você fez a Aula 13, a pasta das skills já existia e o Claude Code enxerga a skill nova sozinho. Se não fez, ou se a skill não aparecer quando você digitar /, digite antes /reload-skills. Aperte Shift + Tab até aparecer plan mode on e peça:

Quero uma seção de perguntas frequentes, com três perguntas e respostas de exemplo.

Ou chame a skill pelo nome: /nova-secao perguntas frequentes. Aprove o plano com Yes, manually approve edits, como na Etapa 10. Repare que o Claude segue os passos dela sem você explicar de novo: a linha paralela, o plano, o print, o envio e o pedido para juntar. Na hora do envio, a trava continua perguntando. Revise e junte no GitHub, como na Etapa 10, e diga ao Claude que juntou.

Sem GitHub: o link público de artifact (Aula 25)

Não quer criar a conta no GitHub, ou quer só mostrar a página a alguém agora? Nos planos Pro e Max, o Claude publica a página como um artifact (Aula 25), e o botão Share (compartilhar) cria um link que qualquer pessoa abre, sem login. Peça: "publique a página como um artifact". Depois, abra o artifact no navegador, clique em Share, no topo, e escolha o link público.

Antes de mandar o link, saiba os limites:

• Precisa do login com a assinatura, o mesmo da Aula 03: com chave de API, não publica. No Team e no Enterprise, o link público só existe depois que um Owner liga o External sharing (compartilhamento externo).
• É uma página só, de até 16 MiB, sem servidor. Se a sua página tem um estilo.css, peça para o Claude juntar tudo no index.html. Imagens de outros sites não carregam: só as que vão dentro do arquivo.
• Teste o botão do WhatsApp pelo link, no celular, antes de mandar a alguém: a página roda com regras de segurança rígidas.
• O endereço é um link do claude.ai, e quem abre sem login vê o aviso Content is user-generated and unverified. (conteúdo criado por quem publicou, sem verificação) no lugar do seu nome.
• A página fica guardada na infraestrutura da Anthropic, e um link público abre para qualquer pessoa: a revisão da Etapa 4 vale aqui também.
• Para atualizar, peça a mudança na mesma conversa, ou dê o link numa conversa nova: o link continua o mesmo.

Para ir além (opcional)

🔧 Para ir além (para quem já programa; pode pular): esta parte mostra os comandos por trás dos pedidos e o que dá para somar ao projeto com as aulas dos Módulos 4 e 5. Se você nunca programou, pule direto para o Na prática: tudo o que ele pede já foi explicado acima.

Os comandos por trás dos pedidos. O Claude escolhe os comandos, e os seus podem ser um pouco diferentes:

• A trava também no pedido para juntar: "ask": ["Bash(git push *)", "Bash(gh pr create *)"] no .claude/settings.json. As regras valem na ordem deny, depois ask, depois allow.
• Revisar só o que a linha paralela muda: /code-review main...depoimentos, antes de abrir o pedido. Para as últimas 15 versões de uma vez, /code-review HEAD~15..HEAD.
• O @claude nos pedidos para juntar (Aula 16): rode /install-github-app, junte o pedido com o arquivo do workflow e comente, num pedido, "@claude revise este pedido e aponte os riscos antes de juntar". Cada execução gasta minutos do GitHub Actions e tokens; num projeto de estudo, use com moderação.
• Duas seções ao mesmo tempo: claude --worktree perguntas num segundo terminal abre uma sessão numa cópia separada da pasta, com a própria linha paralela (Aulas 10 e 20).
• Planejar com o Opus e fazer com o Sonnet: claude --model opusplan (Aula 08).
• Um Projeto, um mod ou um hook: peça duas melhorias numa mensagem só a um Projeto com o repositório (Aula 17), mude a cara do Claude Code com um mod (Aula 18) ou confira algo a cada edição com um hook (Aula 15).
• Um domínio próprio: o GitHub Pages aceita um endereço seu, como www.confeitaria.com.br, no lugar do github.io (About custom domains and GitHub Pages).
• O celular sem sair do computador: as ferramentas de desenvolvedor do navegador têm um modo que imita a tela de vários celulares, mais fiel do que estreitar a janela.

Na prática: a lista de entrega

O seu projeto final está completo quando você consegue marcar:

• Um CLAUDE.md com as regras da casa, numa versão guardada
• A página completa (início, cardápio com filtro, encomendas pelo WhatsApp, horário e endereço), conferida por prints no computador e numa janela estreita
• A revisão da Etapa 4, com o .env fora de todas as versões
• Uma conta no GitHub, com o e-mail confirmado e a verificação em duas etapas ligada
• O gh instalado, com login
• A regra ask do envio conferida
• O repositório público confeitaria, ou o da sua ideia, com as versões enviadas
• A página no ar, aberta no seu celular, em https://seu-usuario.github.io/confeitaria/
• Os depoimentos levados para o site por um pedido para juntar, revisado em Files changed e juntado, com a linha principal trazida de volta
• A skill nova-secao, usada uma vez
• (Opcional) A página também como artifact, com o link público

Resumo

• As regras da casa ficam no CLAUDE.md, que o Claude lê no começo de toda conversa.
• O plano da página inteira vem antes, com as cinco partes do pedido e um ajuste seu.
• Conferir é ver: prints no computador e numa janela estreita e, depois de publicar, o celular de verdade. Guarde uma versão a cada passo que funcionar.
• Antes de publicar, revise: o que mudou, o /code-review, o .env fora das versões e os seus dados. Num repositório público, todo mundo vê todos os arquivos e todo o histórico.
• Para pôr no ar: a conta no GitHub com a verificação em duas etapas, o gh com login, a trava do envio conferida, o repositório público e o GitHub Pages. Cada envio para a linha principal muda o site.
• Seção nova vai numa linha paralela, até o pedido para juntar, revisado em Files changed e juntado no GitHub. Depois, traga a linha principal de volta.
• O que se repete vira skill.
• Sem GitHub, o link público de artifact (Pro e Max) mostra a página, com os limites de uma página só.

Curso concluído

Parabéns! Você saiu do primeiro pedido para uma página no ar, com endereço próprio, feita do jeito certo: planejada, conferida, revisada e guardada em versões. A partir daqui, o melhor jeito de aprender é usar o Claude Code nas suas ideias de verdade: comece pequeno, planeje antes de fazer, confira pelo que se vê, revise antes de publicar e transforme em skill ou em regra tudo o que você se pegar repetindo.

Para continuar:

• A documentação oficial, em inglês: https://code.claude.com/docs
• A cola rápida do curso, para ter os comandos sempre à mão
• O Módulo 7, Bônus, com as Aulas 20 a 25: várias tarefas ao mesmo tempo, plugins e marketplaces, o Claude vendo (e testando) o seu app, o Claude Code em qualquer lugar, o que fazer quando algo dá errado e artifacts

Agora é com você: abra o terminal e mãos à obra!