🧰 Gatsby.js · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Gatsby.js

Generación de Sitios Estáticos ⭐ 54k stars
Framework de sitios estáticos con React: SSG, GraphQL y ecosistema de plugins.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm init gatsby

// src/pages/index.js
export default () => <h1>Hola Gatsby</h1>;

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Página con GraphQL

Consulta datos en build-time con useStaticQuery.

// src/pages/index.js
import { useStaticQuery, graphql } from 'gatsby';

export default function Home() {
  const { site } = useStaticQuery(graphql`{ site { siteMetadata { title } } }`);
  return <h1>{site.siteMetadata.title}</h1>;
}
🔁 Cómo funciona: GraphQL se resuelve en build y Gatsby genera HTML estático con los datos.

2. Blog con MDX

Renderiza contenido de archivos Markdown.

// gatsby-config.js (extracto)
module.exports = {
  plugins: [
    { resolve: 'gatsby-source-filesystem', options: { path: './content' } },
    'gatsby-transformer-remark',
  ],
};
// Luego con graphql se traen markdownRemark y se renderiza con dangerouslySetInnerHTML
🔁 Cómo funciona: Los plugins `source` + `transformer` convierten .md en nodos consultables.

5 · Referencia

CategoríaGeneración de Sitios Estáticos
Stars (GitHub)⭐ 54k
Sitio oficialhttps://www.gatsbyjs.com/
GitHubhttps://github.com/gatsbyjs/gatsby
Instalaciónnpm init gatsby
RelacionadasNext.js · Nuxt.js · Gridsome
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.