Ano novo, blog novo! Depois de adiar por um tempão a publicação do meu blog,
finalmente terminei de desenvolvê-lo, usando <a href="https://nextjs.org/">Next.js</a>,
<a href="https://pocketbase.io/">PocketBase</a> e <a href="https://mantine.dev/">Mantine</a>.
Quer saber o porquê eu escolhi estas ferramentas? Então, continue a leitura aqui comigo.
Eu crio blogs há muito tempo (desde 2007). Comecei com o <a href="https://www.blogger.com">Blogger</a>,
mas depois migrei para o <a href="https://wordpress.org/">WordPress</a>. E foi aí que
comecei a me interessar por Linux e programação. Eu passava um bocado de tempo
criando temas, customizando plugins, lendo a documentação e traduzindo temas e
plugins do WordPress. E, apesar do WordPress ser um CMS excelente para quem quer
apenas publicar um site da maneira mais rápida possível, dessa vez eu queria algo
mais personalizado, contendo todos os recursos que eu gostaria de ter e nada mais.
A partir daí, comecei a pesquisar.
Experimentei vários CMSs (<a href="https://directus.io/">Directus</a>, <a href="https://keystonejs.com/">KeystoneJS</a>,
<a href="https://strapi.io/">Strapi</a> e <a href="https://getcockpit.com/">Cockpit</a>), mas o que eu achei mais simples para atender a minha necessidade foi o <a href="https://pocketbase.io/">PocketBase</a>, principalmente porquê eu tinha 
intenção de auto-hospedar a minha solução. Os outros CMSs são ótimos, mas quando
você é uma equipe de um homem só, deve escolher as ferramentas adequadas.
E o que é mais fácil de uma pessoa só gerenciar do que um banco de dados SQLite?
O Pocketbase já expõe as atualizações do banco de dados em tempo real com SSE,
provê autenticação e gerenciamento de arquivos (com integração ao S3), SDK para
JavaScript e Flutter e ainda pode ser usado como um framework. Tudo isso dentro
de um pequeno binário escrito em <a href="https://go.dev/">Go</a> (se você quer saber mais sobre o PocketBase,
leia a <a href="https://pocketbase.io/docs/">documentação</a> e veja este <a href="https://www.youtube.com/watch?v=Wqy3PBEglXQ">vídeo do FireShip</a>, onde
ele mostra como criar um sistema de chat em tempo real com o PocketBase). E por fim,
a fim de ter backups em tempo real do meu banco de dados SQLite e mandá-los para o S3, utilizo o
<a href="https://litestream.io/">Litestream</a>. Bom, feita a escolha no backend, vamos ao frontend.
Experimentei o <a href="https://astro.build/">Astro</a> (que é excelente!) e o <a href="https://remix.run/">Remix</a>,
mas acabei optando pelo <a href="https://nextjs.org/">Next.js</a>, pricipalmente por conta
da biblioteca de geração de imagens da <a href="https://vercel.com/">Vercel</a>, que eu uso para gerar as imagens do post,
como essa aqui:
<img src="https://douglasmoura.dev/api/v1/og?ok" alt="O trabalho que nunca começou é o que leva mais tempo para terminar" />

E aqui chegamos à escolha do que eu utilizaria para criar os estilos do blog.
Nos últimos anos, estilizei aplicações em React com <a href="https://github.com/css-modules/css-modules">CSS Modules</a>,
<a href="https://styled-components.com/">Styled Components</a>, <a href="https://stitches.dev/">Stitches</a>,
<a href="https://tailwindcss.com/">Tailwind</a> e <a href="https://chakra-ui.com/">Chakra UI</a>.
Eu até comecei a criar um design system com Stitches e Tailwind, mas
criar um design system sozinho levaria muito tempo, decidi optar por uma caminho mais fácil.
Experimentei vários DS até encontrar o <a href="https://mantine.dev/">Mantine</a>, que é uma
biblioteca excelente que tem tudo o que eu já tinha em mente e gostaria de usar.
A partir daí, o trabalho consistiu em implementar o blog com as features iniciais básicas:
<ul>
<li><a href="https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration">ISR</a> dos posts;</li>
<li>Validação de formulários com <a href="https://github.com/colinhacks/zod">Zod</a>;</li>
<li>Sistema de comentários aninhados com verificação anti-spam provida pelo <a href="https://akismet.com/">Akismet</a>;</li>
<li>Exibição de avatares dos comentaristas com o <a href="http://pt.gravatar.com/">Gravatar</a>;</li>
<li>Favicon em SVG com modo claro/escuro;</li>
<li>Multilinguagem (português e inglês).</li>
</ul>
Com tudo isso pronto, alterei as URLs canônicas dos meus artigos no <a href="https://dev.to/douglasdemoura">Dev.to</a>
para apontarem para as novas URLs e finalmente, publiquei meu blog.
Claro, se você está lendo isso no meu blog agora, vai ver que ainda falta uma feature importante:
a pesquisa. Vou estudar possíveis soluções para isso nos próximos dias, mas já
adianto que você pode ter uma prévia da funcionalidade apertando a tecla <kbd>/</kbd> em
qualquer página.
E, para finalizar, no dia 21 de janeiro eu vou mostrar como criar um design system
com React e Tailwind na <a href="https://conferenciacssbrasil.com.br/">Conferência CSS Brasil</a>.
Então, se você estiver por lá, te convido a tomar uma cerveja comigo depois do evento :)
Feliz 2023 a todos 🎉.

Douglas Moura

Douglas Moura

#webdev

Ano novo, blog novo (ou como eu criei este blog para 2023)