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 sites 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.
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.
Além disso, Gatsby também tem feito cócegas no interesse dos desenvolvedores freelancer por seus portfólios. Portfólios 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.
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.
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 gitSe 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 gitInstalar 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-cliO 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-wordpressGatsby 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 developVocê pode então visitar a versão de teste do site em http://localhost:8000.
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 buildPara 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 serveAgora 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-wordpressConfigurar 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.
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:
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.
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:
Ao clicar em um link para um post, aqui está a página de posts do blog, renderizada por blog-post.js:
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.
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-imagesA seguir, adicione as seguintes linhas ao seu arquivo gatsby-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:
Como implantar seu site Gatsby na Kinsta
Além de Hospedagem Gerenciada de WordPress, a Kinsta oferece Hospedagem de Aplicativos, Hospedagem de Banco de Dados e Hospedagem de Site Estático. Você pode hospedar até 100 sites estáticos gratuitamente!
Para implantar seu site com Hospedagem de Site Estático, primeiro envie seu código para um provedor Git de sua preferência (Bitbucket, GitHub ou GitLab), e então siga os passos abaixo para implantá-lo:
- Faça login ou crie uma conta para acessar o painel MyKinsta.
- Autorize a Kinsta com o seu provedor Git.
- Clique em Sites Estáticos na barra lateral esquerda e, em seguida, clique em Adicionar site.
- Selecione o repositório e o branch de onde deseja implantar.
- Atribua um nome único ao seu site.
- Adicione as configurações de build no seguinte formato:
- Comando de build:
npm run build - Versão do Node:
18.16.0 - Diretório de publicação:
public
- Comando de build:
- Por fim, clique em Criar site.
Resumo
Tomar a decisão de converter seu site WordPress para um site estático e tirar vantagem do Gatsby pode ser uma tarefa desafiadora. Para fazer isso, você deve executar os seguintes passos:
- Instale o Gatsby para criar um site inicial.
- Conecte Gatsby à fonte WordPress através do GraphQL
- Criar modelos para posts em blogs
- Importe todas as suas imagens do WordPress
- Mostrar o último carimbo de data/hora modificado do WordPress
Agora, é a tua vez: Já brincaste com o Gatsby? Qual é a sua experiência com isso? Diga-nos nos comentários!
Shaumik is a data analyst by day, and a comic book enthusiast by night (or maybe, he's Batman?) Shaumik has been writing tutorials and creating screencasts for over five years. When not working, he's busy automating mundane daily tasks through meticulously written scripts!
Deixe um comentário