Como este blog surgiu

18 Jul 2025 · 5 min

Introdução

Cada linha de código conta uma história. Este post é sobre a história por trás deste blog. Como ele começou, o que me motivou, e como evoluiu até o que você está lendo agora.

O site antes deste

Antes de começar a falar sobre este site, gostaria que você soubesse que a URL que você está usando já hospedou um site diferente, que ainda pode ser acessado em https://old.otavioh.dev.
Eu sei, ele é bagunçado, com alguns de bugs e meio demais. Mas, sem dúvida, foi um começo. Essa versão esteve disponível desde agosto de 2023.

De tudo que aquele site tinha, a única parte que genuinamente gostava era de um efeito legal onde uma pequena sombra no fundo seguia o cursor.

Ele foi feito com Nuxt. Escolhi essa tecnologia porque tenho bastante experiência com Vue e achei que seria uma boa opção. Mas, na época, os recursos de geração de site estático não eram tão bons, e o suporte a Markdown era limitado. Então quando tive a ideia de adicionar uma seção de blog, tive uma péssima experiência.

Não tendo gostado muito do resultado final, e alguns recursos que eu precisava não funcionavam bem. Então, quando tive tempo, comecei a reescrevê-lo com uma tecnologia diferente, uma com bom suporte a Markdown, fácil de estender e com temas prontos para que eu pudesse escolher um layout que gostasse antes de começar a criar em cima.

Vale mencionar que não revisitei o Nuxt depois de lançar a primeira versão do site antigo. Mas, enquanto escrevia este post, fiz uma pesquisa rápida e percebi que talvez hoje eu conseguisse construir este site com ele sem problemas. Mesmo assim, eu queria explorar algo novo e aprender outra tecnologia, então apenas segui com a ideia original.

Os Requisitos

Para entender por que escolhi as tecnologias que escolhi, precisamos olhar os requisitos que eu tinha em mente:

• Suporte fácil a i18n, porque tudo que escrevo deve estar em pelo menos dois idiomas: português e inglês;
• Suporte a Markdown, para manter a escrita simples e o layout limpo;
• Comunidade de temas, porque eu queria começar com uma base já estabelecida;
• Suporte a RSS, porque quero que meus posts possam ser lidos em qualquer lugar e que quem quiser pode habilitar notificações de novas publicações

Escolhendo a Stack

Com tudo isso em mente, comecei a pesquisar e acabei com a seguinte stack:

• Frontend: Astro;
• Estilo: CSS puro (Vanilla);
• Markdown para conteúdo;
• Hospedagem: GitHub Pages;
• Tema base: Chiri;

Essa stack tinha tudo o que eu precisava. Então a última pergunta é:

Por que eu queria um blog?

Você já aprendeu algo tão legal que quis compartilhar com o mundo, mas não sabia onde?
Ou então precisou compilar informações de dezenas de sites diferentes só para conseguir fazer algo funcionar, e gostaria de retribuir de forma que não se perdesse nos algoritmos em poucos dias?

É esse sentimento que eu quero trazer neste blog. A ideia é experimentar tecnologias, às vezes antigas, às vezes recentes e construir um portfólio de projetos, com posts documentando o processo de criar novos sistemas, softwares e serviços. Além de conduzir experimentos como “crie seu próprio X em Y linguagem”.

Então este blog é mais do que um site, é um laboratório pessoal, um diário de projetos e um arquivo morto.

Desenvolvendo

Com a motivação em mente e tempo disponível, comecei a construir:

Planejamento

Primeiro, explorei vários temas no site do Astro. Foi aí que encontrei o Astro Pure, então baixei e comecei a mexer. Mas em poucas horas percebi que o tema era complexo demais. Não era só uma base, era uma casa inteira, e era justamente o que eu não queria.

Voltei à busca. Testei o Cactus e o Paper i18n. Ambos eram lindos e acertaram na simplicidade que eu procurava. Baixei e comecei a aprender Astro.

Até que um dia, abri a página de temas do Astro por acaso e vi o Chiri, muito parecido com o Cactus, mas visualmente mais agradável. Então mais uma vez, descartei o pouco que tinha e recomecei.

Desenvolvimento

A primeira coisa que adicionei foi o suporte a i18n. Queria que o site fosse, no mínimo, bilíngue, para atender leitores tanto do Brasil quanto de fora.

Inicialmente tentei usar o suporte nativo do Astro, mas não consegui configurar os prefixos de idioma nas URLs como queria. Testei algumas bibliotecas externas, mas a experiência de desenvolvimento (DX) não foi boa. Algumas geravam código duplicado ou adicionavam complexidades que eu não queria lidar.

Mais tarde, voltei ao suporte nativo, mas comecei a olhar projetos open-source em busca de inspiração. Lembrei que o tema Paper i18n tinha suporte a localização. Ao checar a implementação, vi que ele estendia o suporte padrão do Astro de forma bem flexível. Me inspirei e uma versão com base nisso.

Com a i18n funcionando, comecei a adicionar os recursos que faltavam:

• Navegação melhorada;
• Páginas para experiência, educação e contato;
• Suporte a imagens para Open Graph;
• Tags;
• Artigos relacionados;
• Troca de idioma;
• Listagem de posts do blog;
• Visualização expandida de postagens;
• Estilização nova para índice lateral;
• Integração com Phosphor Icons (o melhor pack de ícones);
• Compressão e minimização no build de produção.

Deploy

Como em todos os meus projetos pessoais, criei um pipeline simples com GitHub Actions para publicar o site estático no GitHub Pages em https://otavioh.dev/.
E escrevi este primeiro post para que o site já fosse ao ar com algum conteúdo disponível para leitura.

E agora?

Agora que o blog está no ar, pretendo ou pelo menos vou tentar:

• Escrever com uma pequena frequência;
• Compartilhar experimentos, dev logs e talvez algum que outro tutorial.

Já tenho algumas ideias que quero explorar envolvendo a linguagem Elixir e a Nuvem, ou a ausência dela.
Então, se quiser, me segue em alguma das redes sociais na minha página de contato.

Considerações finais

Obrigado por visitar e ler até aqui! Espero que você tenha encontrado algo útil na minha jornada construindo este blog.
Se você está criando o seu próprio, ou já tem um, adoraria saber mais sobre ele também.