Blog Pessoal (thiagocaja.dev)
Site pessoal com blog, portfólio e páginas de conteúdo. Construído com Astro 6, MDX para artigos técnicos e reflexivos, e deploy contínuo na Vercel.
Este é o site que você está lendo agora: blog, portfólio e página sobre, construídos do zero com Astro 6. O conteúdo é escrito em MDX e todo o HTML é gerado no build, então cada página chega pronta ao navegador, com foco em performance, SEO e experiência de leitura. Repositório privado.
Conceitos fundamentais
| Conceito | O que é |
|---|---|
| Markdown | Formato de texto simples com marcação leve (# para título, ** para negrito), que vira HTML na hora de publicar. |
| SSG (Static Site Generation, Geração Estática de Site) | HTML gerado antecipadamente no build, sem processamento em tempo de requisição. |
| JSX (JavaScript XML) | Sintaxe do React que permite escrever marcação parecida com HTML dentro do JavaScript. É mais rígida que o HTML: toda tag precisa ser fechada. |
| MDX (Markdown + JSX) | Formato que combina Markdown com componentes JSX em arquivos de conteúdo. |
| componente | Trecho de interface com nome próprio, reutilizável, que pode ser inserido dentro de um post: um aviso, uma tabela, um gráfico. |
| token (de design) | Valor de cor, espaçamento ou fonte declarado uma vez, num lugar só. Cada componente lê o token em vez de repetir o valor dentro de si. |
| SEO (Search Engine Optimization, Otimização para Mecanismos de Busca) | Conjunto de práticas para melhorar a visibilidade de páginas nos mecanismos de busca. |
| RSS (Really Simple Syndication, Distribuição Simples de Conteúdo) | Feed estruturado que permite leitores e agregadores consumirem atualizações do site. |
| build (construção) | Etapa que monta os arquivos finais do site a partir do código-fonte. Aqui é o momento em que o HTML de cada página é gerado, antes de qualquer visita. |
| deploy (publicação) | Envio dos arquivos gerados no build para o servidor que entrega o site ao público. |
| bundle (pacote) | Arquivo de JavaScript que o navegador baixa para a página funcionar. Quanto menor, mais rápido a tela aparece. |
| CI/CD (Continuous Integration/Continuous Delivery, Integração e Entrega Contínuas) | Pipeline que automatiza build, testes e deploy a cada commit. |
Stack
| Tecnologia | Papel |
|---|---|
| Astro 6 | SSG: geração estática no build |
| Content Collections + Zod | Conteúdo validado por schema, com tipos gerados a partir dele |
| @astrojs/sitemap & @astrojs/rss | Sitemap e feed RSS gerados no build |
| Sharp | Otimização e conversão de imagens para WebP |
| Tecnologia | Papel |
|---|---|
| TypeScript 5.9 | Tipagem em componentes e utilitários |
| MDX | Posts com componentes interativos |
| Tailwind CSS v4 + @tailwindcss/vite | Estilização utilitária via plugin Vite, sem tailwind.config.js |
| Vercel | Deploy contínuo com preview por branch |
Destaques
| Padrão | Descrição | Detalhes |
|---|---|---|
| Tema claro e escuro | Alternância de tema sem dependência de JS no servidor | estado persistido via atributo no <html> |
| Content Collections | Schema Zod é a fonte da verdade para todos os posts | build quebra se o frontmatter for inválido |
| Pré-carregamento de links | O link carrega quando o cursor passa por cima, antes do clique | navegação instantânea sem custo de bundle JS |
| SEO e dados estruturados | Meta tags, Open Graph, sitemap, RSS e schemas JSON-LD | BlogPosting, BreadcrumbList, FAQPage, WebSite, CollectionPage |
| Deploy na Vercel | Preview automático a cada push por branch | sem configuração de pipeline adicional |
Aprendizados
O site começou como projeto de estudo. O primeiro post foi um “Olá, Astro!” para experimentar SSG e Markdown, e o que era teste virou a base que hospeda estes artigos e projetos.
O Astro inverte a ordem usual de um site em JavaScript. Em vez de mandar o código para o navegador montar a página, ele monta o HTML no build e envia JavaScript só para as partes com interatividade. Não sobra bundle para enxugar depois, porque ele não chega a ser montado.
O Tailwind v4 segue a mesma lógica no CSS. Não existe arquivo de configuração: os tokens ficam declarados via @theme, dentro do próprio CSS, e a folha de estilo final leva só o que as páginas usam.