Por que criar um blog em pleno 2025?
Bem, eu mesmo nunca fui de consumir conteúdo de blogs, mas nesses últimos tempos, tenho tentado sair das redes sociais. Por consequência, acabo lendo bastante blogs… Enxergo essa como uma oportunidade de ter meu próprio espaço, onde posso falar o que eu quiser, escrever como quiser, sem me preocupar com algoritmos, comentários ou seja lá o quê. Aqui, vou compartilhar meu conhecimento, pensamentos, projetos legais, e muito mais…
O que estava buscando construir?
Eu sou extremamente fã do formato/layout dos sites de documentação de projetos, à lá Better Auth. Então, antes de construir meu blog, fui em uma longa jornada para descobrir como esses sites são feitos, e me inspirando neles, fiz minha própria versão do absoluto zero.
Com direito a menu lateral, Tabela de Conteúdos (TOC) e muito mais, escrevi a documentação de alguns projetos diversos, e com isso, testei bastante a ferramenta, rodando ela já por cerca de 60 dias onde trabalho.
No futuro, farei um post dedicado a ela.
Agora, resolvi adaptar a lógica para funcionar em um blog, transformando o layout de documentação em blog, o que na verdade foi tão simples quanto remover a barra lateral e header.
Daí pra frente, comecei a adicionar minha assinatura visual e fluída, como essa linda Navegação da página na sua direita (se estiver no computador), com animações simples e fluidas, esse indicador de scroll na esquerda, super simples e fluído, bem como vários outros detalhes e animações simples e fluidas que fazem toda diferença. Mais um exemplo? Recarregue a página e veja esse sutil blur antes de revelar o conteúdo.
Quais tecnologias usei?
Afinal, esse é o blog de um dev, não pode faltar falar sobre a tecnologia usada na sua construção.
Build tool ultrarrápido para desenvolvimento frontend
Biblioteca para interfaces de usuário
Framework CSS utilitário
Biblioteca de animações para React
Componentes de UI reutilizáveis
Componentes visuais modernos
Markdown com JSX para conteúdo rico
Observou que está faltando backend? É porque realmente não tem, e já te explico o porquê.
Os posts são dinâmicos?
Sim e não. Todos os posts são escritos em Markdown usando MDX, e são armazenados diretamente no código do projeto, muito semelhante às docs de libs que falei antes.
Embora todo o conteúdo em React que você está vendo agora tenha sido renderizado em tempo de execução, não são dinâmicos no sentido de que eu posso editar instantaneamente a qualquer momento, mas são dinamicamente processados em tempo de execução.
Por que fiz dessa maneira?
Simples: como esse é um blog pessoal, e eu mesmo que vou escrever os posts, eu prefiro escrever dessa forma. Assim, também não preciso me preocupar com segurança de login, bancos de dados, etc., de um projeto que não exige esses recursos.
Como funciona a leitura e processamento de arquivos MDX?
Escrita dos Posts
Os posts são escritos em arquivos .mdx dentro da pasta src/content/blog/.
Cada arquivo contém frontmatter (metadados) e o conteúdo em Markdown com JSX.
Importação Automática
Durante o build, o Vite usa import.meta.glob para importar todos os arquivos .mdx
de forma automática, criando um objeto com todos os posts disponíveis.
Processamento em Tempo Real
Quando você acessa uma página, o MDX é processado pelo React em tempo de execução, convertendo Markdown + JSX em componentes React funcionais.
Renderização Final
Os componentes MDX customizados (como Note, Step, Card) são aplicados, juntamente com os estilos Tailwind, resultando na página que você vê.
Essa abordagem é perfeita para blogs pessoais: simples, segura e permite usar todo o poder do React nos posts sem complexidade desnecessária.