Desenvolvedor WEB

Desenvolvedor WEB é justamente o que eu não sou. Mas sou maker, e o DIY está no sangue. Por isso, mesmo tendo andado afastado do site, resolvi retomar de forma modesta, mas em grande estilo - criando meu próprio novo blog, que fosse de minimamente agradável a plenamente satisfatório. Não está perfeito, mas sinto que estou muito além do meio termo. E essa categoria WEB do site é para falar sobre a aventura que foi passar os últimos 2 meses envolvido com o aprendizado das tecnologias usadas aqui.

Desenvolvedor WEB

Acho que o nome correto é "fron-end", o que também não sou. Mas faremos o trabalho de um desenvolvedor WEB nessa emocionante (e longa) jornada à criação de um site com as seguintes características:

• CMS headless
• Site estático (sim, Manual do Maker agora é um site estático)
• Criação dos componentes que compõe a página
• Estruturação de dados
• Hospedagem gratuita (sim, você pode ter uma hospedagem nessa velocidade de resposta de graça)

Vamos começar essa série falando apenas dos conceitos envolvidos e no próximo artigo relacionado, iniciaremos o projeto de um site de aquaríimo, para servir como base criativa.

CMS headless

A começar pelo CMS, a mudança foi drástica. A princípio, eu achava que utilizaria o CMS de forma semelhante ao Wordpress (que também é um CMS, e era como Manual do Maker era hospedado). Me enganei.

Para escrever os artigos, estou usando o CMS Strapi, que é um CMS headless. Isso significa que você pode ter seus artigos escritos em um lugar qualquer (porém, para o build é necessário que o CMS esteja disponível para acesso através da Internet). O front-end pode ser qualquer coisa; PHP, NextJS, Hugo, Gatsby etc.

Migração de Wordpress para o Strapi

Essa foi uma aventura descomunal. Tive que escrever um programa que coletasse os dados no Wordpress e os inserisse no Strapi como markdown. Veremos todos os detalhes e também disponiblizarei os scripts. Tenho muito a falar sobre o Strapi, será ótimo detalhá-lo em futuros artigos.

Criar site estático com Gatsby

Quando escolhi o CMS, por acaso encontrei o Gatsby e sequer sabia que era um gerador de site estático. Acabei relacionando o Strapi com o Gatsby e foi uma tremenda sorte, porque formam um par perfeito, como veremos em artigos posteriores. O Gatsby utiliza Node e escrevi os componentes em React. Nunca havia feito um site e nunca havia "tocado" em java script. Tinha verdadeiro preconceito (não sei se agora gosto, mas não sou mais javascriptofóbico).

Componentes react

Os componentes que criaremos para o nosso projeto serão:

• Cards - os cards são fundamentais para blogs e informação que direciona para outro conteúdo.
• Navbar - a barra de navegação é um dos componentes básicos de qualquer site, com ou sem cards.
• Footer - o rodapé deixa qualquer site elegante. É horrível rolar para o final da página e ver nada. Só o fim.
• Categorias - Vamos criar uns 3 assuntos relacionados ao site e colocar algum conteúdo, para dar forma.
• Estruturação de dados - Aqui definiremos como virá o conteúdo do Strapi e como ele será tratado.

Estruturação de dados com Graphql para extrair os dados do Strapi para a compilação do site com Gatsby

Gigante o tópico, mas é o que é. Faremos queries com graphql para buscar os dados necessários que serão utilizados para a geração do site estático, incluindo as imagens.

A cereja do bolo - TailwindCSS

Para embelezar o site, usaremos o tailwind, que possui classes CSS incríveis. Mas vamos experimentar mais um, que ainda não usei e que facilita ainda mais, pelo que li a respeito.

A cereja da cereja

E tem bibliotecas para criar animações mais complexas. Os efeitos do blog não são exatamente triviais, mas tem coisa muito mais complexa e legal do que os recursos que utilizei aqui. Veremos tudo isso.

Essa migração teve um efeito colateral e para meu parco conhecimento, insolúvel. Não pude fazer redirecionamento do slug como desejava para manter o padrão anterior. Isso provavelmente vai destruir meu SEO, mas vão-se os anéis e ficam os dedos. O tempo repara tudo.

Como falei de SEO acima, lembrei que também criei um componente incrível de SEO. No blog em wordpress não estava mal, mas agora está atendendo 100% das práticas, conforme teste na PageSpeed Insights. Pegue alguns sites que você conhece e faça um comparativo. Agora Manual do Maker não é mais uma tartaruga idosa de muleta subindo a ladeira.

Deixarei de citar os links das redes sociais dentro do artigo, mas se você estiver lendo os artigos de um computador desktop com resolução de pelo menos 1440px, vai ver aí na coluna da direita os ícones para as redes sociais do blog. E acabei de lembrar de outro fator: Responsividade. Veremos tudo isso.

Eu não pretendo trabalhar como front-end de forma alguma, mas tenho um amigo que o faz, e sempre recomendarei ele para quem estiver interessado em sites - o Northon Barbosa, cujo meio de contato deve estar disponível no próxiimo artigo.