Tutorial de SSG con Gatsby y WordPress

Contents

Tutorial de SSG con Gatsby y WordPress

En este artículo detallado exploraremos cómo montar un sistema de Static Site Generation (SSG) usando Gatsby como framework de front-end y WordPress como gestor de contenidos en modo headless CMS. Cubriremos desde los conceptos básicos hasta la puesta en producción, pasando por configuración, optimización, buenas prácticas y problemas comunes.

1. ¿Por qué elegir Gatsby WordPress

Combinar Gatsby con WordPress ofrece lo mejor de ambos mundos:

Rendimiento excelente: Gatsby genera páginas estáticas ultra rápidas.
Escalabilidad: WordPress continúa gestionando el contenido Gatsby se centra en la entrega.
SEO avanzado: HTML pre-renderizado, imágenes optimizadas y meta tags.
Seguridad: Al servir siempre contenido estático, la superficie de ataque se reduce.

2. Arquitectura general

La arquitectura típica consta de:

Componente	Función
WordPress (Headless)	Almacena y gestiona posts, páginas y media. Expone datos via REST API o GraphQL.
Gatsby	Consume datos, genera páginas estáticas y optimiza assets (JS/CSS/Imagenes).
CDN/Hosting	Sirve el sitio estático desde Netlify, Vercel, AWS S3, etc.

3. Requisitos previos

Node.js (v14 ).
NPM o Yarn.
Instalación de WordPress (v5.0 ) con acceso de administrador.
Permisos para activar plugins en WordPress.

4. Configurar WordPress como Headless CMS

Instalar plugin WPGraphQL: en tu admin de WordPress busca y activa wp-graphql.
Permitir CORS: si tu Gatsby estará en otro dominio, ajusta cabeceras. Ejemplo en plugin WPGraphQL CORS.
Crear contenido: posts, páginas, categorías, imágenes destacadas.

5. Iniciar proyecto Gatsby

En tu terminal:

npx gatsby new mi-sitio-ssg

Accede al directorio:

cd mi-sitio-ssg

5.1 Instalar plugin de WordPress

Agrega en el proyecto:

npm install gatsby-source-wordpress-experimental

El plugin experimental es la mejor opción para WPGraphQL.

5.2 Configurar gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: gatsby-source-wordpress-experimental,
      options: {
        url: https://tudominio.com/graphql,
        schema: { requestConcurrency: 5 },
        html: { useGatsbyImage: true }
      }
    },
    gatsby-plugin-image,
    gatsby-plugin-sharp,
    gatsby-transformer-sharp
  ]
}

6. Consultar datos con GraphQL

Arranca el servidor de desarrollo:

gatsby develop

Visita http://localhost:8000/___graphql para explorar tus endpoints.

6.1 Ejemplo de consulta

{
  allWpPost {
    nodes {
      title
      excerpt
      slug
      featuredImage {
        node {
          gatsbyImage(width: 600)
        }
      }
    }
  }
}

7. Crear Plantillas y Páginas

En src/templates, crea post-template.js:

import React from react
import { graphql } from gatsby
import { GatsbyImage, getImage } from gatsby-plugin-image

export default function PostTemplate({ data }) {
  const post = data.wpPost
  const image = getImage(post.featuredImage.node)
  return (
    ltarticle style=max-width:800px margin:40px autogt
      lth2gt{post.title}lt/h2gt
      {image ampamp ltGatsbyImage image={image} alt={post.title} /gt}
      ltdiv dangerouslySetInnerHTML={{ __html: post.content }} /gt
    lt/articlegt
  )
}

export const query = graphql
  query(id: String!) {
    wpPost(id: { eq: id }) {
      title
      content
      featuredImage {
        node {
          gatsbyImage(width: 800)
        }
      }
    }
  }

En gatsby-node.js genera páginas dinámicas:

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(
    {
      allWpPost {
        nodes {
          id
          slug
        }
      }
    }
  )
  result.data.allWpPost.nodes.forEach(post =gt {
    createPage({
      path: post.slug,
      component: require.resolve(./src/templates/post-template.js),
      context: { id: post.id },
    })
  })
}

8. Optimización de imágenes

Gatsby Image permite:

Lazy loading
Formatos modernos (WebP, AVIF)
Placeholders (dominant color o blur)

9. SEO y Performance

Usa gatsby-plugin-react-helmet para meta tags.
Configura sitemap con gatsby-plugin-sitemap.
Genera robots.txt vía gatsby-plugin-robots-txt.
Mide rendimiento con Google Lighthouse.

10. Despliegue en producción

Pushea tu proyecto a un repositorio (GitHub/GitLab).
Configura un servicio de CI/CD como Netlify o Vercel.
Define variables de entorno (URL de GraphQL).
Automatiza builds y deploys.

11. Ventajas y desafíos

Ventajas	Desafíos
Carga ultrarrápida	Complejidad inicial de configuración
Separación de contenido y presentación	Gestión de preview en WordPress
Escalabilidad y seguridad	Actualización de datos requiere rebuild completo

12. Conclusiones

Implementar un SSG con Gatsby y WordPress permite crear sitios rápidos, seguros y escalables. Aunque la curva de aprendizaje puede ser alta, el resultado justifica el esfuerzo, especialmente para proyectos donde el rendimiento y el SEO son críticos.

Para profundizar más, consulta las siguientes fuentes:

Acepto donaciones de BAT's mediante el navegador Brave 🙂

Tutorial de SSG con Gatsby y WordPress