¿Cómo funciona un sitio web dinámico típico, como los basados en WordPress? Cuando un visitante introduce la URL en un navegador o visita su sitio web a través de un enlace, se envía una solicitud a su servidor web.
El servidor recoge los datos necesarios a través de consultas de base de datos y genera un archivo HTML para que su navegador lo muestre. Los sitios estáticos, por otro lado, almacenan estas respuestas en archivos planos en el servidor que son entregados instantáneamente a un visitante.
Los generadores de sitios estáticos existen desde hace mucho tiempo, pero recientemente han crecido en popularidad. En esta guía paso a paso, veremos la integración de WordPress con Gatsby, un generador de sitios estáticos.
¿Qué es Gatsby?
WordPress crea sitios web dinámicos, que necesitan estar apilados de PHP, MySQL y Apache o Nginx en el servidor para ejecutarse. Es posible crear una versión estática de WordPress generando una lista de páginas HTML para todo el contenido de su sitio.
Esta versión estática de WordPress se llama WordPress sin cabeza o WordPress sin servidor. Este proceso de conversión se hace una sola vez para que la misma página pueda ser servida a los visitantes varias veces. ¿Cómo convertir su sitio de WordPress a una versión estática? Aquí es donde Gatsby entra en escena.
Gatsby, o GatsbyJS, es un generador de sitios estáticos construido con ReactJS y alimentado por GraphQL. Gatsby permite que cualquiera pueda crear sitios web y aplicaciones atractivas y ricas en funciones. Gatsby obtiene los datos de su sitio de distintas fuentes, incluyendo sitios web existentes, llamadas a la API y archivos planos a través de GraphQL, y crea el sitio estático basándose en los ajustes de configuración especificados por usted.
Gatsby fue desarrollado hace sólo un año, pero un gran número de usuarios están probando Gatsby. Gatsby ha encontrado aceptación en una variedad de escenarios. La página principal del Blog de Ciencia de Datos e Ingeniería de Airbnb es impulsada por Gatsby, aunque las entradas reales del blog están alojadas en Medium.
Braun es una marca de la compañía de bienes de consumo P&G. Su sitio canadiense está alojado en Gatsby, mientras que la función de búsqueda en el sitio es impulsada por React.
Además, Gatsby también ha despertado el interés de los desarrolladores independientes por sus carteras. Portafolios como el de Jacob Castro tienen principalmente contenido estático con enlaces a obras y contacto a través del correo electrónico, haciendo así que un sitio estático se ajuste perfectamente a sus necesidades.
¿Por qué Elegir Gatsby?
Sitios web rápidos: El principal beneficio de construir un sitio estático con Gatsby es la velocidad, que los webmasters han estado tratando de optimizar desde el anuncio de Google de utilizar la velocidad del sitio en la clasificación de la búsqueda web. Los tiempos de carga también afectan a las vistas de página y a las conversiones. Se ha estimado que un retraso de un segundo en el tiempo de carga del sitio puede llevar a una reducción del 7% en las conversiones.
Seguridad: También se obtiene una mayor seguridad con un sitio estático. Como se trata de un montón de archivos estáticos que se sirven, no hay mucho que hackear. Además, siempre puede volver a generar los archivos estáticos si se pierden.
Costos del servidor: El alojamiento de un sitio dinámico requiere que su servidor sea compatible con su nivel tecnológico. Si está trabajando con un sitio estático, puede alojarlo en casi cualquier servidor, lo que reduce el costo asociado con el alojamiento también.
Generar el sitio estático con Gatsby en cada cambio necesita Javascript, lo cual también puede hacerse en una máquina local antes de transferir los archivos estáticos al sitio.
¿Por qué Evitar Gatsby?
Sin contenido dinámico incorporado: Si quiere usar Gatsby, tendrá que replantearse cómo controlar y servir el contenido dinámico, es decir, tendrá que crear un híbrido de estático/dinámico para conseguirlo (más información a continuación).
Por ejemplo, los comentarios deben alojarse externamente a través de un servicio como Disqus.
Los formularios de contacto también tendrían que ser reenviados a través de un socio externo como Google Forms. En resumen, usted perdería el control directo sobre dicho contenido dinámico, ya que sus respuestas no se almacenan en sus servidores.
Las construcciones frecuentes son incómodos: Los sitios estáticos también tienen el problema de las reconversiones frecuentes. Cualquier cambio que haga en su sitio web sólo se reflejará una vez que haya regenerado las páginas y las haya vuelto a cargar en el servidor.
Experiencia técnica: Gatsby está construido sobre ReactJS y GraphQL. Por lo tanto, se necesitan algunos conocimientos de JavaScript y una idea básica de GraphQL para trabajar y portar un sitio web a Gatsby.
Los sitios web estáticos son buenos para aquellos que buscan una solución de bajo costo, con alta seguridad. Algunos casos de uso son los sitios web de la cartera para autónomos y los sitios de demostración de productos.
Si cree que los beneficios superan a los defectos, ¡genial! Ahora intentaremos configurar Gatsby para que se integre con nuestro sitio de WordPress.
La última versión del sitio de Gatsby que construimos en este tutorial está disponible en GitHub para su uso.
Paso 1: Configuración de Gatsby
En esta sección veremos cómo instalar Gatsby y crear un sitio estático básico con Gatsby.
Requisitos Previos
El primer paso para empezar con Gatsby es comprobar sus requisitos previos. Gatsby se sirve a través de npm, el instalador de paquetes de NodeJS. Por lo tanto, necesita NodeJS y npm en su entorno antes de instalar Gatsby. Además, Gatsby requiere que instale Git, el sistema de gestión de código fuente.
Si utiliza Windows, puede instalar NodeJS y Git a través del instalador de la página de descarga. En un Mac, puede descargar sus instaladores o usar homebrew.
brew install nodejs
brew install gitSi está ejecutando el sistema operativo Linux, puede instalar NodeJS a través de un instalador de paquetes como apt.
sudo apt update
sudo apt install nodejs gitInstalar Gatsby
Una vez que haya instalado con éxito NodeJS y Git, ¡estará listo para instalar Gatsby! La forma más fácil es ejecutar el siguiente comando en el terminal (utilice la línea de comandos npm en Windows):
npm install -g gatsby-cliEl instalador primero instala las dependencias y luego Gatsby. Ya está listo para crear su primer sitio Gatsby.
Construya e Implemente su Sitio Gatsby
Ejecute el siguiente comando para crear un sitio Gatsby.
gatsby new gatsby-wordpressGatsby crea un sitio en el directorio /gatsby-wordpress clonando la plantilla de inicio de Gatsby. Puede proporcionar una plantilla de inicio diferente para clonar. Una vez que la clonación se haya completado y las dependencias estén instaladas, puede ejecutar una versión de desarrollo del sitio con el siguiente comando.
cd gatsby-wordpress
gatsby developA continuación, puede visitar la versión de desarrollo del sitio en http://localhost:8000.
El paso final es construir su sitio estático. El siguiente comando crea los archivos estáticos en el directorio público. Para subirlo a un servidor, simplemente puede subir el contenido de este directorio al directorio raíz del servidor. Puede que desee añadir un prefijo de ruta como www.example.com/blog/ como URL raíz para sus construcciones.
gatsby buildPara iniciar un servidor HTML de forma local para mostrar esta forma estática de su sitio web, debe utilizar el comando serve. Tenga en cuenta que sólo funciona después de ejecutar el comando de construcción.
gatsby serveAhora que ha creado con éxito un sitio estático básico desde Gatsby, vamos a intentar integrarlo con WordPress.
Paso 2: ¿Cómo Conectar Gatsby a WordPress?
En esta sección, integrará su sitio de WordPress con Gatsby. Apuntaría a Gatsby a la dirección de su blog de WordPress para permitirle obtener los últimos datos cuando ejecuta el servidor de desarrollo o genera las páginas estáticas.
El proceso de conexión de Gatsby a WordPress consiste en obtener los datos de WordPress, que se activan mediante una compilación. Una vez que Gatsby ha obtenido los datos de WordPress, crea el sitio estático basado en la plantilla actual.
El proceso utiliza el sitio de WordPress que tiene una fuente para las publicaciones en Gatsby. Para facilitar este intercambio, es necesario instalar el plugin de Gatsby para WordPress mediante el siguiente comando:
npm install gatsby-source-wordpressConfigurar Gatsby
A continuación, añada este plugin al archivo de configuración de Gatsby gatsby-config.js.
Luego, agregue el siguiente código al archivo para conectar Gatsby a su fuente de WordPress. En este ejemplo, utilizamos un sitio de WordPress alojado localmente en MAMP. En una nota al margen, puede que desee editar el título y la descripción del sitio en 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'
]
}
}
Obtener Mensajes con GraphQL
Una vez que haya especificado el origen del sitio de WordPress en su archivo de configuración, deberá especificar qué datos deben extraerse del sitio de WordPress. Gatsby utiliza GraphQL, un lenguaje de consulta de código abierto para APIs, para obtener publicaciones de WordPress en masa.
Antes de finalizar las consultas a seleccionar, puede seleccionar interactivamente el contenido que necesita obtener de WordPress. Ejecute el servidor de desarrollo y vaya a la URL: http://localhost:8000/___graphql para abrir el editor GraphQL.
Cuando haya finalizado el contenido de la extracción, puede agregar las consultas de GraphQL al archivo index.js.
Por ahora, saquemos el título y sólo un extracto de cada artículo. Podemos añadir más campos más 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
}
}
}
}
Cuando revise el sitio de desarrollo, notará que todos los posts de WordPress han sido sacados con sus encabezados y extractos mostrados:
Aunque esto no parece bonito, ha sacado con éxito los datos relevantes de WordPress. El siguiente paso es crear una nueva página para cada entrada.
Paso 3: Crear una Plantilla de Página Básica
En esta sección, hará que Gatsby cree una entrada para cada página de su sitio WordPress e incluirá enlaces a estas entradas a través del slug.
Crear una Página para Cada Mensaje
El primer paso después de sacar todos los posts de la fuente de WordPress es instruir a Gatsby para que cree una página para cada post. Esta es una acción que se completa mediante la acción createPage.
Añada el siguiente código a gatsby-node.js. Note que estamos obteniendo adicionalmente el contenido, autor, fecha y slug 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,
},
})
})
})Después de extraer los datos de GraphQL, el código crea una página para cada mensaje. Dentro del mensaje, puede especificar la estructura de la URL de la página basada en el slug usando la ruta.
Alternativamente, puede obtener el ID del mensaje y especificarlo en la URL. La variable de componente apunta al modelo a través del cual se debe renderizar el puesto. Por último, pasamos el slug como el contexto de la plantilla. Esto es necesario para que el modelo consulte el puesto correcto de la lista de puestos obtenidos.
Lo ideal sería pasar una variable que identifique de manera única un mensaje como el contexto.
Reinicie el servidor de desarrollo después de haber hecho cambios en el archivo gatsby-node.js para que los cambios surtan efecto.
Crear un Modelo para Visualizar una Contabilización
Crear una plantilla de directorio en el directorio src. Cree un nuevo archivo blog-post.js dentro del directorio de plantillas e introduzca el siguiente 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
}
}
}
}
}
La consulta de GraphQL obtiene la fecha y los nombres de los autores, que se muestran hacia el final del mensaje. Puede obtener campos adicionales usando el editor GraphQL y mostrarlos en la página de publicación.
Enlace a las Páginas del Índice
Ha creado una nueva página para cada mensaje. Sin embargo, necesita añadir un enlace a estos mensajes desde la página del Índice. Diríjase a index.js y modifique el código para añadir un enlace a cada mensaje:
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
}
}
}
}Aquí está el estado de la página de índice:
Al hacer clic en un enlace a una entrada, aquí está la página de la entrada del blog, representada por blog-post.js:
Paso 4: Tareas Avanzadas de Migración
Aunque haya importado con éxito todos los posts de WordPress, vamos a realizar algunas tareas avanzadas para asegurarnos de que no se enfrente a problemas en el futuro. En esta sección, puede trabajar eficazmente con las imágenes y añadir a sus datos la última fecha y hora modificadas.
Conversiones de la Ruta de la Imagen
Una de nuestras publicaciones originales, «¡Puesto con imagen!» tenía una imagen. Si se mueve a la página correspondiente en Gatsby, notará que la imagen se muestra, pero la fuente de la imagen es la misma que la de WordPress. En este ejemplo, apunta a la imagen de WordPress alojada localmente.
Si está alojando las imágenes de forma externa, esto no supondrá un problema ya que seguirá apuntando a su servidor de imágenes. Sin embargo, si almacena las imágenes dentro de su instalación de WordPress, ¡tendrá que obtener las imágenes con los posts también!
El plugin de imágenes en línea se encarga de esto. Primero, instale el
gatsby-image y luego el plugin gatsby-wordpress-inline-images.
npm install gatsby-image
npm install gatsby-wordpress-inline-imagesA continuación, añada las siguientes líneas a su archivo gastby-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`
}
}
]
}
}
],
}Reiniciando el servidor de desarrollo después de hacer estos cambios se descargarán las imágenes del sitio de WordPress y se almacenarán localmente. Puede verificar esto desde la ruta de la misma imagen.
Mostrar la Última Fecha de Modificación
Si gestiona un blog en el que actualiza regularmente sus entradas, es posible que desee informar a los lectores cuando una entrada se actualizó por última vez. Aunque usted sacó la «fecha creada» en la consulta de GraphQL anteriormente, esta sección le dice cómo sacar la «última modificación» de la marca de tiempo también.
Para añadir la última marca de tiempo modificada de WordPress a su post de Gatsby, necesita añadir el campo modificado a la lista de elementos de su consulta GraphQL. Es un sello de tiempo como date, por lo que también necesita añadir el parámetro formatString. Aquí está el archivo blog-post.js modificado:
...
<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")
}
}
}
}
Una vez que haya añadido esto, podrá ver la última marca de tiempo modificada en la página de entrada del blog en Gatsby:
Cómo Desplegar Tu Sitio Web Gatsby en Kinsta
Además del Alojamiento WordPress, Kinsta ofrece Alojamiento de Aplicaciones, Alojamiento de Bases de Datos y Alojamiento de Sitios Estáticos. ¡Puedes alojar hasta 100 sitios estáticos gratis!
Para desplegar tu sitio con el Alojamiento de Sitios Estáticos, primero envía tu código a un proveedor Git preferido (Bitbucket, GitHub o GitLab) y luego sigue estos pasos para desplegarlo:
-
- Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
- Autoriza a Kinsta con tu proveedor de Git.
- Haz clic en Sitios Estáticos en la barra lateral izquierda, y luego en Añadir sitio.
- Selecciona el repositorio y la rama desde la que deseas desplegar.
- Asigna un nombre único a tu sitio.
- Añade la configuración de construcción en el siguiente formato:
- Comando de construcción:
npm run build - Versión de Node:
18.16.0 - Directorio de publicación:
public
- Comando de construcción:
- Por último, haz clic en Crear sitio.
Resumen
Tomar la decisión de convertir su sitio de WordPress en un sitio estático aprovechando las ventajas de Gatsby puede ser una tarea difícil. Para ello, debe ejecutar los siguientes pasos:
- Instalar Gatsby para construir un sitio de inicio
- Conectar Gatsby a la fuente de WordPress a través de GraphQL
- Crear plantillas para entradas de blog
- Importe todas sus imágenes desde WordPress
- Mostrar la última marca de tiempo modificada de WordPress
Ahora, es su turno: ¿Ha jugado con Gatsby? ¿Cuál es su experiencia con él? Cuéntenos en los comentarios!
Shaumik es un analista de datos de día, y un entusiasta de los cómics de noche (¿o quizás es Batman?) Shaumik lleva más de cinco años escribiendo tutoriales y creando screencasts. Cuando no está trabajando, se dedica a automatizar tareas cotidianas mediante scripts meticulosamente escritos.
Deja una respuesta