Tutorial · Para iniciantes

Site + Linktree com o Claude

Como criar um site e uma página de links (linktree) usando o Claude e colocar no ar de graça — do zero absoluto, sem programar e sem complicação.

Nível Iniciante Tempo ~25 min Custo R$ 0
FERRAMENTAS: Claude Cloudflare

🎯 O que você vai ter no final

Um site e um linktree bonitos, no ar na internet, que você atualiza quando quiser — sem pagar mensalidade. Começa num endereço grátis e, se quiser, liga o seu próprio domínio depois.

Antes de tudo — o que você precisa

Quase nada, e nenhum conhecimento técnico:

  • Um computador com internet.
  • Zero programação. O Claude escreve o código pra você.
  • Duas contas gratuitas (a gente cria na hora): o Claude (pra criar as páginas — o plano grátis já dá conta) e o Cloudflare (pra colocar no ar).
  • (Opcional) um domínio próprio — tipo seunome.com.br. Não precisa pra começar.

Existem várias formas de fazer um site

Este tutorial usa IA (Claude) + hospedagem grátis. Mas é justo você conhecer as alternativas — cada uma serve pra um caso. Veja os prós e contras:

WixSquarespaceFramer

Construtores visuais (Wix, Squarespace, Framer)

Prós
  • Arrasta-e-solta, sem código
  • Bonito rápido
Contras
  • Mensalidade
  • Cara de template
  • Você "aluga" — preso à plataforma
WordPress

WordPress

Prós
  • Poderosíssimo, plugin pra tudo
  • Padrão do mercado
Contras
  • Curva de aprendizado maior
  • Precisa de hospedagem (geralmente paga)
  • Fácil de complicar
ClaudeCloudflare

IA + hospedagem grátis

este tutorial
Prós
  • De graça
  • 100% seu, código único (não é template)
  • Você controla tudo
Contras
  • Uns cliques a mais no começo
  • Depende de você pedir bem pra IA

Os termos, rapidinho

Três palavras que vão aparecer. Em 30 segundos você entende:

Arquivo .htmlA "receita" de uma página — o navegador lê e desenha o site. Você não escreve na mão: o Claude gera pra você.
HospedagemO "terreno" onde seu site fica de pé, ligado 24h, pra qualquer um acessar.
DomínioO endereço, a "placa" do site (seunome.com.br). Opcional.
📄

A página

o arquivo .html (o Claude cria)

🏠

A hospedagem

onde ela mora (grátis)

🌐

O domínio

o endereço (opcional)

1CRIAR

Você precisa de dois arquivos: index.html (o site) e links.html (o linktree). Entre em claude.ai, crie uma conta grátis, e copie e cole o modelo abaixo — é só trocar pelas suas informações:

📋 MODELO — copie, cole no Claude e edite os [colchetes]
Crie DOIS arquivos HTML completos e prontos pra publicar:
1) index.html — meu site pessoal (uma página só, com rolagem)
2) links.html — minha página de links, estilo linktree

SOBRE MIM
- Nome: [SEU NOME]
- O que eu faço: [SUA ÁREA/PROFISSÃO em 1 frase]
- Frase que me define: [UMA FRASE DE IMPACTO]
- Mini bio (2 a 3 linhas): [QUEM VOCÊ É / EXPERIÊNCIA]

MEUS LINKS
- Instagram: [LINK]
- YouTube: [LINK]
- WhatsApp (com DDD): [NÚMERO]
- Outro: [LINK]

VISUAL
- Vibe: [ex: moderna e escura / clean e clara]
- Cores: [ex: laranja e azul escuro]
- Responsivo (funcionar no celular) e elegante.

Me entregue o código completo de cada arquivo, um de
cada vez, em bloco de código pra eu copiar. Sem enrolação.
✅ EXEMPLO preenchido (pra você ver como fica)
SOBRE MIM
- Nome: Iago Borges (Iago Bald)
- O que eu faço: engenheiro que usa IA e dados pra
  aumentar a produtividade de times
- Frase que me define: "Exatas + Pessoas — traduzo o
  complexo em simples"
- Mini bio: engenheiro, agilista e entusiasta de IA.
  Crio sistemas e ensino tecnologia de forma prática.

MEUS LINKS
- Instagram: instagram.com/iago_bald
- YouTube: youtube.com/@iago_bald
- LinkedIn: linkedin.com/in/iagobald

VISUAL
- Vibe: moderna e escura, tech premium
- Cores: laranja (#FF6701) e azul escuro (#0C0E23)

Quando o Claude entregar, baixe/salve os dois arquivos (index.html e links.html) e coloque-os numa pasta no seu computador, ex: meu-site.

◆ Precisa do Claude Pro?

Não. O plano grátis já cria as páginas (ele tem os Artifacts e gera o código). O grátis tem um limite de uso ao longo do dia — se pausar, é só esperar um pouco e continuar. O Pro só libera mais uso.

2PUBLICAR

Existem dois caminhos pra publicar. Comece pelo Simples — o Avançado você adota quando pegar o jeito.

Simples recomendado
arrasta e solta

+ Mais fácil, sem conta extra: você arrasta a pasta e pronto.

Pra atualizar, você sobe a pasta de novo (manual).

Avançado GitHub
deploy automático (GitHub)

+ Você guarda o site no GitHub e conecta no Cloudflare. Mexeu no código, deu git push → o site atualiza sozinho. Nunca mais re-sobe arquivo.

Precisa de conta no GitHub e uns passos de configuração no começo.

Vamos de Simples:

  • Crie conta grátis no Cloudflare.
  • Vá em Workers & Pages → Create → aba Pages e escolha "Upload your static files" (não a opção de Git).
  • Dê um nome ao projeto e arraste a pasta meu-site pra área de upload.
  • Clique em Deploy.

Pronto! 🎉 Seu site já está no ar em seunome.pages.dev, e o linktree em seunome.pages.dev/links.

3ATUALIZAR

Atualize quando quiser

Mudou de ideia ou quer trocar um texto? É simples — depende do caminho que você escolheu no passo 2:

  • No Simples: peça a nova versão pro Claude, salve o arquivo na pasta e suba a pasta de novo no Cloudflare (ele cria uma versão nova por cima).
  • No Avançado: só dar git push — o site atualiza sozinho, sem re-upload.
4OPCIONAL

Só faça se quiser trocar o .pages.dev por seunome.com.br.

  • Não tem domínio ainda? Compre um (ex: Hostinger ou Registro.br) — alguns reais por ano.
  • No Cloudflare: Add a site → Connect a domain, digite o domínio, plano Free. Ele te dá 2 nameservers.
  • No painel de onde você comprou o domínio, troque os nameservers pelos 2 do Cloudflare e salve.
  • Quando ativar, no projeto do Pages → Custom domains → adicione seu domínio e o www.
▲ Cuidado

Ao trocar de nameserver, confira se não sumiu nenhum registro que você já usa (e-mail/MX ou subdomínios). E desligue o DNSSEC se estiver ligado.

É isso. Você acabou de montar uma base profissional.

Sem mensalidade e que cresce com você. Travou em algum passo? Me chama.

Meus contatos → ← Outros tutoriais