O Astro é um framework de frontend moderno que possibilita aos desenvolvedores criar sites estáticos, rápidos e eficientes. Com o Astro, é possível tirar proveito do poder dos frameworks JavaScript modernos, como React, Vue.js e Svelte, para desenvolver interfaces de usuário dinâmicas. Ao mesmo tempo, são gerados arquivos estáticos HTML, CSS e JavaScript durante o processo de build.

Quando combinado com o WordPress como um sistema de gerenciamento de conteúdo (CMS) headless, o Astro possibilita uma integração sem falhas entre APIs de backend e código frontend, permitindo o desenvolvimento eficiente de sites estáticos com conteúdo dinâmico. Essa abordagem oferece diversos benefícios.

Os sites estáticos criados usando o Astro e um backend do WordPress oferecem um desempenho superior. Podem ser distribuídos diretamente de uma rede de distribuição de conteúdo (CDN), removendo a necessidade de processamento no servidor e, consequentemente, resultando em tempos de carregamento mais rápidos e em uma experiência de usuário mais fluida.

Este tutorial orienta você no processo de configuração de um site estático usando o Astro hospedado no serviço de Hospedagem de Site Estático da Kinsta e usando o WordPress como backend.

O papel do WordPress como um CMS headless

Um CMS headless, como o WordPress, separa as camadas de gerenciamento e entrega de conteúdo. Ele permite que o backend mantenha o conteúdo enquanto um sistema diferente, como o Astro, lida com o frontend.

O WordPress funciona como um repositório de conteúdo, fornecendo dados para o frontend, que exibe o conteúdo para os usuários por meio de uma API. Essa arquitetura aumenta a flexibilidade, permitindo que você redirecione o conteúdo para várias saídas, proporcionando aos usuários do WordPress uma experiência familiar de gerenciamento de conteúdo.

Separar o frontend do backend também traz uma maior flexibilidade no design do frontend e na migração de conteúdo. Além disso, ao permitir a acessibilidade por meio de APIs, você protege o conteúdo para o futuro.

Configure seu ambiente de desenvolvimento

Há três etapas que você deve seguir para configurar seu ambiente:

  1. Instalar o Astro.
  2. Configurar um site WordPress.
  3. Criar um ambiente de teste WordPress.

Pré-requisitos

Para seguir este tutorial, verifique se você tem o seguinte:

Instale o Astro

  1. Para o seu projeto, crie um novo diretório e navegue até ele.
  2. Crie um novo projeto executando o comando abaixo em seu terminal: 
    npm create astro@latest

    Esta etapa cria prompts de configuração. Configure com base no que você deseja.

    Instruções para configurar seu novo projeto Astro.
    Instruções para configurar seu novo projeto Astro.

  3. Depois que o projeto for criado com sucesso, execute npm run dev para iniciar o servidor de desenvolvimento local em http://localhost:4321/.

    Você instalou o Astro com sucesso.
    Você instalou o Astro com sucesso.

Crie um site WordPress na Kinsta

A Kinsta é um provedor de hospedagem de sites WordPress de alto nível, conhecido por sua interface intuitiva e infraestrutura de alto desempenho. Siga estas etapas para criar um site WordPress na Kinsta.

  1. Em seu painel MyKinsta, clique em Sites WordPress e depois em Criar site.
  2. Selecione a opção Instalar WordPress e clique em Continuar.
  3. Forneça um nome do site, selecione um Local de centro de dados e clique em Continuar.
  4. Forneça todas as outras informações e clique em Continuar.
  5. Depois que seu site for criado, você verá a mensagem “Seu site foi criado!”

Crie um ambiente de teste WordPress

Toda instalação WordPress na Kinsta tem a opção de estabelecer um ambiente de teste gratuito separado do site de produção real. Isso é ótimo para você testar novas versões de WordPress, plugins, código e trabalho de desenvolvimento geral.

As etapas para criar um ambiente de teste WordPress na Kinsta são as seguintes.

  1. Na barra de menu, clique em Produção e depois em Criar novo ambiente.

    Ambiente de teste WordPress.
    Ambiente de teste WordPress.

  2. Selecione Ambiente padrão e clique em Continuar.
  3. Clique em Clonar um ambiente existente, forneça um Nome de ambiente, selecione Produção para o ambiente a ser clonado e clique em Continuar.
  4. Depois de implantado, você pode encontrar o ambiente de teste WordPress no menu Produção.

    Criação bem-sucedida de um ambiente de teste.
    Criação bem-sucedida de um ambiente de teste.

Integração do WordPress com o Astro

Existem dois métodos principais para integrar o WordPress ao Astro: Uma API REST e o GraphQL. Este guia usa a abordagem GraphQL.

Para integrar o WordPress ao Astro, você deve:

  • Instalar o WPGraphQL.
  • Conectar o Astro ao WordPress.

Instale o WPGraphQL

Primeiro, instale o plugin WPGraphQL em seu site WordPress antes de usar o GraphQL para conectar o Astro a ele.

  1. No painel MyKinsta, selecione seu site WordPress.
  2. Na barra de menu, clique em Teste e depois em Abrir WP Admin no canto superior direito.

    Página Informações do site.
    Página Informações do site.

  3. Forneça as credenciais que você usou ao criar seu site WordPress.
  4. Clique no menu Plugins na barra de navegação à esquerda.
  5. Clique em Add New Plugin para adicionar o plugin WPGraphQL.
  6. Procure por “WPGraphQL”, clique em Install New para instalar o plugin WPGraphQL e, em seguida, clique em Activate.

    Instalando o plugin WPGraphQL.
    Instalando o plugin WPGraphQL.

  7. Para testar se o plugin WPGraphQL que você instalou está funcionando conforme o esperado, abra o menu GraphQL na barra de navegação e clique em GraphiQL IDE.
  8. Use o código a seguir no GraphiQL IDE e clique em Run no canto superior esquerdo para executar a consulta GraphQL: 
    {
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}

    Essa consulta GraphQL recupera de forma eficiente os endereços slugs, excerpts e titles dos artigos do site WordPress.

    Executando a consulta GraphQL.
    Executando a consulta GraphQL.

    No lado esquerdo do GraphiQL IDE, você pode ver a lista de artigos retornados pela execução da consulta GraphQL. Você pode acessar o endpoint do WordPress GraphQL em https://your_wordpress_staging_url/graphql.

Conecte o Astro ao WordPress

Para conectar o Astro ao WordPress, siga estas instruções:

  1. Crie uma pasta chamada graphql dentro da pasta src do seu projeto Astro.
  2. Crie um arquivo wordPressQuery.ts dentro da pasta graphql.
  3. Use o seguinte código dentro do arquivo wordPressQuery.ts. Certifique-se de substituir https://your_wordpress_staging_url/graphql pela URL de teste do WordPress. 
    interface gqlParams {
    query: String;
    variables?: object;
}

export async function wpquery({ query, variables = {} }: gqlParams) {
    const res = await fetch('https://your_wordpress_staging_url/graphql', {
        method: "post",
        headers: {
            "Content-Type": "application/json",

        },

        body: JSON.stringify({
            query,
            variables,
        }),
    });

    if (!res.ok) {
        console.error(res);
        return {};
    }

    const { data } = await res.json();
    return data;
}

    Esse código define uma interface gqlParams e uma função assíncrona wpquery que facilita as consultas GraphQL ao site WordPress.

Desenvolva seu site com o Astro e o WordPress

  1. Para criar uma nova página estática no Astro, crie um arquivo chamado blog.astro no diretório src/pages.
  2. Cole o seguinte código no arquivo recém-criado: 
    ---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";

const data = await wpquery({
	query: `
 	 {
		posts{
			nodes{
				slug
				excerpt
				title
			}
 		 }
	 }  
 	`,
});
---

<Layout title="Astro-WordPress Blog Posts">
	<main>
		<h1><span class="text-gradient">Blog Posts</span></h1>

		{
			data.posts.nodes.map((post: any) => (
				<>
					<h2 set:html={post.title} />
					<p set:html={post.excerpt} />
				</>
			))
		}
	</main>
</Layout>
<style>
	main {
		margin: auto;
		padding: 1rem;
		width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 20px;
		line-height: 1.6;
	}

	h1 {
		font-size: 4rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		margin-bottom: 1em;
	}
</style>

    Esse código demonstra como usar a função wpquery para buscar dados do site do WordPress usando GraphQL e renderizá-los no site do Astro.

  3. Use npm run dev para iniciar o servidor de desenvolvimento local e ver os últimos artigos do blog WordPress no site do Astro em http://localhost:4321/blog.

    Projeto Astro exibindo artigos do WordPress.
    Projeto Astro exibindo artigos do WordPress.

Para lidar com o roteamento dinâmico de artigos de blog individuais, você precisa usar uma combinação das rotas dinâmicas do Astro e das variáveis de consulta do WordPress GraphQL. Ao passar o ID ou slug do artigo como uma variável de consulta, você pode gerar dinamicamente o conteúdo da página para cada artigo. Isso permite que você tenha uma experiência de usuário mais personalizada no seu site.

Implante seu site estático na Kinsta

Agora, envie seus códigos para o provedor Git de sua preferência (Bitbucket, GitHub ou GitLab). Em seguida, siga estas etapas para implantar seu site estático na Kinsta:

  1. No painel MyKinsta, clique em Sites estáticos e depois em Adicionar site.
  2. Autorize a Kinsta com seu provedor Git.
  3. Selecione um Repositório GitHub e uma Branch padrão. Forneça um Nome de exibição para o seu site estático e selecione a caixa Implantação automática no commit. Isso permite a implantação automática de todas as novas alterações feitas no repositório. Clique em Continuar.
  4. Na seção Configurações de build, a Kinsta preenche automaticamente todos os campos. Deixe tudo como está e clique em Criar site.
  5. Você pode acessar o site do Astro acessando a URL que aparece como domínio na página Visão geral do site implantado. Você pode acessar os artigos do blog via https://your_kinsta_site_url/blog.

Resumo

Há mais coisas que você pode fazer com o Astro e o WordPress. A API do WordPress pode ser usada para acessar vários dados do seu site e criar casos de uso exclusivos com o Astro.

Com a hospedagem gerenciada de WordPress da Kinsta, você obtém acesso a uma infraestrutura robusta, CDN global, Edge Caching, vários centros de dados e recursos de nível empresarial. Isso garante um ambiente rápido e seguro para o seu site WordPress.

Além disso, quando você usa frameworks de frontend como o Astro com o WordPress headless, pode hospedar seus arquivos estáticos na Hospedagem de Site Estático da Kinsta gratuitamente. Isso significa que você só paga pela hospedagem de sites WordPress, maximizando a eficiência e a relação custo-benefício.

O que você acha do WordPress headless e do Astro? Você já explorou o potencial deles para criar soluções exclusivas? Compartilhe suas experiências na seção de comentários abaixo.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).