Tutorial: Construya su sitio con WordPress y Gatsby

Crear un sitio web estático con WordPress es posible con WordPress sin cabeza. Estos tipos de sitios web se cargan más rápido porque los archivos estáticos se guardan en su servidor. La pregunta es, ¿cómo se construye un sitio web sin cabeza con WordPress?

Aquí es donde entra en juego un generador de sitios estáticos como Gatsby. Estos generadores lo ayudan a crear sitios web estáticos ricos en funciones en WordPress. Sin embargo, debe integrarlos correctamente con su instalación de WordPress para aprovecharlos al máximo. Esta integración incluye la instalación, generación y configuración de WordPress Gatsby.

En este artículo, veremos qué es Gatsby y por qué es posible que desee usarlo con WordPress. Luego detallaremos cómo usar Gatsby y si deberías hacerlo. ¡Empecemos!

¿Qué es Gatsby?

En pocas palabras, Gatsby es un generador de sitios estáticos. Esto significa que Gatsby genera los archivos HTML estáticos que se cargan en el servidor de su sitio web. Cuando un visitante llega a su sitio, estos archivos estáticos se envían a su navegador, en lugar del contenido dinámico que WordPress generalmente ofrece.

Para generar estos archivos, Gatsby obtiene datos para su sitio web de una variedad de fuentes. Esto incluye sitios web existentes, llamadas API y archivos planos a través de GraphQL. Luego, su sitio web estático se crea en función de las configuraciones que ha establecido.

En comparación con otros generadores de sitios estáticos, Gatsby es relativamente nuevo. Sin embargo, esto no ha impedido que muchas empresas lo prueben. Uno de los ejemplos más grandes es el blog de ingeniería y ciencia de datos de Airbnb, que funciona con Gatsby.

¿Por qué usar Gatsby con WordPress?

Como es posible crear un sitio web estático con WordPress, quizás se pregunte por qué debería usar WordPress y Gatsby juntos. Si bien WordPress es poderoso por sí solo, Gatsby ofrece algunos beneficios que podría desear para su sitio web, incluidas velocidades más rápidas y costos de servidor más bajos. Comprender las ventajas y desventajas de Gatsby puede ayudarlo a tomar una decisión informada.

Ventajas de usar Gatsby

Gatsby ofrece una variedad de beneficios que cualquier sitio web puede aprovechar, que incluyen:

• Velocidades de carga más rápidas. Los sitios web estáticos se cargan más rápido que los dinámicos, y esto puede afectar su optimización de motores de búsqueda (SEO). La velocidad de carga de la página es una señal utilizada por los motores de búsqueda y afecta las tasas de rebote de su sitio web.
• Costos de servidor reducidos. Los sitios web dinámicos requieren servidores y pilas de tecnología compatibles. Los sitios web estáticos no lo hacen y puede alojarlos en cualquier servidor. Esto puede reducir los costos de su servidor.
• Seguridad mejorada. Los sitios web estáticos brindan mayor seguridad. Los archivos HTML estáticos servidos no ofrecen mucho para que los piratas informáticos trabajen. Si estos archivos se pierden por algún motivo, también puede regenerarlos con Gatsby.

Su sitio web puede beneficiarse de todas estas ventajas. Sin embargo, debe compararlos con las desventajas de usar Gatsby.

Contras de usar Gatsby

Ningún sistema de software es perfecto, y Gatsby tiene algunos inconvenientes que debe conocer:

• Se necesitan conocimientos técnicos. Gatsby se basa en ReactJS y usa GraphQL. Para usarlo, es necesario algún conocimiento de JavaScript. También deberá tener conocimientos básicos de GraphQL para crear un sitio web.
• Sin contenido dinámico. Gatsby solo genera sitios web estáticos. Si desea contenido dinámico, como formularios de contacto, debe redirigirse a través de un proveedor externo.

Si bien muchos desarrolladores encuentran que las ventajas de Gatsby superan a las desventajas, es importante comprender ambas de antemano.

¿Cómo uso Gatsby con WordPress?

Configurar Gatsby puede llevar algo de tiempo y hay ciertos pasos que deberá seguir. Debe instalar Gatsby antes de poder comenzar a generar su sitio y configurarlo. Además, hay algunas consideraciones iniciales que hacer.

Paso 1: verifique los requisitos previos

Antes de poder instalar Gatsby, debe instalar NodeJS y npm en el entorno de su sitio web. Git también es necesario para la gestión de código. Los pasos para instalar los requisitos previos varían según el sistema operativo que ejecute.

Si tiene Windows, puede instalar NodeJS y Git a través del instalador en la página de descarga. Lo mismo es posible con Mac. Sin embargo, si ejecuta Linux, se requiere un instalador de paquetes como apt.

Paso 2: Instala Gatsby

Después de instalar NodeJS y Git, puede comenzar a instalar Gatsby. El método más fácil para hacer esto es usar el siguiente comando en su terminal de software:

 npm install -g gatsby-cli

Este comando ejecuta el instalador automáticamente. Primero descargará e instalará todas las dependencias antes de instalar Gatsby. Una vez que esté completo, puede comenzar a crear su primer sitio web de Gatsby.

Paso 3: crea un sitio de Gatsby

Para crear su sitio web de Gatsby, deberá ejecutar el siguiente comando:

 gatsby new gatsby-site

Este comando clona la plantilla de inicio de Gatsby y la coloca en el directorio /gatsby-wordpress . Una vez completada la clonación y la instalación, puede abrir la versión de desarrollo del sitio. Esto se hace usando el siguiente comando:

 gatsby develop

Mientras se ejecuta el entorno de desarrollo, puede visitar localmente su nuevo sitio web. En su navegador web, ingrese http://localhost:8000 y su plantilla predeterminada debería abrirse.

Si ve esta página, puede comenzar a construir su sitio web. Esto significa crear los archivos estáticos en el directorio público de esos sitios web. El siguiente comando inicia automáticamente la producción de estos archivos estáticos:

 gatsby build

Este comando también genera los paquetes de código JavaScript previos a la ruta para su sitio web. Luego puede usar el comando de servicio para mostrar localmente su nuevo sitio web:

 gatsby serve

Este comando solo funcionará si ya ejecutó el comando de compilación.

Paso 4: conecta Gatsby a WordPress

Ahora tiene un sitio web estático básico, pero necesita integrarlo con WordPress. Esto apunta a su sitio de Gatsby a la dirección de su blog de WordPress, lo que le permite extraer los datos más recientes cuando ejecuta el servidor de desarrollo. Una vez conectado, Gatsby creará un sitio web estático basado en su plantilla actual de WordPress.

Para conectar los dos, deberá instalar el complemento Gatsby para WordPress. El siguiente comando se encargará de eso:

 npm install gatsby-source-wordpress

Después de instalar el complemento, puede comenzar a configurar Gatsby.

Paso 5: Configurar Gatsby

Para configurar Gatsby, debe trabajar con el archivo gatsby-config.js . En ese archivo, agregue el siguiente 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 } }, ] }

Actualice este código para que apunte a su sitio web de WordPress. Si su sitio web está alojado localmente, después de baseUrl puede usar localhost:8888/wordpress en lugar de la URL de su sitio web. Después de guardar el archivo, deberá crear sus plantillas de página.

Paso 6: Crear plantillas de página

La creación de plantillas de página le permite a Gatsby generar una publicación para cada página en su sitio web de WordPress. El complemento de origen extraerá los datos que necesita de WordPress para estas páginas, pero tendrá que crear la plantilla de diseño.

En su archivo gatsby-node.js , agregue el siguiente 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, }, }) }) }

Después de llamar a todos los datos de WordPress, Gatsby generará una página para cada publicación. Usando el comando de desarrollo, puede navegar a cada nueva página usando la URL generada.

¿Debería usar Gatsby para WordPress?

Si bien Gatsby puede mejorar la velocidad y la seguridad de su sitio web, no es la opción correcta para todos. Si su sitio web tiene contenido estático que no cambia con frecuencia, Gatsby puede ser beneficioso. Sin embargo, si necesita contenido dinámico en su sitio web, WordPress tradicional podría ser la mejor opción.

Aproveche al máximo su sitio en WP Engine

Gatsby es un generador de sitios web estáticos efectivo que puede integrarse fácilmente con WordPress. Hay pasos que debe seguir para instalar y configurar el sistema. También debe tener algún conocimiento de Gatsby y GraphQL antes de comenzar.

El contenido estático puede mejorar la velocidad y la seguridad de su sitio web, pero también necesita el host adecuado. WP Engine ofrece los mejores recursos para que su sitio web cree una excelente experiencia digital. ¡Esto le deja más tiempo para concentrarse en el desarrollo!