Como foi desenvolver meu novo blog usando o GatsbyJS

Nesse artigo vou passar por todas as tecnologias que usei aqui: GraphQL, Styled Components, Algolia, Netlify CMS e mais um monte de coisa ūüėú

4 anos depois da √ļltima atualiza√ß√£o meu site est√° de cara nova, chegando assim na terceira vers√£o desde a sua concep√ß√£o em 2013.

Falando em 2013

Para quem tem curiosidade, essa era a cara desse site naquela época:

Imagem do meu primeiro site

Nada mal né? Esse projeto foi desenvolvido no começo de 2013, queria aprender novas tecnologias, principalmente relacionadas a geração estática de HTML. Para desenvolver essa versão utilizei coisas como:

Pouco tempo depois, começou o boom de libs baseadas em JavaScript, muita coisa boa surgia, uma atrás da outra.

Ent√£o chegamos em 2015

Em 2015, comecei a trabalhar remoto e novamente me senti na necessidade de estudar novas stacks de desenvolvimento.

E qual a melhor forma de estudar? Praticando.

Ent√£o trabalhei na segunda vers√£o desse site, que ficou com essa carinha aqui:

Imagem do meu segundo site

Nessa altura já tínhamos stacks mais legais disponíveis, então as escolhas foram:

A maior vantagem dessa stack, era a possibilidade de criar novos artigos usando Markdown, o que dava muita fluidez. Foram boas escolhas, e acho que ainda s√£o tecnologias legais para trabalhar.

Mas tudo passa, e o novo sempre chega

Dito isso, estamos em 2019. Por bastante tempo concentrei meus artigos no Medium. Por√©m nos √ļltimos meses n√£o estava satisfeito com algumas mudan√ßas que aconteceram por l√°.

E como sempre, surgiram milhares de novas tecnologias, ent√£o achei que era o momento de estudar desenvolvendo uma nova vers√£o para esse projeto, e de quebra usando algumas tecnologias bem hypes, como:

Gatsby

Gatsby

Gatsby √© um SSG (Static Site Generator), mas tem como diferencial ser totalmente baseado em React e utilizar o poder do GraphQL para consumir conte√ļdos e assets.

Ou seja, Gatsby é um framework poderoso. Uma das suas principais vantagens é gerar arquivos estáticos (olá SEO) no build, enquanto usamos React em tempo de desenvolvimento.

Al√©m disso, o Gatsby possu√≠ milhares de plugins. Eles elevam a DevXP (Dev Experience) para outro patamar, porque fornecem solu√ß√Ķes perform√°ticas para v√°rias quest√Ķes do dia-a-dia, fazendo com que a pessoa que est√° desenvolvendo perca menos tempo com trivialidades e tenha mais tempo para focar coisas essenciais para o produto.

Por gerar arquivos estáticos e ter sistemas de cache, a performance é simplesmente espetacular.

Por cima acredito que o Gatsby s√≥ se torna desinteressante em projetos com grande volume de conte√ļdo din√Ęmico, nesse caso o NextJS pode funcionar melhor, por utilizar SSR (Server Side Render).

Ah, a documentação é simplesmente sensacional e dificilmente você precisará fazer consultas fora do próprio site do Gatsby.

Gatsby Image

Est√° entre as coisas mais legais que vi nos √ļltimos tempos.

Basicamente é um componente React que serve para interligar as consultas GraphQL com o próprio processamento de imagens do Gatsby, e o resultado é sensacional.

Você escreve, por exemplo:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ image }) => (
  <>
    <Img fluid={image.childImageSharp.fluid} />
  </>
)

export const query = graphql`
  query {
    image: file(relativePath: { eq: "profile-pic.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 48, quality: 60) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

E vai gerar:

<img sizes="(max-width: 48px) 100vw, 48px" srcset="26e79/profile-pic.jpg 12w, 816c5/profile-pic.jpg 24w, a3a29/profile-pic.jpg 48w, 8c045/profile-pic.jpg 72w, 01945/profile-pic.jpg 96w, a7152/profile-pic.jpg 460w" src="profile-pic.jpg" alt="Felipe Fialho" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;">

Ou seja, um lazyload, com a imagem otimizada e fazendo um crop para todos os tamanhos que você definiu na query, automagicamente!

GraphQL

GraphQL

O GraphQL foi criado pelo Facebook para facilitar a manipulação de dados, a princípio pensando em componentes React. De um jeito bastante simples, você faz consultas descrevendo que tipo de dados você precisa e ele vai retornar exatamente esses valores pra você.

Usando em conjunto com o Gatsby, conseguimos informar por exemplo, quais dados determinado componente vai precisar, e o Gatsby se encarrega de receber esses dados quando esse componente for utilizado no Browser. Simples e perform√°tico.

Assim, conseguimos manipular muitas coisas, como as imagens que comentei acima ou mesmo fazer coisas do tipo:

{
  date(
    locale: "pt-br",
    formatString: "DD MMM[,] YYYY"
  ) // 04 Set, 2019
}

Da hora né?

Styled Components

Styled Components

Especificidade talvez seja o maior problema do CSS, colis√£o de classes pode literalmente quebrar um projeto.

Ent√£o surgiram sopas de letrinhas como OOCSS, SMACSS, BEM, DRY CSS, RCSS. Todas elas buscavam trazer conceitos para evitar colis√Ķes e tornar mais l√≥gico o desenvolvimento de CSS.

Essas metodologias s√£o legais, mas n√£o s√£o escal√°veis, porque dependem de atuac√£o humana para funcionar. Sendo assim, come√ßaram a surgir solu√ß√Ķes baseadas em JavaScript como CSS Modules.

Assim você foca em coisas mais importantes do que nome de classes, invés de escrever:

.menu__item__link { }

Você escreve:

.link { }

Gerando:

._link_12ie2_1 { }

Você pode ver uma implementação de CSS Modules no Kratos Boilerplate.

Styled Components √© uma dessas solu√ß√Ķes CSS-in-JS, mas acaba sendo ainda mais automatizada, porque aproveita m√©todos atuais de componentiza√ß√£o para criar componentes a prova de colis√£o.

O conceito é o mesmo:

import styled from 'styled-components'

export const Main = styled.div`
  align-items: center;
  display: flex;
`

Vai gerar automagicamente:

.styled__Main-sc-11b8j8d-1-bSsuBw {
  align-items: center;
  display: flex;
}

Se quiser saber mais, pode ver um exemplo de implementação no meu site.

styled-media-query

Desde a época que usava Stylus para escrever CSS, uso o Rupture para facilitar a implementação de media queries.

O styled-media-query segue a mesma ideia, e deixa muito mais simples e organizado o tratamento de media queries.

Basta escrever:

import styled from 'styled-components';
import media from 'styled-media-query';

const Box = styled.div`
  background: black;

  ${media.lessThan("medium")`
    background: red;
  `}

  ${media.between("medium", "large")`
    background: green;
  `}

  ${media.greaterThan("large")`
    background: blue;
  `}
`;

E automagicamente ele vai gerar:

div {
  background: black;

  @media (max-width: 768px) {
    background: red;
  }

  @media (min-width: 768px) and (max-width: 1170px) {
    background: green;
  }

  @media (min-width: 1170px) {
    background: blue;
  }
}

Simples, eficaz e escal√°vel.

Styled Icons

Aquele tempo que você precisava manualmente baixar icones e criar sprites usando seu task-runner favorito ficou para trás. O Styled Icons torna essa experiência simples e fluida.

import styled from 'styled-components'
import { Zap } from 'styled-icons/octicons/Zap'

const RedZap = styled(Zap)`
  color: red;
`

const App = () => <RedZap />

E pronto! Seu ícone estará disponível em SVG, o que significa que você pode, por exemplo alterar facilmente a cor, usando um simples fill: gray.

Algolia

Utilizei o Algolia para criar o sistema de busca para o blog.

Ele viabiliza APIs com um sistema de busca extremamente poderoso, de acordo com as informa√ß√Ķes contidas nos textos. E o melhor: Totalmente gratuito para projetos pessoais.

O Algolia ainda possui um componente chamado InstantSearch, que tem integração com os principais frameworks do mercado.

Olha esse exemplo de um indice que ele criou automagicamente através de um plugin do Gatsby:

{
  "date": "23 Jul, 2015",
  "description": "Quando o assunto é Mobile First, Media Queries e otimização de código eu tenho uma regra. Evitar ao máximo resetar propriedades",
  "title": "Otimizando e Organizando as Media Queries",
  "tags": [
    "css",
    "workflow"
  ],
  "fields": {
    "slug": "blog/otimizando-e-organizando-as-media-queries/"
  },
  "timeToRead": 4,
  "excerpt": "...",
  "objectID": "fcb60dd0-fa7a-5a7b-a5cc-90d0b330d130"
}

Netlify CMS

Adoro escrever diretamente no Markdown, mas isso pode ser um problema quando estou sem acesso ao computador, especialmente o processo de subir imagens não é simples de fazer diretamente no celular. O Netlify CMS surge para ajudar nisso.

Apesar de ser do Netlify, ele se integra muito bem com outras plataformas, inclusive o ghpages.

Saca só essa tela do meu CMS:

Netlify CMS

Além disso, ele ainda tem sistema de rascunho e upload de imagens.

Netlify

Netlify

E falando em Netlify, essa plataforma foi mais uma grande descoberta durante o desenvolvimento desse projeto.

√Č uma solu√ß√£o extremamente completa e automatizada para hospedagem de projetos, j√° que possui continuous deployment, serverless functions, https integrado e mais um monte de coisa.

O processo de continuous deployment é tão simples que não só deixei meu site lá, como também migrei outros projetos. O mais legal é que cada build realizado pode ser acessado separadamente através de uma URL gerada automaticamente por ele.

Ah, novamente é totalmente gratuito para projetos pessoais.

Quer aprender tudo isso que falei?

Toda essa stack foi inspirada na stack do site do Willian Justen, que inclusive j√° tinha escrito um post sobre ela.

Não satisfeito, ele lançou um curso muito legal abordando várias das tecnologias que falei aqui.

Se você se interessou pelo tema, vale muito a investir nesse curso.

Conclus√£o

O post ficou longo e mesmo assim ficou curto.

Cada tópico que abordei poderia ser um artigo individual. Mas espero que tenham curtindo.

At√© a pr√≥xima ūü•≥