Como Criar um Site Com Gatsby e WordPress (Em 8 Passos)

Ao optar por um site WordPress headless, você pode ter mais controle sobre seu conteúdo. No entanto, construir um front-end para seu site continua sendo uma tarefa obrigatória. Para isso, você pode criar um site WordPress usando o Gatsby.

A função do Gatsby é criar uma versão estática do seu site WordPress. Com ela, você pode melhorar a velocidade e a segurança das suas páginas. Desta forma, seu site pode ranquear melhor nos motores de busca, ter uma experiência do usuário aprimorada e taxas de conversão maiores.

Neste post, vamos explicar o que é Gatsby e os benefícios de usá-lo com o WordPress. Depois, mostraremos a você como construir um site WordPress com o Gatsby. Vamos começar!

O Que é Gatsby?

Quando você usa o WordPress da maneira tradicional, você está construindo um site dinâmico. Isto é, seu servidor irá gerar um arquivo HTML único com base em uma solicitação sempre que alguém visitar seu site.

Para explicar de maneira mais detalhada, sites dinâmicos como os do WordPress são renderizados pelo navegador do usuário. Por conta disso, suas páginas podem ser carregadas de forma diferente com base no comportamento do usuário, fuso horário ou localização.

Alternativamente, você pode criar um site estático. Criadas por meio de códigos HTML, CSS e JavaScript pré-prontos, as páginas estáticas permanecerão as mesmas em cada carregamento.

Um site WordPress estático é conhecido como WordPress sem servidor ou headless (sem cabeça). Para realizar este processo, você precisará gerar páginas HTML para cada conteúdo do seu site. Isso pode ser feito com a ajuda de um gerador de sites estáticos como o Gatsby.

O Gatsby é um gerador de sites estáticos de código aberto baseado em React.JS, GraphQL e Webpack. Este framework permite que você crie um site estático com React e capture as informações do seu banco de dados WordPress.

Em outras palavras, o Gatsby irá buscar dados e renderizar conteúdo a partir de diversas fontes. Isso pode incluir dados de sites existentes, de chamadas de API REST ou de arquivos simples, através do GraphQL. A partir disso, o Gatsby construirá seu site estático com base nas configurações selecionadas 

O Gatsby não existe há tanto tempo quanto alguns outros geradores de sites estáticos. No entanto, ele ganhou popularidade rapidamente e hoje é a plataforma de muitos sites populares. Um exemplo do Gatsby em ação é o blog da Airbnb para engenheiros e cientistas de dados.

Dependendo das suas necessidades, o WordPress pode ser um sistema de gerenciamento de conteúdo (CMS) mais capaz e eficiente do que algumas das suas alternativas. Para reconhecer se o Gatsby é adequado para você, vamos discutir abaixo alguns dos prós, contras e cenários de uso para a ferramenta.

Vantagens de Usar o Gatsby

O tempo de carregamento do seu site é provavelmente uma de suas principais preocupações, seja você dono ou desenvolvedor da página. Como a velocidade impacta no ranking dos motores de busca e na experiência do usuário, é importante encontrar diferentes maneiras de acelerar seu website.

Um dos principais benefícios do Gatsby é sua velocidade de carregamento. Os sites estáticos normalmente processam solicitações mais rapidamente do que os dinâmicos. Com o Gatsby, você pode obter, compilar e construir o conteúdo do site de maneira muito mais veloz.

O Gatsby oferece recursos como geração estática atrasada, renderização inteligente de páginas e arquivos de site estáticos. Essas otimizações de desempenho podem melhorar a velocidade de suas páginas, seu SEO e sua taxa de conversão.

Sites estáticos também podem ser mais seguros. Por ter arquivos gerados de forma estática, há menos vulnerabilidades. Isso dificulta que potenciais invasores obtenham brechas para acessar os arquivos internos do seu site.

Se você tem um site dinâmico, seu servidor deve ser compatível com a plataforma selecionada. Por outro lado, os sites Gatsby estáticos podem ser hospedados em qualquer servidor. Como você não precisa de um servidor especializado, você pode encontrar o melhor plano de hospedagem que combina com o seu site. 

Exemplos de Uso do Gatsby

Em geral, o Gatsby pode ser uma ferramenta útil para qualquer pessoa que queira construir um site estático. Muitas vezes ele é a melhor opção para sites que não requerem mudanças frequentes. Entretanto, vamos analisar alguns casos específicos de uso para ajudá-lo a entender se o Gatsby é a escolha certa para o seu site.

Como mencionamos anteriormente, os sites estáticos são superiores quando se trata de velocidade. Para as empresas de e-commerce, trata-se de um fator essencial a ser considerado. Como Gatsby pode diminuir o tempo de carregamento de sua página, esta é uma opção eficaz para otimizar a taxa de conversão.

O Gatsby tem mais de 2,5 mil plugins para construir facilmente um site com todas as funcionalidades desejadas. Não importa se o seu nicho for artigos de luxo, itens de decoração ou moda, é possível criar um site Gatsby WordPress com recursos interativos e de alta qualidade.

A arquitetura do Gatsby não requer um servidor ou banco de dados, o que possibilita que seu site lide com uma grande quantidade de tráfego. Desde que sua rede de fornecimento de conteúdo (CDN) esteja funcionando corretamente, seu site não deverá enfrentar momentos onde fica fora do ar.

Como criador de conteúdo, você provavelmente desejará incluir imagens em seu site. Felizmente, o Gatsby pode otimizar as imagens para carregamento mais rápido, o que evita colocar muita pressão sobre os recursos de seu servidor.

Aqui estão mais alguns segmentos de sites que podem se beneficiar com o uso do Gatsby:

• Finanças e seguros
• Organizações de interesse público
• Desenvolvimento Web e WordPress
• Marketing
• Software e SaaS

Em suma, o Gatsby é uma ferramenta flexível que pode gerar muitos tipos diferentes de sites estáticos. Independentemente do tipo de conteúdo que você cria, ele pode otimizar o carregamento dos seus arquivos para melhorar a velocidade e a experiência do usuário. 

Desvantagens de Usar o Gatsby

Embora o Gatsby ofereça muitos benefícios, ele não é apropriado para todos os usuários. A plataforma é construída com base no WordPress React. Portanto, você precisará ter familiaridade com JavaScript. Você também terá que usar o GraphQL para criar e manipular queries.

Também é importante lembrar que o Gatsby gera apenas arquivos estáticos. Isto significa que você terá que reconsiderar o uso de conteúdo dinâmico no seu site. 

Muitas vezes, o conteúdo dinâmico é uma parte importante de um site. Por exemplo, você pode querer formulários de contato com campos personalizados, ou uma seção de comentários em posts para aumentar o engajamento dos seus usuários.

Para gerar esses elementos dinâmicos, você precisará usar serviços de terceiros. Por exemplo, uma plataforma externa como o Google Forms pode lidar com os formulários de contato, enquanto o Disqus pode ficar encarregado dos comentários. Entretanto, em qualquer uma destas opções, você não conseguirá controlar diretamente seu conteúdo dinâmico.

Por fim, você precisará aguardar sempre que editar um elemento em seu site estático. Com um CMS como o WordPress, qualquer mudança é aplicada instantaneamente no site. Com o Gatsby, por outro lado, você terá que esperar pelo menos um minuto para que as mudanças entrem no ar devido à forma como ele pré-renderiza o conteúdo.

Gatsby é Difícil de Aprender?

No caso de usuários iniciantes, usar Gatsby pela primeira vez pode envolver uma curva de aprendizado significativa. Lidar com HTML, CSS, JavaScript e linhas de comando pode ser um desafio se você está chegando agora no universo do desenvolvimento WordPress.

Por outro lado, se você tem alguma familiaridade com essas linguagens de programação, é possível aprender Gatsby facilmente. Vale lembrar que, para isso, você precisará lidar também com React.js, que é uma biblioteca JavaScript. Se você já conhece o básico de JavaScript, provavelmente não encontrará dificuldades no processo.

Além disso, você pode personalizar seu site Gatsby WordPress com HTML e CSS. Como essas linguagens de programação são relativamente fáceis de aprender e usar, a barreira para usar o Gatsby não deve ser muito alta.

O Gatsby também fornece muita documentação e tutoriais de como realizar as principais tarefas na plataforma. Mesmo sendo iniciante, é possível aprender rapidamente tudo o que você precisa para criar um website estático com WordPress e Gatsby.

Além disso, o Gatsby é um projeto de código aberto, de modo que os desenvolvedores constantemente melhoram seus recursos e documentação. 

Como Construir um Site com WordPress e Gatsby (Em 8 passos)

Agora é hora de aprender como criar um site com WordPress e Gatsby. Ao concluir esse processo, você poderá gerar seu website a partir de arquivos estáticos e melhorar o tempo de carregamento das suas páginas, aprimorando a experiência de usuário. Em vez de usar um tema WordPress Gatsby, vamos mostrar a você como realizar este processo do zero.

Passo 1 – Crie um Site WordPress

Usando o Gatsby, você pode gerar seu site WordPress como conteúdo estático. Para começar o processo, você precisará instalar o WordPress, que servirá como fonte de dados para o Gatsby. A fonte pode ser um site já existente, uma nova instalação ou um ambiente de desenvolvimento local.

Primeiro você precisará encontrar um serviço de hospedagem compatível, pois um provedor de hospedagem fornecerá o espaço do servidor para seu novo site. Neste processo, você poderá registrar um domínio e instalar o WordPress, tudo em um só lugar.

Aqui na Hostinger, fornecemos alguns dos planos de hospedagem com melhor custo-benefício do mercado. Se você está procurando um servidor otimizado para WordPress de alta qualidade, uma ótima opção é a nossa hospedagem de sites para WordPress. Nossos planos partem de €1.49 mensais.

Após adquirir um plano, você precisará escolher um domínio e instalar o WordPress. Ao entrar em sua conta hPanel, é possível visualizar os detalhes de seu plano.

Na seção WordPress do hPanel, clique no botão Editar Site. Isto abrirá seu painel de administração do WordPress, que você usará para administrar o back-end do site.

Etapa 2 – Instale os Plugins Gatsby

Você precisará instalar e ativar alguns plugins WordPress para o próximo passo. Primeiro, o WPGraphQL é uma ferramenta gratuita e de código aberto que habilitará a API GraphQL no WordPress. Este plugin configurará o WordPress como uma fonte de dados e permitirá que os dados sejam obtidos pelo GraphQL.

Para instalar o plugin, vá até Plugins -> Adicionar novo em seu painel do WordPress. Em seguida, busque por “WPGraphQL”. Ao encontrar o plugin, instale-o e ative-o.

O segundo plugin que você vai precisar baixar é o WPGatsby. Esta ferramenta manterá seu site WordPress sincronizado com o Gatsby. Ela também permite que você substitua a visualização do WordPress e o substitua pelo front-end do Gatsby.

Após ativar os dois plugins, vá até GraphQL -> Settings. Nessa tela, identifique o endpoint do GraphQL.

Este endereço é um caminho de endpoint para a API GraphQL no seu site. Como você precisará dessa informação mais tarde, copie ou anote a URL em algum lugar.

Antes de começar a trabalhar com o Gatsby, uma boa ideia é mudar seus permalinks do WordPress. Para obter melhores resultados com o WPGraphQL, use qualquer outra estrutura de links em vez da padrão.

Isso pode ser feito acessando a opção Configurações -> Links Permanentes na barra lateral do WordPress.

Não esqueça de salvar suas mudanças. Depois disso, abra a linha de comando e teste a conexão entre o WordPress e o GraphQL usando este comando:

curl --location --request POST 'https://your_domain/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{
    "query": "query { posts { nodes { title } } }"
}'

Isto enviará uma solicitação para o endpoint do GraphQL do seu site. Caso tudo esteja funcionando corretamente, você receberá uma resposta JSON listando os títulos das postagens do seu site.

Etapa 3 – Instale o Gatsby

Antes de instalar o Gatsby, você precisará se certificar de que seu site e sua máquina estão cumprindo os pré-requisitos necessários. Como o Gatsby opera por meio do Gerenciador de Pacotes do Node (npm), você precisará instalar tanto o NodeJS quanto o npm. Além disso, você precisará usar Git para gerenciar o código do site. 

Para baixar o Git e o NodeJS, você pode usar um instalador de pacotes. Para usuários de Mac, comece instalando o Homebrew, um gerenciador de pacotes ausentes no MacOS.

No terminal de comando, digite o seguinte comando para instalar e configurar o Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Depois de instalar o Homebrew, você pode usar estes comandos para instalar tanto o NodeJS quanto o Git:

brew install nodejs
brew install git

Se você tiver um computador rodando Windows, vá até as páginas de download do Git e do NodeJS. Escolha a versão para Windows e faça o download dos dois pacotes.

Para sistemas operacionais Linux, você pode usar um instalador de pacotes como o apt. Para instalar o software necessário, use estes comandos:

sudo apt update
sudo apt install nodejs git

Com tudo isso feito, você poderá enfim instalar o Gatsby. Para fazer isso, execute o seguinte comando em seu terminal:

npm install -g gatsby-cli

Isto fará o instalador do Gatsby rodar automaticamente. Você notará que ele irá baixar e instalar todas as dependências necessárias e, em seguida, o próprio Gatsby.

Passo 4 – Criar um Site Gatsby

Uma vez concluído o processo de instalação do Gatsby, você estará pronto para criar seu primeiro site Gatsby WordPress. Para começar, basta digitar o seguinte comando:

gatsby new gatsby-site

Isto clonará o template inicial padrão e o colocará na pasta /gatsby-site. Concluído o processo, seu site Gatsby será inicializado. Então, você pode abrir a sua versão de desenvolvimento com este comando:

cd gatsby-site
gatsby develop

Em seguida, o terminal de comando lhe dirá que você pode visitar seu novo site local. No navegador, vá até o endereço http://localhost:8000/. Isto lhe permitirá visualizar o front-end do seu site Gatsby.

Se não encontrar erros, você já pode começar a construir seu site estático. Para isso, você precisará criar os arquivos necessários no diretório público. Para fazer isto automaticamente, execute o seguinte comando:

gatsby build

Por fim, você pode criar um servidor HTML local para exibir seu novo website. É importante notar que isto só funcionará após a execução do comando build:

gatsby serve

Seguindo esses passos, você terá criado com sucesso um site estático Gatsby básico.

Passo 5 – Conecte o WordPress e Configure o Gatsby

Agora que você tem um site estático básico, é hora de integrá-lo ao WordPress. Para esta etapa, você vai direcionar o Gatsby para o endereço do seu site WordPress. Isto irá extrair os dados mais recentes de seu site ao executar este servidor de desenvolvimento.

Primeiro, instale o plugin Gatsby WordPress. Você pode fazer isso executando o seguinte comando:

npm install gatsby-source-wordpress

Então, use um editor de código ou texto para abrir o arquivo gatsby-config.js, que é o arquivo de configuração padrão para o Gatsby. Para conectar o Gatsby a uma fonte WordPress, adicione este código:

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

Lembre-se de substituir “example.com” pelo endpoint GraphQL que você copiou anteriormente. Se você estiver usando um site hospedado localmente, você pode usar “localhost:8888/wordpress” para substituir a URL do seu site. 

Passo 6 – Personalize os Arquivos do Template Padrão

Ao instalar o Gatsby, ele incluirá um template básico para você começar. Este template contém alguns arquivos-fonte básicos, com funcionalidade padrão. Para personalizar seu website, é importante entender a função de cada um deles:

• ./gatsby-node.js – contém o código que dispara as queries para capturar o conteúdo do  WordPress e gera os arquivos estáticos. Ao editar este arquivo, você pode modificar o conteúdo exibido em seu site. Se você está familiarizado com o desenvolvimento do WordPress, este processo é semelhante a edição de um Loop. 
• ./src/templates – arquivos individuais de templates que contêm e exportam um componente React. Como eles são responsáveis pela renderização do conteúdo, estes arquivos desempenham um papel essencial para alterar o visual de seu site. Eles são similares aos arquivos de templates do WordPress. 
• ./src/componentes – cada arquivo nesta pasta contém um componente React que realiza uma tarefa específica relacionada à interface de usuário (UI) do site. Estes não são templates, e sim blocos de construção de UI. Você pode colar o código nesta pasta se quiser compartilhar um elemento de IU em vários templates. No WordPress, os equivalentes a esses arquivos seriam as “partials” de templates. 
• ./src/css – consiste em arquivos CSS usados em todo o site, da mesma forma que o arquivo style.css no WordPress.

Agora que você entende como esses arquivos funcionam, é hora de adicionar suas personalizações.

Mostrar um Resumo dos Posts

Em um site WordPress, cada postagem tem um resumo, que geralmente é exibido na página do blog. O Gatsby, por sua vez, captura os resumos principalmente para fins de otimização para mecanismos de busca (SEO). O resumo é incluído na metadescrição do post.

Você pode querer personalizar a forma como os posts do blog são exibidos em seu site estático. Para fazer isso, você pode abrir o arquivo ./src/templates/blog-post.js. 

Para começar a exibir resumos de posts do blog, adicione o código abaixo ao arquivo de template:

const BlogPostTemplate = ({ data: { previous, next, post } }) => {
	...
	return (
		<Layout>
			...
			<h1 itemProp="headline">{parse(post.title)}</h1>
      
			<p>{post.date}</p>

			{/* Checking for and adding the post excerpt if the current post has one*/}
			{post.excerpt && (
				<div className="post-excerpt">{parse(post.excerpt)}</div>
			)}

      {/* if we have a featured image for this post let's display it */}
        {featuredImage?.fluid && (
          <Image
            fluid={featuredImage.fluid}
              alt={featuredImage.alt}
              style={{ marginBottom: 50 }}
          />
        )}
      ...
		</Layout>
	)
}

Depois disso, o Gatsby verificará automaticamente se o post em questão tem um resumo. Em caso positivo, ele o exibirá como conteúdo de texto dentro de um elemento <div>. Lembre-se de, ao terminar de editar este arquivo, salvar suas alterações.

Adicionar CSS personalizado

Você pode querer adicionar alguns efeitos visuais ao personalizar seu site Gatsby. Com o CSS personalizado, você pode destacar certos elementos na página para torná-los mais chamativos, entre outras alterações.

Por exemplo, digamos que você queira incluir um efeito de sombra em torno do resumo dos seus posts. Para fazer isso, você precisará abrir o arquivo ./src/css/style.css em um editor de texto. Então, você pode colar o código a seguir para personalizar a propriedade box-shadow:

.post-list-item header {
  margin-bottom: var(--spacing-4);
}

/* CSS targeting your new post excerpt element */
.post-excerpt {
  box-shadow: 0px 1px 9px 1px rgb(0 0 0 / 50%);
  padding: 6px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.post-excerpt p {
  margin-bottom: 0px;
}

Esse código criará uma sombra ao redor da caixa que contém o resumo, tornando-a mais atrativa. Nesse mesmo código você também pode especificar os níveis de margem, o arredondamento das bordas e o espaçamento.

Quando você estiver satisfeito com suas mudanças, salve o arquivo. Em seguida, você pode visitar seu site Gatsby para ver os efeitos adicionados.

Passo 7 – Construir um Template de Página

Na etapa anterior, você modificou um template existente para renderizar seus posts do blog como arquivos Gatsby estáticos. Você também pode criar um template básico para cada página em seu site WordPress Gatsby. Uma vez pronto o template de design, o Gatsby irá gerar automaticamente um post para cada uma de suas páginas do WordPress.

Para fazer isso, você pode usar a ação createPage. Primeiro, abra o arquivo gatsby-node.js e adicione este código:

const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  // query content for WordPress posts
  const result = await graphql(`
    query {
      allWordpressPost {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)
  const postTemplate = path.resolve(`./src/templates/post.js`)
  result.data.allWordpressPost.edges.forEach(edge => {
    createPage({
      // will be the url for the page
      path: edge.node.slug,
      // specify the component template of your choice
      component: slash(postTemplate),
      // In the ^template's GraphQL query, 'id' will be available
      // as a GraphQL variable to query for this post's data.
      context: {
        id: edge.node.id,
      },
    })
  })
}

Isto capturará os dados do GraphQL, gerando uma página para cada post do WordPress. Então, você pode usar o comando develop para navegar até as novas páginas no Gatsby.

Você também pode criar um template para diretórios. Você precisará abrir a pasta dos templates e encontrar o arquivo blog-post.js. Nele, adicione 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
          }
        }
      }
    }
  }

Quando você precisar adicionar links a essas novas páginas, abra o arquivo index.js. Em seguida, cole o seguinte código:

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
        }
      }
    }
  }

Ao fazer isso, adicione links a cada post dentro do código. Após salvar suas mudanças, você terá uma página de índice com links para todos os seus posts no blog.

Passo 8 – Realize Tarefas Adicionais de Migração

Quando você importar com sucesso todos os seus posts do WordPress para o Gatsby, você poderá começar a aproveitar todas as vantagens do seu novo site estático. No entanto, é uma boa ideia realizar algumas precauções extras para evitar problemas futuros.

Armazene Imagens Localmente

Mesmo que seus posts estejam sendo exibidos corretamente no Gatsby, as imagens podem ainda estar apontando para o WordPress. Neste caso, é importante habilitar a hospedagem das imagens no Gatsby. Lembre-se de que você não terá este problema caso suas imagens sejam salvas em outros locais. 

No Gatsby, uma forma de evitar que suas imagens sejam capturadas do WordPress é com o plugin Inline Images. Para instalar esta ferramenta, execute estes dois comandos:

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

Em seguida, abra seu arquivo gatsby-config.js. Aqui, adicione o seguinte código:

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`
            }
          }
        ]
      }
    }
  ],
}

Depois disso, salve suas mudanças. Em seguida, reinicie seu servidor de desenvolvimento, que fará o download de suas imagens do WordPress e as armazenará localmente. 

Mostre a Data da Última Modificação de um Post

Usando as queries do GraphQL, é provável que você já tenha capturado as datas de criação dos posts do seu blog. Entretanto, você também pode querer exibir a data em que eles foram modificados mais recentemente. Este elemento é útil para informar a seus leitores que eles estão lendo um conteúdo atualizado.

Adicionar uma data de “última modificação” aos seus posts no Gatsby é simples. Em uma query do GraphQL, insira este código em seu arquivo 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")
        }
      }
    }
  }

Isso atualizará seu post no blog com um novo carimbo contendo a data e hora da última modificação. Agora seu site WordPress Gatsby está pronto!

Conclusão

Com o Gatsby, você pode converter seu site WordPress em arquivos estáticos. Embora esta configuração exija conhecimentos de JavaScript e GraphQL, o Gatsby pode oferecer mais flexibilidade para proteger e escalonar seu conteúdo online. 

Recapitulando, eis como você pode construir um site estático com WordPress e Gatsby:

1. Crie um site WordPress.
2. Instale os plugins WPGraphQL e WPGatsby.
3. Instale o Gatsby.
4. Crie um site Gatsby.
5. Conecte o WordPress e configure o Gatsby.
6. Personalize os arquivos do template padrão.
7. Crie um template de página.
8. Realize tarefas adicionais de migração.

Agora você já pode fazer a transição de seu conteúdo para um site WordPress Gatsby!