Como criar um blog completo com GatsbyJS e WordPress

11 de janeiro de 20216 minutos de leitura

Como eu construí este site do zero e o que me levou às escolhas das ferramentas que eu utilizei.

Fala, pessoal! Neste artigo eu vou descrever o passo a passo da criação deste blog com GatsbyJS e WordPress. O que me levou a escolher as ferramentas que escolhi e como utilizei essas ferramentas.

Tecnologias

Para começar, vou descrever aqui cada pedacinho de software que eu usei, para podermos contextualizar e entender com o que estamos lidando.

Typescript

Como em todo projeto pessoal eu sempre tento investir tempo em aprender algo novo, dessa vez decidi dar uma chance ao typescript. Essa foi a minha primeira experiência com a linguagem e devo dizer que foi incrível. A curva de aprendizado é baixíssima e os benefícios valem muito a pena. A integração com o Gatsby e com o VSCode foi super simples de fazer.

Algolia

Para as buscas eu usei o Algolia, uma ferramenta de buscas que utiliza inteligência artificial para entregar os melhores resultados possíveis para o usuário. Algolia conta com opções personalizadas de ordenação de resultados, detecta erros de digitação, e muito mais.

Durante o build do site ele indexa as páginas e com o componente React que eles disponibilizam conseguimos fazer a integração de forma praticamente automática.

Hyvor Talk

Inicialmente eu pensei em utilizar o Disqus, e até usei durante o desenvolvimento, mas uma coisa que me desanimou demais foi o fato dele ser extremamente custoso pro desempenho do site e velocidade de carregamento. Além disso não tinha como dinamicamente trocar o esquema de cores, algo essencial para a minha aplicação, que possuí um dark mode.

Como tudo tem seus prós e contras, dessa vez não é diferente. O Hyvor Talk não tem um plano gratuito, mas eu gostei tanto que acabei ficando com ele, afinal, são só 5 dólares.

TailwindCSS

Sobre o TailwindCSS eu não tenho nem o que falar. Estou usando em praticamente todos os meus projetos desde 2019 e estou cada dia mais apaixonado. O mais legal de usar essa ferramenta é que você consegue acelerar demais o desenvolvimento de qualquer aplicação. Utilizando em conjunto com um framework como React ou Vue, é possível criar componentes lindos e com muito pouco código.

Por que Gatsby?

O GatsbyJS tem crescido demais nos últimos meses, principalmente por ser um framework que roda em cima do React. O que me fez escolhê-lo, foi principalmente a experiência de desenvolvimento, e a grande comunidade que o cerca, mas não somente isso.

O hype dos sites estáticos é real. Ferramentas como o Gatsby existem aos montes, e não é de hoje. Essas ferramentas são chamadas de SSG (Static Site Generators). Alguns exemplos são o Hugo e o Jekyll.

O fato do Gatsby trabalhar com React, faz com que o usuário tenha uma experiência de aplicativo dentro do seu site. E o resultado é um site é muito rápido.

como o gatsbyjs funciona
Como o Gatsby funciona

Além disso, esse é um novo produto da onSERP, e eu queria testar algumas coisas, e criar um boilerplate para os novos sites. Em breve isso estará disponível em um Gatsby Starter.

Por que WordPress?

O WordPress é um CMS super completo, com um editor de blocos super funcional e uma comunidade gigantesca ao redor do mundo. Não é mais que o esperado para o sistema está em praticamente 1/3 da internet, e vem aumentando cada vez mais.

Inicialmente eu pensei em utilizar o Strapi ou Contentful, porque é o que está mais em alta entre os desenvolvedores descolados. Mas eu não vendo essas ferramentas para os meus clientes, eu vendo WordPress. Também porque eu tenho mais familiaridade com o WordPress, e queria subir esse site rápido, sem ter que perder muito tempo lendo documentações e tutoriais na internet.

No lado do WordPress, foi a coisa mais simples do mundo, tanto que nem precisei criar um tema pra isso. Estou nesse momento utilizando o próprio Twenty Twenty-One, tema oficial do WordPress desse ano. O máximo que fiz de personalizado, foi barrar o front-end para quem não estiver logado.

Plugins

WP GraphQL: Disponibiliza um endpoint para comunicação com o site estático via GraphQL.

WP Gatsby: Necessário para integrar o gatsby-source-wordpress-experimental.

JAMstack Deployments: Envia, sempre que um post é atualizado, uma requisição para o build hook que eu criei na Netlify.

Netlify como hospedagem

A princípio, fiquei com muitas dúvidas sobre onde hospedar. Tinha duas principais opções: Netlify ou Vercel. Mas depois de muito pesquisar, percebi que no meu caso não faria tanta diferença. Ambas tem limites altos no plano gratuito, apesar da Vercel ter uns limites um pouco maiores. Então optei pela qual eu acho o painel mais bonitinho funcional.

A grande vantagem desses serviços é que você consegue fazer o deploy da sua aplicação de forma completamente automatizada, a cada push no repositório. Você aperta um botão aqui, e quando perceber seu site já estará no ar.

Também é possível ter um preview de diferentes branches e ainda fazer testes A/B por branch.

Resultados

Por padrão, o Gatsby de cara já te agracia com um site super otimizado. Ele otimiza as imagens, minifica todos os arquivos HTML, CSS e Javascript, faz o prefetching das páginas enquanto o usuário navega e garante uma experiência muito fluida para o usuário. Mas ainda assim, depende de você desenvolver utilizando as melhores práticas para conseguir chegar lá.

No meu caso, o site já é bem leve, e com poucas imagens, o que mais me deu trabalho foi o Largest Contentful Paint (LCP), uma das métricas mais importantes para o Google na data de publicação deste artigo. Junto com o Total Blocking Time (TBT), são as métricas que mais influenciam a nota geral do site.

Depois de muito otimizar, consegui ficar no verdinho!

Resultados do Google Lighthouse
Resultados do Google Lighthouse

Emfim, é isto! Comentem aqui em baixo o que acharam e deêm sugestões de outros artigos que eu poderia escrever.


Autor

Gustavo Rocha
Gustavo Rocha
Sócio e CTO da onSERP Marketing, marketeiro de formação e amante dos bixinhos. Apaixonado pela profissão. Encontrei meu propósito em desenvolver soluções inovadoras para clientes.