Logotipo do Estúdio Digital Bocca
Estúdio Digital Bocca
Como construí esse blog

Como construí esse blog

Publicado em 10/5/2024, 6:00:00 PM

Atualizado em 11/5/2024, 11:29:00 AM

Hoje vou falar dos desafios de construir um blog com arquivos Markdown (.md), Deno, Fresh, Tailwind, Preact (Se você ainda não conhece, simplificando ao máximo, entenda como um React um pouco mais enxuto).

Hello, world

O principal motivo para escrever e manter um blog, no meu caso, é mostrar para o mundo coisas legais que estou aprendendo e usando. Além disso também serve como anotação para consultas.

Fiquei muito dividido entre usar alguma grande plataforma e apenas escrever, ou manter toda a infra-estrutura em minhas mãos. Mesmo escolhendo ficar com a infra-estrutura sob meu controle, pensei muito em usar um CMS como WordPress.

Decidi então criar a estrutura mais simples possível para escrever e hospedar meu blog de anotações. Nesse ponto eu já sabia o que queria desenvolver, mas mesmo assim não gostaria de gastar muito tempo desenvolvendo.

Requisitos

Alguns requisitos básicos vão guiar a implementação e a escolha das ferramentas, frameworks, linguagem, infra e etc...

  • Escrever as postagens em arquivos estáticos.
  • Sistema de rotas baseado em pastas.
  • Boa apresentação do conteúdo.
  • Baixo custo de manutenção.

Ferramentas

Com base nos requisitos citados anteriormente, escolhi a seguinte stack:

  • Linguagem Typescript, JSX e CSS.
  • Arquivos Markdown para os posts.
  • Deno com Fresh.
  • Hospedar no Deno Deploy.

Resultado

O resultado você está vendo agora na sua tela. Segui alguns tutoriais para a parte de renderização do Markdown, mas todo o resto é apenas o trivial: Javascript, CSS e HTML.

Alguns desafios

Entre os desafios que encontrei, a maioria foi de falta de documentação ou tutoriais desatualizados. Lembrando novamente que a renderização dos arquivos Markdown foi a parte que mais tive dificuldade para encontrar conteúdo atualizado.