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 site, construído do zero com blog, portfólio e página sobre. Foco em performance, SEO e experiência de leitura. Repositório privado.
Conceitos fundamentais
| Conceito | O que é |
|---|---|
| SSG (Static Site Generation, Geração Estática de Site) | HTML gerado antecipadamente no build, sem processamento em tempo de requisição. |
| MDX (Markdown + JSX) | Formato que combina Markdown com componentes JSX em arquivos de conteúdo. |
| 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. |
| 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 type-safe com schema validado |
| @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 |
|---|---|---|
| Dark / Light Mode | 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 |
| Prefetch estratégico | Links pré-carregados no hover antes do clique | navegação instantânea sem custo de bundle JS |
| SEO & Structured Data | 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 nasceu como um projeto de estudo. O primeiro post foi um “Olá, Astro!” para experimentar SSG e Markdown. Com o tempo, cresceu para o que você está navegando agora: portfólio profissional, blog técnico e reflexivo, e uma página sobre quem eu sou.
Trabalhar com Astro muda a perspectiva: tudo gerado em build time, JS adicionado só onde há interatividade real, sem otimização manual de bundle. O Tailwind v4 segue a mesma lógica no CSS: sem arquivo de configuração, tokens declarados direto via @theme. O resultado é um site rápido com pouco código para manter.