Como funciona um site dinâmico típico, como aqueles baseados em WordPress? Quando um visitante entra na URL em um navegador ou visita seu site através de um link, um pedido é enviado para o seu servidor web.

O servidor reúne os dados necessários através das consultas necessárias à base de dados e gera um ficheiro HTML para que o seu browser o possa visualizar. Os sites estáticos, por outro lado, armazenam essas respostas em arquivos planos no servidor que são entregues instantaneamente a um visitante.

Os geradores de locais estáticos existem há muito tempo, mas têm crescido em popularidade recentemente. Neste guia passo-a-passo, nós olhamos para a integração do WordPress com o Gatsby, um gerador de sites estático.

O que é o Gatsby?

O WordPress cria sites dinâmicos, que precisam de uma pilha de PHP, MySQL, e Apache ou Nginx no servidor para serem executados. É possível criar uma versão estática do WordPress, gerando uma lista de páginas HTML para todo o conteúdo do seu site.

Esta versão estática do WordPress é chamada de WordPress sem cabeça ou WordPress sem servidor. Este processo de conversão é feito apenas uma vez para que a mesma página possa ser servida aos visitantes várias vezes. Como você converte seu site WordPress para uma versão estática? É aqui que o Gatsby entra em cena.

Gatsby, ou GatsbyJS, é um gerador de site estático construído com ReactJS e alimentado por GraphQL. Gatsby permite que qualquer pessoa crie sites e aplicativos ricos em recursos e envolventes. Gatsby vai buscar dados para o seu site a partir de uma variedade de fontes, incluindo sites existentes, chamadas API e arquivos planos através do GraphQL, e constrói o site estático com base nas configurações especificadas por você.

Gatsby foi desenvolvido há apenas um ano, mas um grande número de utilizadores estão a experimentar Gatsby. Gatsby encontrou aceitação em uma variedade de ambientes. A página inicial do Blog de Ciência e Engenharia de Dados da Airbnb é alimentada pelo Gatsby, embora os posts no blog estejam hospedados no Medium.

Blog de Engenharia e Ciência de Dados da Airbnb

Blog de Engenharia e Ciência de Dados da Airbnb

Braun é uma marca da empresa de bens de consumo P&G. Seu site canadense é hospedado com Gatsby, enquanto a função de busca no site é alimentada por React.

O site canadense da Braun

O site canadense da Braun

Além disso, Gatsby também tem feito cócegas no interesse dos desenvolvedores freelancer por seus portfólios. Portfolio como o de Jacob Castro tem principalmente conteúdo estático com links para obras e contato através de e-mail, fazendo assim de um site estático um perfeito ajuste para suas necessidades.

Portfólio de Jacob D. Castro

Portfólio de Jacob D. Castro

Porquê Escolher o Gatsby?

Websites rápidos: O principal benefício de construir um site estático com o Gatsby é a velocidade, que os webmasters têm tentado otimizar desde o anúncio do Google de usar a velocidade do site no ranking de pesquisa da web. Os tempos de carregamento também afetam as visualizações e conversões de páginas. Foi estimado que um atraso de um segundo no tempo de carga do local pode levar a uma redução de 7% nas conversões.

Segurança: Você também recebe segurança adicional com um site estático. Como é um monte de arquivos estáticos sendo servidos, não há muito para invadir. Além disso, você sempre pode gerar novamente os arquivos estáticos se eles forem perdidos.

Custos do servidor: A hospedagem de um site dinâmico requer que o seu servidor seja compatível com a sua pilha de tecnologia. Se você estiver trabalhando com um site estático, você pode hospedá-lo em quase qualquer servidor, o que reduz o custo associado à hospedagem também.

Gerar o site estático com Gatsby em cada mudança precisa de JavaScript, que também pode ser feito em uma máquina local antes de transferir os arquivos estáticos para o site.

Porquê Evitar o Gatsby?

No Dynamic Content Built-In: Se você quiser usar Gatsby, você precisará repensar como controlar e servir conteúdo dinâmico, ou seja, você precisará criar um híbrido de estática/dinâmica para conseguir isso (mais sobre isso abaixo).

Por exemplo, os comentários precisam ser hospedados externamente através de um serviço como Disqus.

Os formulários de contato também precisariam ser reencaminhados através de um parceiro externo como o Google Forms. Em resumo, você perderia o controle direto sobre esse conteúdo dinâmico, pois suas respostas não são armazenadas em seus servidores.

As Construções Frequentes são Inconvenientes: Os locais estáticos também têm a questão dos reconvertidos frequentes. Qualquer mudança que você faça no seu site só é refletida depois que você tiver regenerado as páginas e as tenha carregado novamente no servidor.

Especialização técnica: Gatsby é construído sobre ReactJS e GraphQL. Alguns conhecimentos de JavaScript e uma idéia básica de GraphQL, portanto, é necessário para trabalhar com e portar um site para Gatsby.

Os sites estáticos são bons para quem procura uma solução de baixo custo, com alta segurança. Alguns casos de uso são sites de portfolio para freelancers e sites de demonstração de produtos.

Se você acha que os benefícios superam as deficiências, ótimo! Vamos agora tentar configurar o Gatsby para se integrar com o nosso site WordPress.

A última versão do site Gatsby que nós construímos neste tutorial está disponível no GitHub para seu uso.

Passo 1: Instalação do Gatsby

Nesta seção, vamos ver como instalar o Gatsby e criar um site estático básico com o Gatsby.

Pré-requisitos

O primeiro passo para começar com o Gatsby é verificar os seus pré-requisitos. Gatsby é servido através do npm, o instalador de pacotes NodeJS. Portanto, você precisa do NodeJS e npm no seu ambiente antes de instalar o Gatsby. Além disso, Gatsby requer que você instale Git, o sistema de gerenciamento de código fonte.

Info

Atualmente, Kinsta não pode hospedar servidores NodeJS e estes devem ser configurados em outro lugar. No entanto, você pode usar Kinsta para instalar o WordPress e puxar os dados usando a API REST ou o GraphQL

.

Se você estiver rodando Windows, você pode instalar o NodeJS e o Git através do instalador na página de download. Em um Mac, você pode baixar os instaladores deles ou usar o homebrew.

brew install nodejs
brew install git

Se você estiver rodando o sistema operacional Linux, você pode instalar o NodeJS através de um instalador de pacotes como o apt.

sudo apt update
sudo apt install nodejs git

Instalar Gatsby

Uma vez instalado com sucesso o NodeJS e o Git, você está pronto para instalar o Gatsby! A maneira mais fácil é executar o seguinte comando no terminal (use a linha de comando npm no Windows):

npm install -g gatsby-cli

O instalador primeiro instala as dependências e depois o Gatsby. Agora você está pronto para criar o seu primeiro site Gatsby.

Construa e Implante Seu Site Gatsby

Execute o seguinte comando para criar um site Gatsby.

gatsby new gatsby-wordpress

Gatsby cria um site no diretório /gatsby-wordpress através da clonagem do modelo inicial do Gatsby. Você pode fornecer um modelo inicial diferente para clonar. Uma vez concluída a clonagem e instaladas as dependências, você pode executar uma versão de teste do site com o seguinte comando.

cd gatsby-wordpress
gatsby develop

Você pode então visitar a versão de teste do site em http://localhost:8000.

Site Gatsby Starter

Site Gatsby Starter

O passo final é construir o seu site estático. O seguinte comando cria os arquivos estáticos no diretório público. Para carregá-lo em um servidor, você pode simplesmente carregar o conteúdo deste diretório para o diretório raiz do servidor. Você pode desejar adicionar um prefixo de caminho como www.example.com/blog/ como um URL raiz para suas construções.

gatsby build

Para iniciar um servidor HTML localmente para exibir esta forma estática do seu site, você precisa usar o comando serve. Esteja ciente de que só funciona depois de executar o comando de construção.

gatsby serve

Agora que você criou com sucesso um site estático básico do Gatsby, vamos tentar integrá-lo com o WordPress.

Passo 2: Como Ligar o Gatsby ao WordPress

Nesta seção, você irá integrar o seu site WordPress com o Gatsby. Você apontaria Gatsby para o endereço do seu blog WordPress para habilitá-lo a puxar os dados mais recentes quando você executar o servidor de teste ou gerar as páginas estáticas.

O processo de conexão do Gatsby ao WordPress é buscar seus dados do WordPress, o que é acionado por uma compilação. Uma vez que Gatsby pegou os dados do WordPress, ele cria o site estático com base no modelo atual.

O processo utiliza o site WordPress tem uma fonte para os posts no Gatsby. Para facilitar esta troca, você precisa instalar o plugin do Gatsby para WordPress através do seguinte comando:

npm install gatsby-source-wordpress

Configurar o Gatsby

Em seguida, adicione este plugin ao arquivo de configuração do Gatsby gatsby-config.js.

Em seguida, adicione o seguinte código ao arquivo para conectar o Gatsby ao seu fonte WordPress. Neste exemplo, nós usamos um site WordPress hospedado localmente no MAMP. Em uma nota lateral, você pode desejar editar o título e a descrição do site no siteMetadata.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Specify the URL of the WordPress source
            baseUrl: `localhost:8888/wordpress`,
            protocol: `http`,
            // Indicates if a site is hosted on WordPress.com
            hostingWPCOM: false,
            // Specify which URL structures to fetch
            includedRoutes: [
              '**/posts',
              '**/tags',
              '**/categories'
            ]
        }
    }

Buscar Posts com GraphQL

Depois de especificar a fonte do site WordPress no seu arquivo de configuração, você precisa especificar quais dados precisam ser extraídos do site WordPress. Gatsby usa GraphQL, uma linguagem de consulta de código aberto para APIs, para obter posts do WordPress em massa.

Antes de finalizar as consultas a serem selecionadas, você pode selecionar interativamente o conteúdo que você precisa buscar no WordPress. Execute o servidor de teste e vá para a URL: http://localhost:8000/___graphql para abrir o editor GraphQL.

Consultar dados com GraphQL

Consultar dados com GraphQL

Quando você tiver finalizado o conteúdo a ser puxado, você pode adicionar as consultas do GraphQL ao arquivo index.js.

Puxemos o título e extraímos apenas de cada post, por enquanto. Podemos adicionar mais campos mais tarde.

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

Ao verificar o site de teste, você notará que todos os posts do WordPress foram puxados com seus títulos e trechos exibidos:

Página inicial do Gatsby com posts no WordPress

Página inicial do Gatsby com posts no WordPress

Embora isso não pareça bonito, você conseguiu extrair com sucesso os dados relevantes do WordPress. O próximo passo é criar uma nova página para cada post.

Passo 3: Criar um Modelo Básico de Página

Nesta seção, você vai acionar o Gatsby para criar um post para cada página do seu site WordPress e incluir links para esses posts através da lesma.

Criar uma Página para Cada Mensagem

O primeiro passo após puxar todos os posts da fonte WordPress é instruir o Gatsby a criar uma página para cada post. Esta é uma ação que é completada usando a ação createPage.

Adicione o seguinte código ao gatsby-node.js. Note que estamos recebendo adicionalmente o conteúdo, autor, data e lesma de cada post:

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWordpressPost(sort: {fields: [date]}) {
        edges {
          node {
            title
            excerpt
            slug
            date(formatString: "MM-DD-YYYY")
            author {
              name
            }
          }
        }
      }
    }

  `).then(result => {
    result.data.allWordpressPost.edges.forEach(({ node }) => {
      createPage({
        // Decide URL structure
        path: node.slug,
        // path to template
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // This is the $slug variable
          // passed to blog-post.js
          slug: node.slug,
        },
      })
    })
  })

Depois de puxar os dados do GraphQL, o código cria uma página para cada post. Dentro do post, você pode especificar a estrutura URL da página com base na lesma usando o caminho.

Está cansado de um anfitrião lento para o seu site WordPress? Nós fornecemos servidores rápidos e suporte de classe mundial 24 horas por dia, 7 dias por semana, por especialistas em WordPress. Confira os nossos planos

Alternativamente, você pode obter o ID do post e especificá-lo no URL. A variável componente aponta para o modelo através do qual o post precisa ser renderizado. Finalmente, passamos a lesma como o contexto do modelo. Isto é necessário para que o modelo possa consultar o post certo da lista de posts buscados.

O ideal seria passar uma variável que identificasse de forma única um posto como o contexto.

Reinicie o servidor de teste após ter feito alterações no arquivo gatsby-node.js para que as alterações tenham efeito.

Criar um Modelo para Exibir um Lançamento

Crie um modelo de diretório no diretório src. Crie um novo arquivo blog-post.js dentro do diretório de templates e digite o seguinte código:

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default ({ data }) => {
  const post = data.allWordpressPost.edges[0].node
  console.log(post)
  return (
    <Layout>
      <div>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
        <p> By: {post.author.name} </p>
        <p> On: {post.date} </p>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    allWordpressPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          title
          content
          slug
          date(formatString: "MM-DD-YYYY")
          author {
            name
          }
        }
      }
    }
  }

 

A consulta GraphQL obtém a data e os nomes dos autores, que são exibidos no final do post. Você pode obter campos adicionais usando o editor GraphQL e exibi-los na página de postagem.

Link para Páginas no Índice

Você criou uma nova página para cada post. No entanto, você precisa adicionar um link para esses posts a partir da página do Índice. Vá até index.js e modifique o código para adicionar um link para cada post:

import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h1>My WordPress Blog</h1>
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <Link to={node.slug}>
            <p>{node.title}</p>
          </Link>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
          slug
        }
      }
    }
  }

Aqui está o status da página de índice:

Página de índice após adicionar links de postagens

Página de índice após adicionar links de postagens

Ao clicar em um link para um post, aqui está a página de posts do blog, renderizada por blog-post.js:

Postagem no blog com título, conteúdo, data de criação e autor

Postagem no blog com título, conteúdo, data de criação e autor

Passo 4: Tarefas Avançadas de Migração

Embora você possa ter importado com sucesso todos os posts do WordPress, vamos realizar algumas tarefas avançadas para garantir que você não enfrente problemas no futuro. Nesta seção, você pode trabalhar eficientemente com imagens e adicionar aos seus dados o último carimbo da data modificada.

Conversões de Caminhos de Imagem

Um dos nossos posts originais, “Postar com Imagem!” tinha uma imagem nele. Se você passar para a página correspondente no Gatsby, você notará que a imagem é exibida, mas a fonte da imagem é a mesma que a do WordPress. Neste exemplo, ele aponta para a imagem do WordPress hospedada localmente.

Gatsby post com uma imagem e sua fonte

Gatsby post com uma imagem e sua fonte

Se você estiver hospedando imagens externamente, isso não será um problema, pois você continuará apontando para o seu servidor de imagens. No entanto, se você armazenar as imagens dentro da sua instalação do WordPress, você precisará obter as imagens com os posts também!

Isto é abordado pelo plugin de imagens em linha. Primeiro, instale o
gatsby-image e depois o plugin gatsby-word-wordpress-inline-images.

npm install gatsby-image
npm install gatsby-wordpress-inline-images

A seguir, adicione as seguintes linhas ao seu arquivo gastby-config.js.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        ...
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options:
            {
              baseUrl: `localhost:8888/wordpress`,
              protocol: `http`
            }
          }
        ]
      }
    }
  ],
}

Reiniciar o servidor de teste depois de fazer estas alterações irá baixar as imagens do site WordPress e armazená-las localmente. Você pode verificar isso a partir do caminho da mesma imagem.

Exibir a Última Data Modificada

Se você administra um blog onde você atualiza regularmente suas postagens, você pode querer informar aos leitores quando uma posta foi atualizada pela última vez. Embora você tenha puxado a “data de criação” na consulta GraphQL antes, esta seção lhe diz como puxar o carimbo da hora “última modificação” também.

Para adicionar o último carimbo da hora modificada do WordPress ao seu post do Gatsby, você precisa adicionar o campo modificado à lista de itens em sua consulta GraphQL. É um carimbo de date como a data, portanto você também precisa adicionar o parâmetro formatString. Aqui está o arquivo modificado do blog-post.js:

...
<Layout>
  <div>
    ...
    <p> On: {post.date} </p>
    <p> Last modified: {post.modified} </p>
  </div>
</Layout>
...

export const query = graphql`
  query($slug: String!) {
  {
    allWordpressPost {
      edges {
        node {
          ...
          modified(formatString: "MM-DD-YYYY")
        }
      }
    }
  }

Uma vez adicionado isto, você poderá ver o último carimbo da hora modificada na página de postagem do blog no Gatsby:

Postar com o último carimbo de data/hora modificado

Postar com o último carimbo de data/hora modificado

Todos estão a falar do #Gatsby... mas o que é?🤷‍♂️ Saiba como criar sites rápidos alimentados por Gatsby + WordPress neste tutorial detalhado! 🕴🚀Click to Tweet

Resumo

Tomar a decisão de converter o seu site WordPress para um site estático tirando vantagem do Gatsby pode ser uma tarefa desafiadora. Para isso, você deve executar os seguintes passos:

Agora, é a tua vez: Já brincaste com o Gatsby? Qual é a sua experiência com isso? Diga-nos nos comentários!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos