{"id":32560,"date":"2019-12-27T05:28:02","date_gmt":"2019-12-27T13:28:02","guid":{"rendered":"https:\/\/kinqsta.com\/?p=58518&preview=true&preview_id=58518"},"modified":"2023-11-03T03:58:17","modified_gmt":"2023-11-03T06:58:17","slug":"gatsby-e-wordpress","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/gatsby-e-wordpress\/","title":{"rendered":"Introdu\u00e7\u00e3o \u00e0 Constru\u00e7\u00e3o de Websites com Gatsby e WordPress (R\u00e1pido e Est\u00e1tico)"},"content":{"rendered":"

Como funciona um site din\u00e2mico t\u00edpico, como aqueles baseados em WordPress? Quando um visitante entra na URL em um navegador ou visita seu site atrav\u00e9s de um link, um pedido \u00e9 enviado para o seu servidor web.<\/p>\n

O servidor re\u00fane os dados necess\u00e1rios atrav\u00e9s das consultas necess\u00e1rias \u00e0 base de dados e gera um ficheiro HTML<\/a> para que o seu browser o possa visualizar. Os sites est\u00e1ticos, por outro lado, armazenam essas respostas em arquivos planos no servidor que s\u00e3o entregues instantaneamente a um visitante.<\/p>\n

Os geradores de sites est\u00e1ticos<\/a> existem h\u00e1 muito tempo, mas t\u00eam crescido em popularidade recentemente. Neste guia passo-a-passo, n\u00f3s olhamos para a integra\u00e7\u00e3o do WordPress com o Gatsby<\/strong>, um gerador de sites est\u00e1tico.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 o Gatsby?<\/h2>\n

O WordPress cria sites din\u00e2micos, que precisam de uma pilha de PHP<\/a>, MySQL,<\/a> e Apache ou Nginx<\/a> no servidor para serem executados. \u00c9 poss\u00edvel criar uma vers\u00e3o est\u00e1tica do WordPress, gerando uma lista de p\u00e1ginas HTML para todo o conte\u00fado do seu site.<\/p>\n

Esta vers\u00e3o est\u00e1tica do WordPress \u00e9 chamada de WordPress sem cabe\u00e7a ou WordPress sem servidor<\/a>. Este processo de convers\u00e3o \u00e9 feito apenas uma vez para que a mesma p\u00e1gina possa ser servida aos visitantes v\u00e1rias vezes. Como voc\u00ea converte seu site WordPress para uma vers\u00e3o est\u00e1tica? \u00c9 aqui que o Gatsby entra em cena.<\/p>\n

Gatsby<\/a>, ou GatsbyJS, \u00e9 um gerador de site est\u00e1tico constru\u00eddo com ReactJS<\/a> e alimentado por GraphQL<\/a>. 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\u00e9s do GraphQL, e constr\u00f3i o site est\u00e1tico com base nas configura\u00e7\u00f5es especificadas por voc\u00ea.<\/p>\n

Gatsby foi desenvolvido h\u00e1 apenas um ano, mas um grande n\u00famero de utilizadores est\u00e3o a experimentar Gatsby. Gatsby encontrou aceita\u00e7\u00e3o em uma variedade de ambientes. A p\u00e1gina inicial do Blog de Ci\u00eancia e Engenharia de Dados da Airbnb<\/a> \u00e9 alimentada pelo Gatsby, embora os posts no blog estejam hospedados no Medium.<\/p>\n

\"Blog
Blog de Engenharia e Ci\u00eancia de Dados da Airbnb<\/figcaption><\/figure>\n

Braun \u00e9 uma marca da empresa de bens de consumo P&G. Seu site canadense<\/a> \u00e9 hospedado com Gatsby, enquanto a fun\u00e7\u00e3o de busca no site \u00e9 alimentada por React.<\/p>\n

\"O
O site canadense da Braun<\/figcaption><\/figure>\n

Al\u00e9m disso, Gatsby tamb\u00e9m tem feito c\u00f3cegas no interesse dos desenvolvedores freelancer<\/a> por seus portf\u00f3lios<\/a>. Portf\u00f3lios como o de Jacob Castro<\/a> tem principalmente conte\u00fado est\u00e1tico com links para obras e contato atrav\u00e9s de e-mail, fazendo assim de um site est\u00e1tico um perfeito ajuste para suas necessidades.<\/p>\n

\"Portf\u00f3lio
Portf\u00f3lio de Jacob D. Castro<\/figcaption><\/figure>\n

Porqu\u00ea Escolher o Gatsby?<\/h3>\n

Websites r\u00e1pidos: <\/strong>O principal benef\u00edcio de construir um site est\u00e1tico com o Gatsby \u00e9 a velocidade<\/a>, que os webmasters t\u00eam tentado otimizar desde o an\u00fancio do Google de usar a velocidade do site no ranking de pesquisa da web<\/a>. Os tempos de carregamento tamb\u00e9m afetam as visualiza\u00e7\u00f5es e convers\u00f5es de p\u00e1ginas. Foi estimado que um atraso de um segundo no tempo de carga do local pode levar a uma redu\u00e7\u00e3o de 7% nas convers\u00f5es<\/a>.<\/p>\n

Seguran\u00e7a: <\/strong>Voc\u00ea tamb\u00e9m recebe seguran\u00e7a<\/a> adicional com um site est\u00e1tico. Como \u00e9 um monte de arquivos est\u00e1ticos sendo servidos, n\u00e3o h\u00e1 muito para invadir. Al\u00e9m disso, voc\u00ea sempre pode gerar novamente os arquivos est\u00e1ticos se eles forem perdidos.<\/p>\n

Custos do servidor: <\/strong>A hospedagem de um site din\u00e2mico requer que o seu servidor seja compat\u00edvel com a sua pilha de tecnologia. Se voc\u00ea estiver trabalhando com um site est\u00e1tico, voc\u00ea pode hosped\u00e1-lo em quase qualquer servidor, o que reduz o custo associado \u00e0 hospedagem tamb\u00e9m.<\/p>\n

Gerar o site est\u00e1tico com Gatsby em cada mudan\u00e7a precisa de JavaScript, que tamb\u00e9m pode ser feito em uma m\u00e1quina local antes de transferir os arquivos est\u00e1ticos para o site.<\/p>\n

Porqu\u00ea Evitar o Gatsby?<\/h3>\n

No Dynamic Content Built-In:<\/strong> Se voc\u00ea quiser usar Gatsby, voc\u00ea precisar\u00e1 repensar como controlar e servir conte\u00fado din\u00e2mico, ou seja, voc\u00ea precisar\u00e1 criar um h\u00edbrido de est\u00e1tica\/din\u00e2mica<\/a> para conseguir isso (mais sobre isso abaixo).<\/p>\n

Por exemplo, os coment\u00e1rios<\/a> precisam ser hospedados externamente atrav\u00e9s de um servi\u00e7o como Disqus<\/a>.<\/p>\n

Os formul\u00e1rios de contato<\/a> tamb\u00e9m precisariam ser reencaminhados atrav\u00e9s de um parceiro externo como o Google Forms<\/a>. Em resumo, voc\u00ea perderia o controle direto sobre esse conte\u00fado din\u00e2mico, pois suas respostas n\u00e3o s\u00e3o armazenadas em seus servidores.<\/p>\n

As Constru\u00e7\u00f5es Frequentes s\u00e3o Inconvenientes: <\/strong>Os locais est\u00e1ticos tamb\u00e9m t\u00eam a quest\u00e3o dos reconvertidos frequentes. Qualquer mudan\u00e7a que voc\u00ea fa\u00e7a no seu site s\u00f3 \u00e9 refletida depois que voc\u00ea tiver regenerado as p\u00e1ginas e as tenha carregado novamente no servidor.<\/p>\n

Especializa\u00e7\u00e3o t\u00e9cnica: <\/strong>Gatsby \u00e9 constru\u00eddo sobre ReactJS e GraphQL. Alguns conhecimentos de JavaScript e uma id\u00e9ia b\u00e1sica de GraphQL, portanto, \u00e9 necess\u00e1rio para trabalhar com e portar um site para Gatsby.<\/p>\n

Os sites est\u00e1ticos<\/a> s\u00e3o bons para quem procura uma solu\u00e7\u00e3o de baixo custo, com alta seguran\u00e7a. Alguns casos de uso s\u00e3o sites de portfolio para freelancers e sites de demonstra\u00e7\u00e3o de produtos.<\/p>\n

Se voc\u00ea acha que os benef\u00edcios superam as defici\u00eancias, \u00f3timo! Vamos agora tentar configurar o Gatsby para se integrar com o nosso site WordPress<\/a>.<\/p>\n

A \u00faltima vers\u00e3o do site Gatsby que n\u00f3s constru\u00edmos neste tutorial est\u00e1 dispon\u00edvel no GitHub<\/a> para seu uso.<\/p>\n

Passo 1: Instala\u00e7\u00e3o do Gatsby<\/h2>\n

Nesta se\u00e7\u00e3o, vamos ver como instalar o Gatsby e criar um site est\u00e1tico b\u00e1sico com o Gatsby.<\/p>\n

Pr\u00e9-requisitos<\/h3>\n

O primeiro passo para come\u00e7ar com o Gatsby \u00e9 verificar os seus pr\u00e9-requisitos. Gatsby \u00e9 servido atrav\u00e9s do npm, o instalador de pacotes NodeJS. Portanto, voc\u00ea precisa do NodeJS e npm no seu ambiente antes de instalar o Gatsby. Al\u00e9m disso, Gatsby requer que voc\u00ea instale Git<\/a>, o sistema de gerenciamento de c\u00f3digo fonte.<\/p>\n