Tutorial: Crie seu site com WordPress e Gatsby

Criar um site estático com o WordPress é possível com o WordPress sem cabeça. Esses tipos de sites carregam mais rápido porque os arquivos estáticos são salvos em seu servidor. A questão é: como você constrói um site headless com o WordPress?

É aqui que entra um gerador de sites estáticos como o Gatsby. Esses geradores ajudam você a criar sites estáticos ricos em recursos no WordPress. No entanto, você precisa integrá-los corretamente à sua instalação do WordPress para aproveitá-los ao máximo. Essa integração inclui a instalação, geração e configuração do WordPress Gatsby.

Neste artigo, veremos o que é o Gatsby e por que você pode querer usá-lo com o WordPress. Em seguida, detalharemos como usar o Gatsby e se você deve. Vamos começar!

O que é Gatsby?

Simplificando, Gatsby é um gerador de site estático. Isso significa que o Gatsby gera os arquivos HTML estáticos que são carregados no servidor do seu site. Quando um visitante chega ao seu site, esses arquivos estáticos são exibidos no navegador, em vez do conteúdo dinâmico que o WordPress geralmente oferece.

Para gerar esses arquivos, o Gatsby busca dados para o seu site em várias fontes. Isso inclui sites existentes, chamadas de API e arquivos simples por meio do GraphQL. Seu site estático é construído com base nas configurações que você definiu.

Em comparação com outros geradores de sites estáticos, o Gatsby é relativamente novo. No entanto, isso não impediu muitas empresas de experimentá-lo. Um dos maiores exemplos é o blog Airbnb Engineering & Data Science, que é alimentado por Gatsby.

Por que usar Gatsby com WordPress?

Como é possível criar um site estático com o WordPress, você pode se perguntar por que usar o WordPress e o Gatsby juntos. Embora o WordPress seja poderoso por si só, o Gatsby oferece alguns benefícios que você pode desejar para o seu site, incluindo velocidades mais rápidas e custos de servidor mais baixos. Compreender as vantagens e desvantagens do Gatsby pode ajudá-lo a tomar uma decisão informada.

Prós de usar o Gatsby

Gatsby oferece uma gama de benefícios que qualquer site pode aproveitar, incluindo:

• Velocidades de carregamento mais rápidas. Os sites estáticos carregam mais rápido do que os dinâmicos, e isso pode afetar sua Otimização de Mecanismos de Busca (SEO). A velocidade de carregamento da página é um sinal usado pelos mecanismos de pesquisa e afeta as taxas de rejeição do seu site.
• Custos de servidor reduzidos. Sites dinâmicos requerem pilhas e servidores de tecnologia compatíveis. Sites estáticos não, e você pode hospedá-los em qualquer servidor. Isso pode reduzir os custos do servidor.
• Segurança aprimorada. Sites estáticos fornecem segurança aprimorada. Os arquivos HTML estáticos servidos não oferecem muito para os hackers trabalharem. Se esses arquivos forem perdidos por qualquer motivo, você também pode recuperá-los com o Gatsby.

Seu site pode se beneficiar de todas essas vantagens. No entanto, você deve pesá-los contra as desvantagens de usar o Gatsby.

Contras de usar o Gatsby

Nenhum sistema de software é perfeito e o Gatsby tem algumas desvantagens que você precisa conhecer:

• Necessário conhecimento técnico. Gatsby é construído em ReactJS e usa GraphQL. Para usá-lo, é necessário algum conhecimento de JavaScript. Você também precisará ter conhecimento básico de GraphQL para criar um site.
• Nenhum conteúdo dinâmico. Gatsby só gera sites estáticos. Se você deseja conteúdo dinâmico, como formulários de contato, eles precisam ser redirecionados por meio de um provedor terceirizado.

Embora muitos desenvolvedores achem que os prós do Gatsby superam os contras, é importante entender ambos com antecedência.

Como faço para usar Gatsby com WordPress?

A configuração do Gatsby pode levar algum tempo e há algumas etapas que você precisará seguir. Você precisa instalar o Gatsby antes de começar a gerar seu site e configurá-lo. Além disso, há algumas considerações iniciais a serem feitas.

Etapa 1: verifique os pré-requisitos

Antes de instalar o Gatsby, você precisa instalar o NodeJS e o npm no ambiente do seu site. Git também é necessário para gerenciamento de código. As etapas para instalar os pré-requisitos variam, dependendo do sistema operacional executado.

Se você tiver o Windows, poderá instalar o NodeJS e o Git por meio do instalador na página de download. O mesmo é possível com o Mac. No entanto, se você executar o Linux, será necessário um instalador de pacote, como o apt.

Passo 2: Instale o Gatsby

Depois de instalar o NodeJS e o Git, você pode começar a instalar o Gatsby. O método mais fácil de fazer isso é usar o seguinte comando em seu terminal de software:

 npm install -g gatsby-cli

Este comando executa o instalador automaticamente. Ele primeiro baixará e instalará todas as dependências antes de instalar o Gatsby. Depois de concluído, você pode começar a criar seu primeiro site Gatsby.

Passo 3: Crie um Site Gatsby

Para criar seu site Gatsby, você precisará executar o seguinte comando:

 gatsby new gatsby-site

Este comando clona o modelo inicial do Gatsby e o coloca no diretório /gatsby-wordpress . Depois que a clonagem e a instalação estiverem concluídas, você poderá abrir a versão de desenvolvimento do site. Isso é feito usando o seguinte comando:

 gatsby develop

Enquanto o ambiente de desenvolvimento está em execução, você pode visitar localmente seu novo site. Em seu navegador da Web, digite http://localhost:8000 e seu modelo padrão deve ser aberto.

Se você vir esta página, poderá começar a criar seu site. Isso significa criar os arquivos estáticos no diretório público desses sites. O seguinte comando inicia automaticamente a produção desses arquivos estáticos:

 gatsby build

Esse comando também gera os pacotes de códigos JavaScript pré-roteados para seu site. Você pode usar o comando serve para exibir localmente seu novo site:

 gatsby serve

Este comando só funcionará se você já tiver executado o comando build.

Passo 4: Conecte o Gatsby ao WordPress

Agora você tem um site estático básico, mas precisa integrá-lo ao WordPress. Isso aponta seu site Gatsby para o endereço do seu blog WordPress, permitindo que ele extraia os dados mais recentes quando você executa o servidor de desenvolvimento. Uma vez conectado, o Gatsby criará um site estático com base no seu modelo WordPress atual.

Para conectar os dois, você precisará instalar o plugin Gatsby para WordPress. O seguinte comando cuidará disso:

 npm install gatsby-source-wordpress

Depois de instalar o plug-in, você pode começar a configurar o Gatsby.

Etapa 5: configurar o Gatsby

Para configurar o Gatsby, você precisa trabalhar com o arquivo gatsby-config.js . Nesse arquivo, adicione o seguinte código:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

Atualize este código para apontar para o seu site WordPress. Se o seu site estiver hospedado localmente, após baseUrl, você poderá usar localhost:8888/wordpress em vez da URL do seu site. Depois de salvar o arquivo, você precisará criar seus modelos de página.

Etapa 6: criar modelos de página

A construção de modelos de página permite que o Gatsby gere uma postagem para cada página do seu site WordPress. O plug-in de origem extrairá os dados necessários do WordPress para essas páginas, mas você terá que criar o modelo de design.

Em seu arquivo gatsby-node.js , adicione o seguinte 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 posts's data. context: { id: edge.node.id, }, }) }) }

Depois de chamar todos os dados do WordPress, o Gatsby irá gerar uma página para cada postagem. Usando o comando develop, você pode navegar para cada nova página usando o URL gerado.

Devo usar o Gatsby para WordPress?

Embora o Gatsby possa melhorar a velocidade e a segurança do seu site, não é a escolha certa para todos. Se o seu site tiver conteúdo estático que não muda com frequência, o Gatsby pode ser benéfico. No entanto, se você precisar de conteúdo dinâmico em seu site, o WordPress tradicional pode ser a melhor escolha.

Faça o máximo com seu site no WP Engine

Gatsby é um gerador de site estático eficaz que você pode integrar facilmente com o WordPress. Há etapas que você precisa seguir para instalar e configurar o sistema. Você também precisa ter algum conhecimento de Gatsby e GraphQL antes de começar.

O conteúdo estático pode melhorar a velocidade e a segurança do seu site, mas você também precisa do host certo. O WP Engine oferece os melhores recursos para que seu site crie uma excelente experiência digital. Isso deixa você com mais tempo para se concentrar no desenvolvimento!