Cómo construir un sitio web usando WordPress y Gatsby (en 4 pasos)

WordPress -Free WordPress se está volviendo cada vez más popular entre los desarrolladores que desean un mayor control sobre su contenido. Sin embargo, en algún momento deberá crear un frente final para su sistema de administración de contenido (CMS). Afortunadamente, hay herramientas que pueden eliminar gran parte de la complejidad de construir un frente personalizado. Con el reciente lanzamiento de la integración de WordPress de Gatsby Source, ahora es más fácil combinar este popular generador de sitios estáticos con sus CMS sin cabeza y construir una hermosa imagen pública para su contenido.
En este artículo, exploraremos qué es Gatsby y qué significa la nueva integración para los desarrolladores de WordPress. Luego le mostraremos cómo crear un sitio web simple usando WordPress y el generador de sitios de Gatsby Static. ¡Vamos a empezar! Una introducción a Gatsby (y por qué es posible que desee usarlo) Gatsby es un generador de sitios estático basado en React que es alimentado por GraphQL. Le brinda la libertad de diseñar y construir su propio frente final, continuando utilizando el back -end familiar de WordPress para crear y administrar el contenido. Esto hace de Gatsby una elección popular entre los desarrolladores de WordPress que desean crear una configuración sin cabeza.
A diferencia de otras tecnologías React, Gatsby se centra firmemente en la velocidad. Este generador de sitio crea su proyecto utilizando archivos HTML estáticos optimizados para el rendimiento. Para proporcionar un aumento de rendimiento adicional, Gatsby solo cobra los archivos necesarios. Esto ayuda a mantener los tiempos de carga como mínimo, al tiempo que le da a Gatsby la flexibilidad para recurrir a recursos adicionales, según sea necesario. Al reducir los tiempos de carga de la página, el marco de Gatsby puede reducir su tasa de rechazo y alentar a las personas a visitar más su sitio. Esto puede aumentar los valores clave, incluido el tiempo dedicado a su sitio y puede ayudar a generar más conversiones. Además, Google ha confirmado que utiliza la velocidad de la página como factor de clasificación al evaluar dónde debe ocurrir el contenido en los resultados en su búsqueda. Al optar por una solución centrada en el rendimiento, como Gatsby, puede experimentar un aumento en los motores de búsqueda (SEO). Por otro lado, Gatsby tiene la reputación de ser difícil de aprender, especialmente en comparación con el competidor de la parte frontal. Sin embargo, el equipo de Gatsby anunció recientemente que la integración de WordPress de Gatsby Source ahora es estable. Usando este complemento en combinación con el complemento WPGatsby y el sitio de inicio de WordPress Gatsby, ahora debe ser más fácil extraer datos de su instalación de WordPress y mostrarlos usando Gatsby.
Cómo construir un sitio web usando WordPress y Gatsby (en 4 pasos) ahora que hemos cubierto lo que es Gatsby y por qué le gustaría usarlo, vea cómo puede comenzar con este popular generador de sitios. En esta sección, construiremos un sitio web inicial simple, conectando a Gatsby a una instalación existente de WordPress. Paso 1: Prepare su entorno de desarrollo, crearemos nuestro sitio inicial utilizando el complemento WPGRASBY, que optimiza su sitio de WordPress para que funcione como fuente de datos de Gatsby. También crearemos una conexión entre WordPress y Gatsby utilizando el complemento WPGRAPHQL: el complemento WPGRASBY crea un evento de revista de administrador que Gatsbsy usará para extraer los cambios de contenido después de la construcción inicial. Si decide continuar trabajando en este proyecto, WPGRASBY ofrece todo lo que necesita para activar automáticamente estas versiones, incluida la vista previa de Gatsby. Después de instalar y activar WPGATSBY y WPGRAPHQL, deberá asegurarse de tener Node Package Manager (NPM), Runtime Node.js y Gatsby instalados en su computadora. La forma más fácil de descargar todos estos componentes es usar HomeBrew Package Manager. Este programa está disponible para MacOS y Linux:
Para instalar HomeBrew, abra la aplicación de línea de pedido en su computadora. Luego ejecute el siguiente comando:/bin/bash -c “$ (curl -fssl https://raw.githubusercontten.com/homrew/install/head/install.sh)” Luego puede instalar el cebo casero después de las instrucciones proporcionadas. Una vez que se inicia y se ejecuta, puede instalar Node.js y NPM usando un solo comando: Brew Instalar Node y luego, es hora de instalar la herramienta Gatsby CLI. Utilizaremos este paquete NPM para ejecutar pedidos para sitios basados ​​en Gatsby. En la aplicación de línea de pedido, ingrese lo siguiente: Brew Instale Gatsby-Cli Tenga en cuenta que, dependiendo de cómo esté configurada la computadora, es posible que deba editar sus archivos en este momento. Si necesita hacer algunos cambios, la aplicación de su línea de pedido debe mostrar toda la información que necesita.

Paso 2: Descargue el proyecto de inicio de Gatsby Framework para minimizar la cantidad requerida de configuración, utilizaremos el proyecto Gatsby Start. Este proyecto se entrega con los archivos de configuración básicos de Gatsby WordPress. Para instalar el proyecto Gatsby Start, necesitará control de versiones GIT. Si aún no lo tiene, puede descargar la última versión del sitio web oficial:

Después de instalar Git, cambie el director (CD), de modo que la línea de comando indique la ubicación en la que desea crear su sitio local de Gatsby. Por ejemplo, si desea crear su sitio en su escritorio, su pedido podría verse así: CD/UserName/Desktop para crear un nuevo proyecto usando WordPress Gatsby, ejecute el siguiente pedido: Gatsby New My-WordPress-Gatsby Site HTTPS : //github.com/gatsby/grasby-started-wordpress-blog Este proceso puede tomar unos minutos. Sin embargo, una vez que esté completo, notará que Git ha creado un nuevo proyecto en la ubicación que especificó: ahora puede comenzar a construir su sitio front-end: active el marco de servidor de desarrollo de Gatsby, la línea de comandos ahora le pedirá que comience a desarrollar Su proyecto proporcionando dos pedidos. Dependiendo del lugar donde creó el proyecto Gatsby, estos comandos deberían verse así: CD My -WordPress-Gatsby-Site Gatsby Development Para iniciar el servidor de desarrollo, ejecute estos dos comandos. Ese es todo su sitio demostrativo ahora se está ejecutando en su entorno de desarrollo. Puede ver su sitio local abriendo una nueva pestaña en su navegador y navegando en http: // localhost: 8000/:
En este momento, el marco de Gatsby muestra solo contenido falso. En el siguiente paso, conectaremos a Gatsby a su instalación de WordPress, para que pueda mostrar sus propias publicaciones y páginas. Paso 4: Conecte Gatsby a WordPress Si abre el directorio local de Gatsby, encontrará todos los archivos para el sitio de inicio de Gatsby. Luego puede encontrar el archivo Gatsby-Config.js y abrirlo en cualquier editor de texto compatible:

Para conectar WordPress a Gatsby, deberá indicar Gatsby en la URL de su sitio en el editor de texto, encuentre la siguiente sección: URL: Process.env.wpgraphql_url || ‘https://wpgatsbydemo.wpengine.com/graphql’ Puede reemplazar la URL con el punto final/GraphQL que creó cuando instaló el complemento WPGraphql. Por defecto, WPGraphql agregará este punto final en http://yoursite.com/graphql. Por ejemplo, si su sitio es Ejemplo.com, deberá agregar lo siguiente: URL: Process.env.wpgraphql_url || ‘https://example.com/graphql’ Después de este cambio, guarde el archivo y cierre el editor de texto. En su navegador web, actualice la pestaña http: // localhost: 8000/. Cuando la página se recarga, debe mostrar su sitio de WordPress: si su contenido no aparece, es posible que deba abandonar el proceso de desarrollo de Gatsby, dejando su ventana de línea de pedido. Luego puede abrir una nueva ventana de línea de comandos, puede cambiar el director (CD) para indicar el proyecto local de Gatsby y ejecutar el comando Gatsby Develop de nuevo. El contenido de su sitio debe aparecer en la pestaña LocalHost. Conclusión El marco de Gatsby puede mejorar el rendimiento de su sitio y la clasificación de motores de búsqueda, pero desde un punto de vista histórico no era la herramienta más fácil de aprender. Sin embargo, con el lanzamiento de su nuevo complemento de integración de WordPress, ahora puede crear una parte delantera simple con un problema mínimo. Recapitulemos cómo puede crear un sitio web usando WordPress y Gatsby en cuatro simples pasos:

Prepare su entorno de desarrollo.

Descargue el proyecto de inicio de WordPress Gatsby.

Inicie el servidor de desarrollo de Gatsby. Gatsby en WordPress.

¿Tiene alguna pregunta sobre cómo construir un sitio web usando WordPress y Gatsby?¡Háganos saber en la sección de comentarios!