Astro es un moderno framework frontend que permite a los desarrolladores crear sitios web estáticos de forma rápida y eficiente. Con Astro, los desarrolladores pueden aprovechar la potencia de los modernos frameworks de JavaScript como React, Vue.js y Svelte para crear interfaces de usuario dinámicas mientras producen archivos HTML, CSS y JavaScript estáticos durante el proceso de creación.

Cuando se combina con WordPress como sistema de gestión de contenidos (CMS) headless, Astro permite una integración perfecta de las API del backend y el código del frontend, lo que permite un desarrollo eficiente de sitios web estáticos con contenido dinámico. Este enfoque ofrece varias ventajas.

Los sitios estáticos generados con Astro y un backend de WordPress ofrecen un rendimiento superior. Se pueden servir directamente desde una red de distribución de contenidos (CDN), lo que elimina la necesidad de procesamiento en el servidor y da como resultado tiempos de carga más rápidos y una experiencia de usuario más fluida.

Este tutorial te guía a través del proceso de creación de un sitio estático utilizando Astro alojado en el servicio de Alojamiento de Sitios Estáticos de Kinsta y utilizando WordPress para el backend.

El papel de WordPress como CMS headless

Un CMS headless, como WordPress, separa las capas de gestión de contenidos y de entrega. Permite que el backend mantenga el contenido mientras un sistema diferente, como Astro, se encarga del frontend.

WordPress actúa como repositorio de contenidos, suministrando datos al frontend, que muestra el contenido a los usuarios a través de una API. Esta arquitectura mejora la flexibilidad al permitir reutilizar el contenido para varias salidas, ofreciendo a los usuarios de WordPress una experiencia familiar de gestión de contenidos.

Desacoplar el frontend del backend también ofrece mayor flexibilidad en el diseño del frontend y en la migración de contenidos. Además, al permitir la accesibilidad a través de APIs, el contenido está preparado para el futuro.

Configura tu entorno de desarrollo

Hay tres pasos que debes seguir para configurar tu entorno:

  1. Instalar Astro.
  2. Crear un sitio deWordPress.
  3. Crear un entorno de desarrollo de WordPress.

Requisitos previos

Para seguir este tutorial, asegúrate de que tienes lo siguiente:

Instalar Astro

  1. Para tu proyecto, crea un nuevo directorio y navega hasta él.
  2. Crea un nuevo proyecto ejecutando el siguiente comando en tu terminal: 
    npm create astro@latest

    Este paso produce indicaciones de configuración. Configúralas en función de lo que quieras.

    Ventana de terminal que proporciona instrucciones para configurar tu nuevo proyecto Astro. Las instrucciones son:- ¿Dónde deberíamos crear tu nuevo proyecto?- ¿Cómo te gustaría empezar tu nuevo proyecto?- ¿Piensas escribir TypeScript?- ¿Cómo de estricto debería ser TypeScript?- ¿Instalar dependencias?- ¿Inicializar un nuevo repositorio git?
    Instrucciones para configurar tu nuevo proyecto Astro.

  3. Una vez que el proyecto se haya creado correctamente, ejecuta npm run dev para iniciar el servidor de desarrollo local en http://localhost:4321/.

    La página de bienvenida del sitio Astro. Proporciona enlaces a documentación, integraciones, temas y comunidad.
    Astro se ha instalado correctamente.

Configurar un sitio WordPress en Kinsta

Kinsta es un proveedor de alojamiento de WordPress de alta gama conocido por su interfaz intuitiva y su infraestructura de alto rendimiento. Sigue estos pasos para crear un sitio de WordPress en Kinsta.

  1. En tu panel de control MyKinsta, haz clic en Sitios WordPress y luego en Crear un sitio.
  2. Selecciona la opción Instalar WordPress y haz clic en Continuar.
  3. Proporciona un Nombre del sitio, selecciona una Ubicación del centro de datos y haz clic en Continuar.
  4. Proporciona el resto de información y haz clic en Continuar.
  5. Una vez creado tu sitio, deberías ver el mensaje «¡Tu sitio ha sido creado!»

Crear un entorno staging de WordPress

Cada instalación de WordPress en Kinsta tiene la opción de establecer un entorno staging gratuito separado del sitio de producción real. Esto es ideal para probar nuevas versiones de WordPress, plugins, código y trabajo de desarrollo en general.

Los pasos para crear un entorno Staging de WordPress en Kinsta son los siguientes.

  1. En la barra de menús, haz clic en Producción y luego en Crear Nuevo Entorno.

    Página de información del sitio que proporciona la ubicación del centro de datos y el nombre del sitio.
    Entorno de puesta en escena de WordPress.

  2. Selecciona Entorno estándar y haz clic en Continuar.
  3. Haz clic en Clonar un entorno existente, proporciona un Nombre de entorno, selecciona en Producción para el Entorno a clonar y haz clic en Continuar.
  4. Una vez desplegado, puedes encontrar el entorno staging de WordPress en el menú en Producción.

    Página de Información del Sitio mostrando el menú En Producción con los elementos En Producción, Staging y Crear Nuevo Entorno
    Creación correcta de un entorno staging.

Integrar WordPress con Astro

Existen dos métodos principales para integrar WordPress con Astro: una API REST y GraphQL. Esta guía utiliza el método GraphQL.

Para integrar WordPress con Astro, debes:

  • Instalar WPGraphQL.
  • Conectar Astro a WordPress.

Instalar WPGraphQL

En primer lugar, instala el plugin WPGraphQL en tu sitio de WordPress antes de utilizar GraphQL para conectar Astro a él.

  1. En el panel de control de MyKinsta, selecciona tu sitio de WordPress.
  2. En la barra de menús, haz clic en Staging y luego en Abrir WP Admin en la esquina superior derecha.

    Página de información del sitio mostrando el menú Staging y los botones entorno Enviar, Abrir WP Admin y Visitar sitio.
    Página de información del sitio.

  3. Proporciona las credenciales que utilizaste al crear tu sitio WordPress.
  4. Haz clic en el menú Plugins de la barra de navegación izquierda.
  5. Haz clic en Añadir Nuevo Plugin para añadir el plugin WPGraphQL.
  6. Busca «WPGraphQL», haz clic en Instalar Nuevo para instalar el plugin WPGraphQL y, a continuación, haz clic en Activar.

    La página Añadir Plugins muestra el plugin WPGraphQL y otros con un botón Instalar Nuevo junto a ellos
    Instalar el complemento WPGraphQL.

  7. Para comprobar que el plugin WPGraphQL que has instalado funciona como esperabas, abre el menú GraphQL de la barra de navegación y haz clic en GraphiQL IDE.
  8. Utiliza el siguiente código en el IDE GraphiQL y haz clic en Ejecutar en la parte superior izquierda para ejecutar la consulta GraphQL: 
    {
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}

    Esta consulta GraphQL recupera eficientemente los slugs, excerpts, y titles de las entradas del sitio de WordPress.

    Página GraphQL que muestra el código de la consulta GraphQL y un botón de ejecución en la parte superior
    Ejecutando la consulta GraphQL.

    En la parte izquierda del IDE GraphiQL, puedes ver la lista de entradas obtenidas al ejecutar la consulta GraphQL. Tu endpoint GraphQL de WordPress es accesible en https://your_wordpress_staging_url/graphql.

Conectar Astro a WordPress

Para conectar Astro a WordPress, sigue estas instrucciones:

  1. Crea una carpeta llamada graphql dentro de la carpeta src de tu proyecto Astro.
  2. Crea un archivo wordPressQuery.ts dentro de la carpeta graphql.
  3. Utiliza el siguiente código dentro de tu archivo wordPressQuery.ts. Asegúrate de sustituir https://your_wordpress_staging_url/graphql por la URL de tu 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;
}

    Este código define una interfaz gqlParams y una función asíncrona wpquery que facilita las consultas GraphQL al sitio de WordPress.

Desarrolla tu sitio con Astro y WordPress

  1. Para crear una nueva página estática en Astro, crea un archivo llamado blog.astro en el directorio src/pages.
  2. Pega el siguiente código en el archivo recién creado: 
    ---
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>

    Este código demuestra cómo utilizar la función wpquery para obtener datos del sitio de WordPress mediante GraphQL y mostrarlos en el sitio de Astro.

  3. Utiliza npm run dev para lanzar el servidor de desarrollo local y ver las últimas entradas del blog de WordPress en tu sitio Astro en http://localhost:4321/blog.

    Proyecto Astro mostrando las entradas de WordPress.
    Proyecto Astro mostrando las entradas de WordPress.

Para gestionar las rutas dinámicas de las entradas individuales del blog, tienes que utilizar una combinación de las rutas dinámicas de Astro y las variables de consulta de WordPress GraphQL. Pasando el ID o slug de la entrada como variable de consulta, puedes generar dinámicamente el contenido de la página para cada entrada del blog. Esto permite una experiencia de usuario más personalizada en tu sitio web.

Despliega tu sitio estático en Kinsta

Ahora, envía tus códigos a tu proveedor Git preferido (Bitbucket, GitHub o GitLab). A continuación, sigue estos pasos para desplegar tu sitio estático en Kinsta:

  1. En el panel de control de MyKinsta, haz clic en Sitios Estáticos y luego en Añadir sitio.
  2. Autoriza a Kinsta con tu proveedor de Git.
  3. Selecciona un Repositorio GitHub y una Rama por defecto. Proporciona un Nombre para mostrar para tu sitio estático y selecciona la casilla Despliegue automático en el commit. Esto permite el despliegue automático de todos los nuevos cambios realizados en el repositorio. Haz clic en Continuar.
  4. En la sección Configuración de construcción, Kinsta completa automáticamente todos los campos. Deja todo como está y haz clic en Crear sitio.
  5. Accede a tu sitio Astro accediendo a la URL que aparece como dominio en la página Visión General de tu sitio desplegado. Puedes acceder a las entradas del blog a través de https://your_kinsta_site_url/blog.

Resumen

Hay más cosas que puedes hacer con Astro y WordPress. La API de WordPress puede utilizarse para acceder a diversos datos de tu sitio y crear casos de uso únicos con Astro.

Con el Alojamiento administrado de WordPress de Kinsta, obtienes acceso a una infraestructura robusta, CDN mundial, edge caching, múltiples centros de datos y funciones de nivel empresarial. Esto garantiza un entorno rápido y seguro para tu sitio de WordPress.

Además, cuando utilizas frameworks frontend como Astro con WordPress headless, puedes alojar sus archivos estáticos en el Alojamiento de Sitios Estáticos de Kinsta de forma gratuita. Esto significa que sólo pagas por el alojamiento de WordPress, maximizando la eficiencia y la rentabilidad.

¿Cuál es tu opinión sobre WordPress headless y Astro? ¿Has explorado su potencial para crear soluciones únicas? Comparte tus experiencias en la sección de comentarios más abajo.

Jeremy Holcombe Kinsta

Editor de Contenidos y Marketing en Kinsta, Desarrollador Web de WordPress y Redactor de Contenidos. Aparte de todo lo relacionado con WordPress, me gusta la playa, el golf y el cine. También tengo problemas con la gente alta ;).