Deploy Astro na Cloudflare Pages: do zero ao SEO 100

Este portfólio que você está lendo roda em Astro + Cloudflare Pages. Custo: zero. Tempo de deploy: ~30 segundos. Latência de qualquer ponto do mundo: sub-100ms. Não tem combinação melhor pra site estático em 2026.

Por que essa stack

Critério	Astro + CF Pages	WordPress	Netlify Free
Custo	R$ 0	R$ 30+/mês hospedagem	R$ 0 (com limites)
Performance	100/100 Lighthouse fácil	Depende de plugins	Boa
Builds/mês	Ilimitado	N/A	300
Bandwidth	Ilimitado	Limitado	100 GB
CDN global	✅ 300+ PoPs	❌	✅
Tempo de deploy	~30s	N/A	~1min

A combinação é difícil de bater quando o site é estático (portfolio, blog, landing).

Passo 1: criar o projeto Astro

npm create astro@latest meu-site -- --template minimal --typescript strict --yes
cd meu-site
npm install

Adicione Tailwind (opcional, mas recomendado):

npx astro add tailwind --yes

Passo 2: configurar o astro.config.mjs

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://seu-dominio.com.br',
  integrations: [sitemap()],
});

A propriedade site é crítica para SEO — ela gera URLs absolutas no sitemap e meta tags.

Passo 3: hospedar no GitHub

git init
git add .
git commit -m "init"
gh repo create meu-site --public --source=. --push

Passo 4: conectar Cloudflare Pages

1. Acesse dash.cloudflare.com → Pages → Create application → Connect to Git.
2. Autorize a Cloudflare a ler seu GitHub.
3. Selecione o repo.
4. Configure o build:
   • Framework preset: Astro
   • Build command: npm run build
   • Build output directory: dist
5. Salve.

Em ~1 minuto seu site está no ar em https://nome-do-projeto.pages.dev.

Passo 5: domínio próprio

Em Custom domains dentro do projeto, adicione seudominio.com.br. A Cloudflare gera os registros DNS automaticamente. Se o domínio já está na Cloudflare, é literalmente 1 clique.

Passo 6: SEO 100/100

Para chegar perto do score perfeito:

Meta tags completas

No Layout.astro:

---
const canonical = new URL(Astro.url.pathname, Astro.site).toString();
---
<link rel="canonical" href={canonical} />
<meta property="og:url" content={canonical} />
<meta property="og:image" content="/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

JSON-LD schema

<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Person",
  name: "Seu Nome",
  // ...
})} />

Sitemap automático

A integração @astrojs/sitemap já cria sitemap-index.xml no build. Adicione no robots.txt:

User-agent: *
Allow: /
Sitemap: https://seudominio.com.br/sitemap-index.xml

Imagens otimizadas

WebP no lugar de PNG, sempre. Para uma OG em PNG de 1200×630, gere com Sharp:

import sharp from "sharp";
await sharp(svg).resize(1200, 630).png().toFile("public/og.png");

Passo 7: Cloudflare Web Analytics (sem cookies)

No dashboard CF → Web Analytics → Add site → copie o snippet, cole no </head>. Privacy-first, sem banner LGPD necessário. Free.

Performance: o que eu vi medindo

Site estático bem feito + Cloudflare CDN dá:

• FCP (First Contentful Paint): 0.4s
• LCP (Largest Contentful Paint): 0.7s
• CLS (Cumulative Layout Shift): 0 (com width/height nas imagens)
• TTFB mediano global: ~50ms

Compare com WordPress médio: FCP 2-4s, LCP 3-6s.

Erros que vi gente cometer

• Esquecer width/height nas imagens → CLS dispara, SEO cai.
• Carregar fonte sem display=swap → texto invisível enquanto carrega.
• Não setar Astro.site → sitemap fica com URLs relativas, Google ignora.
• Subir só pra pages.dev → bom pra preview, mas DNS próprio ajuda em SEO e UX.

Conclusão

Astro + Cloudflare Pages é o kit do dev de 2026 para qualquer projeto estático. Performance brutal, custo zero, deploy em segundos. Se você ainda hospeda landing page em VPS com WordPress, está pagando hospedagem pra ter site lento.

Outros posts que podem ajudar:

• Como monitorar OLT com Zabbix
• BGP para iniciantes — BCOP
• Multi-tenant do zero

Dúvida? WhatsApp aqui.