Se assim como eu, você está pensando em criar um blog de desenvolvimento para você, provavelmente está um pouco sobrecarregado com a quantidade de ferramentas e tecnologias. Vivemos em uma era de abundância e existem muitas opções.

Neste artigo, vou detalhar como este blog foi criado, para que você possa construir algo semelhante para você. Este artigo não é um tutorial, mas irei fornecer um em breve.

TL;TR

Em 2014 eu queria criar um blog, para que pudesse adquirir compartilhar conhecimentos do estudos de tecnologias que no meu trabalho eu não conseguia implementar.

A versão 1.0 foi desenvolvida em Wordpress, esse era o único CMS/linguagem(php) que eu sabia trabalhar na época. Já a versão 2.0, eu queria aprender algo novo, e a escolha foi um site estático com Jekyll, os posts eram criados com markdown e compilados em html. Pasmem, esta já é versão 3.0 deste blog, e por incrível que pareça, as outras versões nunca foram lançadas.

E o motivo desses blogs não terem sido lançados ?

Eu nunca gostei do resultado, tanto de performance, como UI/UX, e o principal, a famosa síndrome do impostor. Eu não achava que era bom suficiente para compartilhar um conteúdo.

A pilha

Quando eu estava construindo este blog, minha maior prioridade era encontrar uma solução que me permitisse incorporar conteúdo de forma simples e rápida, e que pudesse aprender algo novo. Acabei finalizando o projeto com a pilha Nuxt(vue) + Tailwind(css) + Strapi(graphql).

O CMS

Eu cheguei a testar alguns outros CMS, comecei com Cockpit.

Comecei o desenvolvimento com ele, e foi bem simples de configurar, porém acabei decidindo mudar o CMS, pois queria desenvolver um carreira como fullstack JS, e o Cockpit é feito em PHP.

Então, comecei a pesquisar CMS Self-Hosted e encontrei o Strapi. E em 3 dias, o back-end estava pronto.

NuxtJS (VueJS)

Este blog é um aplicativo NuxtJS

O Nuxt é “similar” ao Next, porém usa o Vue, que é minha “paixão” ♥

Com o Nuxt, você tem algumas opções diferentes quando se trata de renderização de página: você pode escolher fazê-lo “sob demanda” (renderização do lado do servidor) ou antecipadamente (geração de site estático). Optei por construir todas as postagens do blog com antecedência, quando o site for gerado.

Eu também estou experimentando as Rotas de API do Nuxt para coisas que requerem back-end, atualmente trabalhando em duas features:

• Gerador de thumbnail das postagem, para publicação em redes sociais
• Contador de likes das postagens

Estou documentando todo o processo, e irão virar uma postagem logo logo.

Tailwind

Quando se trata de estilo, eu uso componentes com estilo e escrevo todos os estilos do “zero”. Não uso nenhuma biblioteca “cosmética” como o Bootstrap_ (e também não acho que você deva)_. Porém conheci o Tailwind, e foi amor ao primeiro código.

O Tailwind é um “framework” de utilitários de CSS, ou seja, ele gera classe de html, baseados nas propriedades de css.

<div class="flex">
<button class="flex px-3 py-2 bg-blue-500 mr-1 text-white font-semibold rounded">
<button class="flex px-3 py-2 bg-blue-500 mr-1 text-white font-semibold rounded">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>
    <span class="ml-1">Home</span>
</button>

<button class="flex px-3 py-2 bg-red-500 mr-1 text-white font-semibold rounded">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>
    <span class="ml-1">Home</span>
</button>

<button class="flex px-3 py-2 bg-orange-500 mr-1 text-white font-semibold rounded">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>
    <span class="ml-1">Home</span>
</button>

<button class="flex px-3 py-2 bg-gray-500 text-white font-semibold rounded">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>
    <span class="ml-1">Home</span>
</button>
</div>

O código acima, renderiza essa estilização

Markdown

Nenhum blog de desenvolvedor está completo sem trechos de código com destaque de sintaxe. Tenho algumas opções diferentes para isso neste blog.

Muitos processadores Markdown nos permitem criar exemplos de código com crases triplos ( ). Podemos especificar o idioma para realce de sintaxe também ( css).

.app-container {
  width: 800px;
  padding: 32px;
}

Nos bastidores, isso é usado markedjs com um tema de sintaxe personalizado.

<!DOCTYPE html>
  <title>Title</title>

  <style>body {width: 500px;}</style>

  <script type="application/javascript">
    function $init() {return true;}
  </script>

  <body>
    <p checked class="title" id='title'>Title</p>
    <!-- here goes the rest of the page -->
  </body>
  

Deploy

Como a proposta era gerar o site automaticamente quando existisse uma edição ou nova postagem, eu precisava de um servidor que fizesse isso automático. Inicialmente pensei em fazer tudo por conta, usando a AWS ou DigitalOcean. Mas conheci a Vercel, e inicialmente os escolhi porque eles são a empresa por trás do Next.js, e também dão suporte á implementação ao Nuxt.js, então achei que seria bem otimizado.

Honestamente, a plataforma deles é incrível. Acabei mudando alguns dos meus projetos não pertencentes ao Nuxt para lá também.

Conclusão

Eu finalmente decidi enfrentar minha síndrome do impostor, e não deixar que este medo me impeça de desenvolver coisas maravilhosas. E o processo de criação desse blog foi incrível. Aprendi tecnologias novas, consegui definir metas realista, lutei contra os meus sabotadores (irei explicar em uma postagem), e tratei o projeto como um MVP.

E apesar do desenvolvimento deste blog ainda não estar completo, estou incrivelmente satisfeito com o resultado até o momento.