Una Guía Completa Para Crear Sitios Estáticos Con Gatsby

Los sitios web estáticos han resurgido en los últimos años gracias a su velocidad, seguridad y sencillez. Una de las principales herramientas para crear sitios estáticos es Gatsby, un Generador de Sitios Estáticos (SSG) rapidísimo.

Tanto si eres un desarrollador web que quiere crear un blog personal, un portafolio o un sitio web empresarial, Gatsby puede ayudarte a conseguir tus objetivos. Esta completa guía te guiará a través del proceso de creación de sitios estáticos con Gatsby. Cubre todos los temas, desde los más básicos hasta los más avanzados.

Entender los Sitios Estáticos

Los sitios estáticos son páginas web que contienen archivos HTML, CSS y JavaScript pre-renderizados. A diferencia de los sitios web dinámicos, no dependen del procesamiento del lado del servidor para cada solicitud. En su lugar, todo el contenido se genera con antelación y se sirve directamente al navegador del usuario. Este enfoque ofrece varias ventajas:

1. Velocidad: Los sitios estáticos se cargan rápidamente, ya que no hay procesamiento del lado del servidor.
2. Seguridad: Al no ejecutarse código en el servidor, los sitios estáticos son menos vulnerables a las amenazas de seguridad.
3. Escalabilidad: Es fácil almacenar en caché y distribuir sitios estáticos a través de Redes de Distribución de Contenidos (CDN).
4. Sencillez: Son más fáciles de desarrollar, desplegar y mantener.

Ahora que sabes qué son los sitios estáticos y sus ventajas, vamos a sumergirnos en Gatsby.

¿Qué es Gatsby?

Gatsby es un marco de trabajo de código abierto basado en la biblioteca React JavaScript que simplifica el proceso de creación de sitios web estáticos. Combina la potencia de los componentes de React con GraphQL para la gestión de datos, lo que lo convierte en una excelente opción para desarrolladores de todos los niveles. Aquí tienes por qué destaca Gatsby:

1. Increíblemente rápido: Gatsby optimiza la velocidad de tu sitio mediante técnicas como la división del código y la carga diferida, lo que da como resultado cargas de página casi instantáneas.
2. Fuente de datos flexible: Puede obtener datos de varios lugares, como archivos Markdown, API y bases de datos.
3. Rico ecosistema de plugins: El amplio ecosistema de plugins de Gatsby te permite ampliar su funcionalidad sin esfuerzo.
4. SEO y rendimiento: Gatsby genera automáticamente HTML optimizado para mejorar el SEO y el rendimiento.

Primeros pasos con Gatsby

Para seguir esta guía, debes tener:

• Conocimientos básicos de HTML, CSS y JavaScript
• Conocimientos básicos de React
• Node.js y npm (Node Package Manager) o yarn instalados en tu ordenador

Para empezar con Gatsby y crear un proyecto, puedes utilizar uno de los muchos ejemplos de la Biblioteca de inicio de Gatsby o crear un proyecto desde cero.

Para esta guía, vamos a utilizar el starter oficial hello world para GatsbyJS, ya que nos proporciona un proyecto sencillo sin plugins ni archivos adicionales.

1. En primer lugar, instala la CLI de Gatsby en tu ordenador ejecutando el siguiente comando:

npm install -g gatsby-cli

Ejecuta gatsby --version para verificar si la instalación se ha realizado correctamente.

2. A continuación, navega hasta la carpeta en la que desees crear tu proyecto y ejecuta el siguiente comando:

npx gatsby new <project-name> https://github.com/gatsbyjs/gatsby-starter-hello-world

Cambia <project-name> por el nombre que prefieras para tu proyecto.

3. Una vez hecho esto, navega hasta la carpeta del proyecto e inicia el servidor de desarrollo:

cd <project-name>
gatsby develop

El servidor de desarrollo local se iniciará en http://localhost:8000, desde donde podrás acceder a tu sitio Gatsby.

Comprende la estructura de archivos de Gatsby

Cuando abras tu proyecto en un editor de código, verás la siguiente estructura:

/
|-- /public
|-- /src
    |-- /pages
        |-- index.js
|-- /static
|-- gatsby-config.js

• /public: Este directorio contiene el resultado de tu proceso de compilación de Gatsby. Es donde residen el HTML, CSS, JavaScript y otros recursos generados.
• /src: Este es el corazón de tu proyecto Gatsby, donde pasarás la mayor parte del tiempo. Contiene varios subdirectorios y archivos:
  • /pages: Aquí es donde se almacenan todas las páginas de tu proyecto. Cada archivo JavaScript aquí corresponde a una ruta de tu sitio web.

• /static: Este directorio se utiliza para los archivos estáticos que quieras incluir en tu sitio, como imágenes, fuentes o archivos descargables. Estos archivos se sirven tal cual y no serán procesados por Gatsby.
• gatsby-config.js: Este archivo de configuración es donde defines varios ajustes para tu sitio Gatsby. Aquí puedes especificar plugins, metadatos del sitio y otras configuraciones.

Crear páginas y componentes

En Gatsby, crear páginas web es un proceso sencillo. Cualquier archivo JavaScript que crees dentro de la carpeta /src/pages se convierte automáticamente en una página con su correspondiente ruta, gracias a la generación automática de páginas de Gatsby.

Puedes crear tantas páginas como necesites para tu sitio web añadiendo más archivos JavaScript a la carpeta /src/pages. Por ejemplo, puedes crear un archivo about.js para una página «Acerca de».

Aunque puedes crear archivos JavaScript individuales para cada página directamente en la carpeta /src/pages, también es posible organizar más tus páginas. Puedes crear subcarpetas para agrupar páginas relacionadas. Por ejemplo, puedes crear una carpeta blog para organizar todas tus páginas relacionadas con el blog.

Para este proyecto, este es el aspecto que tendrá la estructura de páginas:

|-- /src
    |-- /pages
        |-- about.js
        |-- index.js
        |-- /blog
            |-- index.js

Utilizar JSX para Pages

Como Gatsby está construido sobre React, sus páginas y componentes están escritos en JSX (JavaScript XML). JSX es una extensión sintáctica de JavaScript que te permite definir la estructura y el diseño de tus interfaces de usuario de una forma muy legible y expresiva.

Por ejemplo, puedes crear el contenido de tu página de inicio (index.js) así

import React from 'react';

export default function Home() {
  return (
    <>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
      </div>
    </>
  );
}

Enlazar páginas en Gatsby

Para crear un enlace a otra página, puedes utilizar el componente Link de la siguiente manera:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
    return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <Link> to="/about">About Us</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </>
    );
}

En el ejemplo anterior, hemos importado el componente Link desde gatsby y lo hemos utilizado para crear enlaces a la página «About Us» y a un blog. La página «About Us», por ejemplo, tiene la ruta /about. Cuando los usuarios hagan clic en el enlace «About Us», accederán a la página /about.

Para crear enlaces a sitios web externos, puedes utilizar etiquetas de anclaje normales (<a>) con el atributo href:

import React from 'react';

export default function Home() {
  return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <div>
                    <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                    <p>Fast, Secure, Reliable Hosting Solution.</p>
                    <a href="https://kinsta.com/docs/static-site-hosting/" target="_blank" rel="noreferrer">
                        <div>Read more</div>
                    </a>
                </div>
            </div>
        </>
    );
}

En este caso, el enlace abre el sitio web externo en una nueva pestaña del navegador gracias a los atributos target="_blank" y rel="noreferrer".

Crear componentes en Gatsby

La arquitectura basada en componentes de Gatsby te permite crear bloques de construcción reutilizables para tus páginas web. En lugar de duplicar código en varias páginas, puedes encapsular elementos comunes en componentes, haciendo que tu código base sea más organizado, mantenible y eficiente.

Supongamos que el código de tu página de inicio incluye la sección de navegación, el contenido principal y un pie de página:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
  return (
    <>
      <div className="nav-links">
        <Link> to="/">Home</Link>
        <Link> to="/about">About</Link>
        <Link> to="/blog">Blog</Link>
      </div>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <div className="footer">
        <p>
          Hosted with ❤️ by Kinsta's{' '}
          <a> href="https://kinsta.com/static-site-hosting">
            Static Site Hosting
          </a>
          .
        </p>
      </div>
    </>
  );
}

Imagina tener que duplicar el código de la barra de navegación y el pie de página para cada página de tu sitio. Aquí es donde entra en juego el poder de los componentes. Puedes crear componentes reutilizables para la barra de navegación, el pie de página y cualquier fragmento de código que se repita en varias páginas y componentes.

Para trabajar con componentes en Gatsby, crea una carpeta components en la carpeta src para almacenar todos los componentes. A continuación, crea tus componentes, por ejemplo Navbar.js y Footer.js. En el archivo Navbar. js, separa el código de esta forma:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <div className="nav-links">
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

Y también tu Footer.js:

import React from 'react';
const Footer = () => {
    return (
        <div className="footer">
            <p>
                Hosted with ❤️ by Kinsta's{' '}
                <a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
                .
            </p>
        </div>
    );
};

export default Footer;

A continuación, importa los archivos de tus componentes en tus páginas o componentes y utilízalos de esta forma:

import React from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Home() {
  return (
    <>
      <Navbar />
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <Footer />
    </>
  );
}

Crear un componente de diseño

Una práctica habitual en el desarrollo web es crear un componente de diseño que encapsule la estructura general de tu sitio. El componente de diseño suele incluir elementos que aparecen en todas las páginas, como encabezados, pies de página, menús de navegación y barras laterales.

Crea un nuevo archivo llamado Layout.js en tu carpeta /src/components. A continuación, define la estructura del diseño. En esta guía, la estructura de diseño sólo incluirá la barra de navegación y el pie de página:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';

const Layout = ({ children }) => {
    return (
        <div className="layout">
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

En este componente de diseño, utilizamos los componentes para envolver el contenido de la página (proporcionados como children). Para utilizar el componente de diseño en tus páginas, impórtalo y envuelve el contenido de tu página con él. Por ejemplo, en tu página index.js:

import React from 'react';
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
    </Layout>
  );
}

Al utilizar un componente de diseño, garantizas una estructura y apariencia coherentes en todas tus páginas, a la vez que mantienes tu código organizado y fácil de mantener. Es una forma eficaz de gestionar los elementos comunes de tu sitio.

Estilizar páginas y componentes en Gatsby

Estilizar tu sitio Gatsby es flexible y te permite utilizar varios enfoques, incluyendo CSS normal, CSS-en-JS, o preprocesadores CSS como Sass. Aprendamos a crear estilos normales y de módulos para las páginas.

Estilo CSS

En Gatsby, puedes crear fácilmente un archivo CSS y vincularlo a cualquier componente o página, y funcionará perfectamente. Por ejemplo, puedes crear una carpeta de styles en la carpeta src y luego crear un archivo global.css con tu código CSS.

Por ejemplo, aquí tienes algunos estilos globales básicos para los componentes creados anteriormente:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ddd;
    font-family: 'Poppins',
        sans-serif;
    width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    height: 200px;
    align-items: center;
}

nav .logo-img {
    width: 100px;
}

nav .nav-links a {
    padding: 0 20px;
    font-size: 18px;
}

@media (max-width:700px) {
    body {
        width: 100%;
        padding: 0 20px;
    }

    nav .nav-links a {
        padding: 0 18px;
    }
}

.footer {
    width: 100%;
    text-align: center;
    margin: 100px 0 20px;
}

En el código anterior, estás importando la fuente Poppins de Google Fonts y luego definiendo estilos básicos para aplicar a todos tus componentes.

A continuación, importa el archivo CSS en los componentes que desees estilizar, pero para este proyecto, puedes añadirlo a tu componente Diseño para que se aplique globalmente:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import '../styles/global.css';

const Layout = ({ children }) => {
    return (
        <div>
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

Módulo de Estilos CSS

Los Módulos CSS te permiten delimitar tus estilos a componentes o páginas específicos. Esto evita conflictos de estilos y facilita el mantenimiento de tu código. En la carpeta de estilos, crea tus módulos CSS utilizando el formato <pageName>.module.css y añade el estilo específico al archivo.

Por ejemplo, crea home.module.css para la página de inicio y añade el siguiente código:

.home_hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

}

.home_hero h1 {
    font-size: 60px;
    width: 70%;
}

.home_hero p {
    color: #6E7076;
    font-size: 20px;
}

.btn {
    background-color: #5333ed;
    padding: 20px 30px;
    margin-top: 40px;
    border-radius: 5px;
    color: #fff;
}

@media (max-width:700px) {
    .home_hero h1 {
        font-size: 40px;
    }

    .home_hero p {
        font-size: 16px;
    }
}

Para utilizar los estilos CSS del módulo en tu página o componente Gatsby, importa los estilos de tu módulo CSS como un objeto en la parte superior de tu archivo de página o componente y utilízalo de esta forma:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/home.module.css';

export default function Home() {
  return (
    <Layout>
      <div className={styles.home_hero}>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div className={styles.btn}>Read more</div>
        </a>
      </div>
    </Layout>
  );
}

Uso de Archivos Estáticos en Gatsby

En Gatsby, los archivos estáticos se refieren a activos como imágenes, fuentes, archivos CSS y otros recursos que se sirven directamente al navegador del cliente sin ningún procesamiento del lado del servidor. Estos archivos se añaden al directorio /static en la raíz de tu proyecto.

Por ejemplo, si añades una imagen kinsta-logo.png al directorio /static, puedes mostrarla en tu componente de la siguiente manera:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <Link> to="/">
                <img src="/kinsta-logo.png" alt="Kinsta Logo" className="logo-img" />
            </Link>
            <div className="nav-links">
                <Link> to="/">Home</Link>
                <Link> to="/about">About</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

Gatsby resuelve automáticamente estas rutas relativas a la URL correcta cuando se construye tu sitio. Más adelante en esta guía, aprenderás a optimizar las imágenes en Gatsby.

Plugins e Integraciones

Gatsby tiene un rico ecosistema de plugins que pueden ampliar su funcionalidad. Puedes encontrar plugins para SEO, analítica, optimización de imágenes, transformación markdown y mucho más. Instalar y configurar plugins es sencillo, y pueden mejorar enormemente las capacidades de tu sitio.

En esta guía, utilizamos cuatro plugins:

1. gatsby-transformer-remark: Este plugin te permite transformar archivos Markdown en contenido HTML, facilitando la creación y gestión de entradas de blog, documentación o cualquier contenido basado en texto.
2. gatsby-transformer-sharp y gatsby-plugin-sharp: Estos plugins trabajan juntos para optimizar y manipular imágenes en tu proyecto Gatsby.
3. gatsby-source-filesystem: Este plugin te permite obtener archivos del directorio de tu proyecto y hacer que estén disponibles para su consulta con GraphQL.

Para utilizar estos plugins en tu proyecto Gatsby, ejecuta el siguiente comando en el directorio raíz de tu proyecto para instalarlos:

npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

A continuación, configúralos en tu archivo gatsby-config.js. Aquí tienes un ejemplo de cómo configurar los plugins:

module.exports = {
    plugins: [
        // ...other plugins
        // Transform Markdown files into HTML
        'gatsby-transformer-remark',
        // Optimize and manipulate images
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        // Source files from your project directory
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `posts`,
                path: `${__dirname}/src/posts/`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`,
            },
        },
    ],
};

Se crean dos configuraciones gatsby-source-filesystem, que apuntan a dos carpetas: posts e images. Posts almacenará algunos archivos markdown (entradas del blog) que se transformarían con gatsby-transformer-remark, e images almacenará imágenes para el blog y otras imágenes que desees optimizar.

Recuerda siempre reiniciar tu servidor de desarrollo local cuando hagas cambios en el archivo gatsby-config.js.

Crear Entradas de Blog

Ahora que hemos configurado nuestros plugins, crea una carpeta posts en el directorio src y, a continuación, crea dos archivos Markdown con el siguiente contenido:

post-1.md:

---
title: "Introduction to Gatsby"
date: "2023-10-01"
slug: "introduction-to-gatsby"
description: "Learn the basics of Gatsby and its features."
featureImg: ../images/featured/image-1.jpeg
---

Welcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.

Y post-2 .md:

---
title: "Optimizing Images in Gatsby"
date: "2023-10-05"
slug: "optimizing-images-in-gatsby"
description: "Explore how to optimize images in your Gatsby project."
featureImg: ../images/featured/image-2.jpeg
---

Images play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.

Estos archivos Markdown contienen frontmatter con metadatos sobre las entradas del blog, incluidos títulos, fechas, babosas, descripciones y rutas de imágenes.

Consultas en Gatsby con GraphQL

Gatsby utiliza GraphQL para consultar y recuperar datos de tu sitio web. GraphQL es un potente lenguaje de consulta que te permite solicitar exactamente los datos que necesitas, por lo que es eficaz y flexible. Aprendamos a consultar datos en Gatsby utilizando GraphQL.

Cuando ejecutes gatsby develop en tu terminal, verás que, además del enlace gatsby-source-filesystem, que abre tu proyecto en la web, también aparece la URL http://localhost:8000/___graphql. Esta URL proporciona acceso al editor GraphiQL para tu proyecto Gatsby.

Cuando abras el editor, verás esta interfaz:

Puedes consultar toda la información sobre tu sitio desde este editor. Pero ya que has creado archivos Markdown y realizado todas las configuraciones en el archivo gatsby-config.js. Vamos a consultar los archivos Markdown y su contenido ejecutando la siguiente consulta en el editor:

query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}

Esta consulta obtiene datos de todos los archivos Markdown utilizando allMarkdownRemark. Recupera title, slug, y description de la portada de cada archivo y también su id.

Después de escribir tu consulta, haz clic en el botón «Reproducir» (un icono triangular orientado hacia la derecha) para ejecutarla. Los resultados se mostrarán en la parte derecha del editor.

A continuación, puedes utilizar GraphQL para consultar los datos Markdown en tus componentes o páginas. Para consultar estos datos en la página blog/index.js, primero importa graphql de gatsby. A continuación, al final del código JSX, añade lo siguiente:

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

En el código anterior, utilizamos la etiqueta graphql para crear una consulta GraphQL llamada query. Este es el aspecto que debe tener tu archivo blog/index.js:

import { graphql, Link } from 'gatsby';
import React from 'react';
import Layout from '../../components/Layout';
import * as styles from '../../styles/blog.module.css';

const blog = ({ data }) => {
    const posts = data.allMarkdownRemark.nodes;
    return (
        <Layout>
            <div className={styles.blog_cont}>
                <h2>Blog</h2>
                <div className={styles.blog_grid}>
                    {posts.map((post) => (
                        <Link
                            to={`/blog/${post.frontmatter.slug}`}
                            className={styles.blog_card}
                            key={post.id}
                        >
                            <h3>{post.frontmatter.title}</h3>
                            <p>{post.frontmatter.description}</p>
                        </Link>
                    ))}
                </div>
            </div>
        </Layout>
    );
};
export default blog;

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

En el código anterior, accedes al resultado query a través de la propiedad data de tu componente. A continuación, recorre en bucle los datos de posts utilizando el método map() Y, a continuación, muestra los títulos en una lista.

Para evitar errores, crea un archivo blog.module.css en la carpeta styles y añade el siguiente código:

.blog_cont h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.blog_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width:700px) {
    .blog_grid {
        grid-template-columns: 1fr;
    }
}

.blog_card {
    background-color: #bfbfbf;
    padding: 20px;
    border-radius: 5px;
    color: #000;
    transition: all .5s ease-in-out;
}

.blog_card:hover {
    background-color: #5333ed;
    color: #fff;
}

.blog_card h3 {
    margin-bottom: 15px;
}

.blog_card p {
    margin-bottom: 15px;
}

Comprender las Plantillas y Generar Páginas Dinámicas en Gatsby con GraphQL

En Gatsby, las plantillas y las páginas dinámicas son conceptos esenciales que te permiten crear sitios web flexibles y basados en datos. Las plantillas te permiten definir la estructura y el diseño de las páginas, mientras que GraphQL te ayuda a obtener datos para rellenar estas plantillas dinámicamente.

Crear una plantilla de entrada de blog

Supongamos que quieres crear un blog en el que cada entrada tenga una estructura coherente, que incluya un título y un contenido. Puedes crear una plantilla BlogDetails para definir este diseño. En la carpeta src, crea una carpeta templates y, a continuación, crea un archivo blog-details.js:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = () => {

    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        className={styles.blog_featured}
                    />
                    <h3>Title</h3>
                    <div>
                        className={styles.html}
                        dangerouslySetInnerHTML={}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

En este ejemplo, la plantilla BlogDetails define la estructura de las entradas individuales del blog. A continuación, vamos a utilizar GraphQL para obtener datos de entradas concretas del blog y pasárselos como props a esta plantilla.

Generar páginas dinámicas

Para generar páginas dinámicas, crea un archivo gatsby-node.js en el directorio raíz de tu proyecto. Este archivo te permite definir cómo se crean las páginas.

En tu archivo gatsby-node.js, utiliza GraphQL para consultar los datos que quieras utilizar para las páginas dinámicas. Por ejemplo, si tienes entradas de blog en Markdown, puedes consultar sus slugs:

const path = require(`path`);

exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
    query Articles {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  data.allMarkdownRemark.nodes.forEach((node) => {
    actions.createPage({
      path: '/blog/' + node.frontmatter.slug,
      component: path.resolve('./src/templates/blog-details.js'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

En este ejemplo, consultamos los slugs de todas las entradas Markdown y creamos páginas dinámicas para cada entrada utilizando la plantilla BlogDetails. El objeto context se utiliza para pasar datos a la plantilla. Estos datos (slug) son los que utiliza la plantilla para obtener otros datos que coincidan con el slug.

Entendamos primero cómo funciona la optimización de imágenes en Gatsby antes de añadir una consulta GraphQL a la página de la plantilla.

Optimización de imágenes en Gatsby

Anteriormente, instalaste y configuraste gatsby-transformer-sharp y gatsby-plugin-sharp junto con gatsby-source-filesystem para obtener imágenes.

Con esos plugins, puedes consultar y optimizar imágenes con GraphQL. Aquí tienes un ejemplo de cómo consultar y mostrar una imagen optimizada utilizando gatsby-plugin-sharp:

export const query = graphql`
  query {
    file(relativePath: { eq: "example.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

En el código anterior, estás consultando una imagen llamada example.jpg desde la fuente de images y utilizando la propiedad fluid de la imagen consultada para mostrarla con una representación responsiva y optimizada.

A continuación, puedes importar Img desde gatsby-image para trabajar con imágenes optimizadas.

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';

const ImageExample = ({ data }) => {
  const { fluid } = data.file.childImageSharp;

  return (
    <div>
      <Img fluid={fluid} alt="Example Image" />
    </div>
  );
};

export default ImageExample;

Consulta de páginas dinámicas

Gatsby utilizará la plantilla especificada para crear páginas individuales para cada entrada del blog. Añadamos ahora una consulta GraphQL a la página de la plantilla para obtener los datos basados en el slug:

import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = ({ data }) => {
    const { html } = data.markdownRemark;
    const { title, featureImg } = data.markdownRemark.frontmatter;
    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        fluid={featureImg.childImageSharp.fluid}
                        className={styles.blog_featured}
                    />
                    <h3>{title}</h3>
                    <div
                        className={styles.html}
                        dangerouslySetInnerHTML={{ __html: html }}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

export const query = graphql`
    query ProjectDetails($slug: String) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
                featureImg {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
`;

En el código anterior, verás que buscamos la imagen optimizada y la entrada del blog que coincide con el slug.

Puedes consultar el código fuente completo de este proyecto Gatsby en GitHub.

Desplegar Sitios Estáticos Gatsby con Kinsta

Kinsta te permite alojar hasta 100 sitios web estáticos de forma gratuita. Para ello, envía tu código a tu proveedor Git preferido (Bitbucket, GitHub o GitLab) y luego despliégalo en Kinsta.

Una vez que tu repositorio esté listo, sigue estos pasos para desplegar tu sitio estático en Kinsta:

1. Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
2. Autoriza a Kinsta con tu proveedor de Git.
3. Haz clic en Sitios estáticos en la barra lateral izquierda, y luego en Añadir sitio.
4. Selecciona el repositorio y la rama desde la que deseas desplegar.
5. Asigna un nombre único a tu sitio.
6. MyKinsta detectará automáticamente los ajustes de compilación para este proyecto Gatsby. Verás los siguientes ajustes rellenados previamente:
   • Comando de compilación: npm run build
   • Versión de nodo: 18.16.0
   • Directorio de publicación: public

7. Por último, haz clic en Crear sitio.

Y ya está En pocos segundos tendrás un sitio desplegado. Se proporciona un enlace para acceder a la versión desplegada de tu sitio. Si lo deseas, puedes añadir más adelante tu dominio personalizado y tu certificado SSL.

Como alternativa al Alojamiento de Sitios Estáticos, puedes optar por desplegar tu sitio estático con el Alojamiento de Aplicaciones de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama más amplia de ventajas y acceso a funciones más robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile, y análisis completos que contienen datos históricos y en tiempo real.

Resumen

Esta guía repasa los fundamentos de la obtención de datos, el enrutamiento, el estilo, la optimización de imágenes, los plugins, el despliegue y mucho más.

La flexibilidad, velocidad y el rico ecosistema de Gatsby lo convierten en una potente opción para crear sitios web estáticos. Tanto si estás creando un blog personal, un portafolio o un sitio web empresarial, Gatsby te lo ofrece.

Ahora es el momento de poner en práctica tus conocimientos y empezar a crear tu propio sitio Gatsby. ¿Has utilizado Gatsby para crear algo? No dudes en compartir tus proyectos y experiencias con nosotros en la sección de comentarios.