{"id":71194,"date":"2023-10-30T13:35:06","date_gmt":"2023-10-30T12:35:06","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=71194&#038;preview=true&#038;preview_id=71194"},"modified":"2023-10-31T15:09:43","modified_gmt":"2023-10-31T14:09:43","slug":"gatsby","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/gatsby\/","title":{"rendered":"Una Gu\u00eda Completa Para Crear Sitios Est\u00e1ticos Con Gatsby"},"content":{"rendered":"<p>Los sitios web est\u00e1ticos han resurgido en los \u00faltimos a\u00f1os gracias a su velocidad, seguridad y sencillez. Una de las principales herramientas para crear sitios est\u00e1ticos es Gatsby, un <a href=\"https:\/\/kinsta.com\/es\/secciones\/generadores-sitios-estaticos\/\">Generador de Sitios Est\u00e1ticos<\/a>\u00a0(SSG) rapid\u00edsimo.<\/p>\n<p>Tanto si eres un desarrollador web que quiere crear un <a href=\"https:\/\/kinsta.com\/es\/blog\/ideas-de-nombres-para-blogs\/\">blog personal<\/a>, un <a href=\"https:\/\/kinsta.com\/es\/blog\/portafolio-online\/\">portafolio<\/a> o un sitio web empresarial, Gatsby puede ayudarte a conseguir tus objetivos. Esta completa gu\u00eda te guiar\u00e1 a trav\u00e9s del proceso de creaci\u00f3n de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-sitio-web-estatico\/\">sitios est\u00e1ticos<\/a> con Gatsby. Cubre todos los temas, desde los m\u00e1s b\u00e1sicos hasta los m\u00e1s avanzados.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/gatsby-demo-site.gif\" alt=\"Un sitio de demostraci\u00f3n que muestra lo que puedes construir despu\u00e9s de leer esta gu\u00eda.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Un sitio de demostraci\u00f3n que muestra lo que puedes construir despu\u00e9s de leer esta gu\u00eda.<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Entender los Sitios Est\u00e1ticos<\/h2>\n<p>Los sitios est\u00e1ticos son p\u00e1ginas web que contienen archivos <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> y <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> pre-renderizados. A diferencia de los sitios web din\u00e1micos, no dependen del procesamiento del lado del servidor para cada solicitud. En su lugar, todo el contenido se genera con antelaci\u00f3n y se sirve directamente al navegador del usuario. Este enfoque ofrece varias ventajas:<\/p>\n<ol start=\"1\">\n<li><strong>Velocidad:<\/strong> Los sitios est\u00e1ticos se cargan r\u00e1pidamente, ya que no hay procesamiento del lado del servidor.<\/li>\n<li><strong>Seguridad:<\/strong> Al no ejecutarse c\u00f3digo en el servidor, los sitios est\u00e1ticos son menos vulnerables a las amenazas de seguridad.<\/li>\n<li><strong>Escalabilidad<\/strong>: Es f\u00e1cil almacenar en cach\u00e9 y distribuir sitios est\u00e1ticos a trav\u00e9s de Redes de Distribuci\u00f3n de Contenidos (CDN).<\/li>\n<li><strong>Sencillez:<\/strong> Son m\u00e1s f\u00e1ciles de desarrollar, desplegar y mantener.<\/li>\n<\/ol>\n<p>Ahora que sabes qu\u00e9 son los sitios est\u00e1ticos y sus ventajas, vamos a sumergirnos en Gatsby.<\/p>\n<h2>\u00bfQu\u00e9 es Gatsby?<\/h2>\n<p>Gatsby es un marco de trabajo de c\u00f3digo abierto basado en la biblioteca <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a> JavaScript que simplifica el proceso de creaci\u00f3n de sitios web est\u00e1ticos. Combina la potencia de <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-de-componentes-react\/\">los componentes de React<\/a> con GraphQL para la gesti\u00f3n de datos, lo que lo convierte en una excelente opci\u00f3n para desarrolladores de todos los niveles. Aqu\u00ed tienes por qu\u00e9 destaca Gatsby:<\/p>\n<ol start=\"1\">\n<li><strong>Incre\u00edblemente r\u00e1pido:<\/strong> Gatsby optimiza la velocidad de tu sitio mediante t\u00e9cnicas como la divisi\u00f3n del c\u00f3digo y la carga diferida, lo que da como resultado cargas de p\u00e1gina casi instant\u00e1neas.<\/li>\n<li><strong>Fuente de datos flexible:<\/strong> Puede obtener datos de varios lugares, como archivos Markdown, API y bases de datos.<\/li>\n<li><strong>Rico ecosistema de plugins:<\/strong> El <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/\">amplio ecosistema de plugins<\/a> de Gatsby te permite ampliar su funcionalidad sin esfuerzo.<\/li>\n<li><strong>SEO y rendimiento:<\/strong> Gatsby genera autom\u00e1ticamente HTML optimizado para mejorar el SEO y el rendimiento.<\/li>\n<\/ol>\n<h2>Primeros pasos con Gatsby<\/h2>\n<p>Para seguir esta gu\u00eda, debes tener:<\/p>\n<ul>\n<li>Conocimientos b\u00e1sicos de HTML, CSS y JavaScript<\/li>\n<li>Conocimientos b\u00e1sicos de React<\/li>\n<li>Node.js y npm (<a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">Node Package Manager<\/a>) o <a href=\"https:\/\/kinsta.com\/es\/blog\/herramientas-desarrollo-web\/#39-yarn\">yarn<\/a> instalados en tu ordenador<\/li>\n<\/ul>\n<p>Para empezar con Gatsby y crear un proyecto, puedes utilizar uno de los muchos ejemplos de la <a href=\"https:\/\/www.gatsbyjs.com\/starters\/\" target=\"_blank\" rel=\"noopener noreferrer\">Biblioteca de inicio de Gatsby<\/a> o crear un proyecto desde cero.<\/p>\n<p>Para esta gu\u00eda, vamos a utilizar el <a href=\"https:\/\/www.gatsbyjs.com\/starters\/gatsbyjs\/gatsby-starter-hello-world\/\">starter oficial hello world<\/a> para GatsbyJS, ya que nos proporciona un proyecto sencillo sin plugins ni archivos adicionales.<\/p>\n<ol start=\"1\">\n<li>En primer lugar, instala la CLI de Gatsby en tu ordenador ejecutando el siguiente comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -g gatsby-cli<\/code><\/pre>\n<p>Ejecuta <code>gatsby --version<\/code> para verificar si la instalaci\u00f3n se ha realizado correctamente.<\/p>\n<ol start=\"2\">\n<li>A continuaci\u00f3n, navega hasta la carpeta en la que desees crear tu proyecto y ejecuta el siguiente comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx gatsby new &lt;project-name&gt; https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world<\/code><\/pre>\n<p>Cambia <code>&lt;project-name&gt;<\/code> por el nombre que prefieras para tu proyecto.<\/p>\n<ol start=\"3\">\n<li>Una vez hecho esto, navega hasta la carpeta del proyecto e inicia el servidor de desarrollo:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\ngatsby develop<\/code><\/pre>\n<p>El servidor de desarrollo local se iniciar\u00e1 en <a href=\"http:\/\/localhost:8000\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:8000<\/a>, desde donde podr\u00e1s acceder a tu sitio Gatsby.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/gatsby-hello-world.png\" alt=\"El tema Hello World de Gatsby.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">El tema Hello World de Gatsby.<\/figcaption><\/figure>\n<h3>Comprende la estructura de archivos de Gatsby<\/h3>\n<p>Cuando abras tu proyecto en un editor de c\u00f3digo, ver\u00e1s la siguiente estructura:<\/p>\n<pre><code class=\"language-bash\">\/\n|-- \/public\n|-- \/src\n    |-- \/pages\n        |-- index.js\n|-- \/static\n|-- gatsby-config.js<\/code><\/pre>\n<ul>\n<li><strong>\/public:<\/strong> Este directorio contiene el resultado de tu proceso de compilaci\u00f3n de Gatsby. Es donde residen el HTML, CSS, JavaScript y otros recursos generados.<\/li>\n<li><strong>\/src:<\/strong> Este es el coraz\u00f3n de tu proyecto Gatsby, donde pasar\u00e1s la mayor parte del tiempo. Contiene varios subdirectorios y archivos:\n<ul>\n<li><strong>\/pages:<\/strong> Aqu\u00ed es donde se almacenan todas las p\u00e1ginas de tu proyecto. Cada archivo JavaScript aqu\u00ed corresponde a una ruta de tu sitio web.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static:<\/strong> Este directorio se utiliza para los archivos est\u00e1ticos que quieras incluir en tu sitio, como im\u00e1genes, fuentes o archivos descargables. Estos archivos se sirven tal cual y no ser\u00e1n procesados por Gatsby.<\/li>\n<li><strong>gatsby-config.js:<\/strong> Este archivo de configuraci\u00f3n es donde defines varios ajustes para tu sitio Gatsby. Aqu\u00ed puedes especificar plugins, metadatos del sitio y otras configuraciones.<\/li>\n<\/ul>\n<h2>Crear p\u00e1ginas y componentes<\/h2>\n<p>En Gatsby, crear p\u00e1ginas web es un proceso sencillo. Cualquier archivo JavaScript que crees dentro de la carpeta <strong>\/src\/pages<\/strong> se convierte autom\u00e1ticamente en una p\u00e1gina con su correspondiente ruta, gracias a la generaci\u00f3n autom\u00e1tica de p\u00e1ginas de Gatsby.<\/p>\n<p>Puedes crear tantas p\u00e1ginas como necesites para tu sitio web a\u00f1adiendo m\u00e1s archivos JavaScript a la carpeta <strong>\/src\/pages<\/strong>. Por ejemplo, puedes crear un archivo <strong>about.js<\/strong> para una p\u00e1gina \u00abAcerca de\u00bb.<\/p>\n<p>Aunque puedes crear archivos JavaScript individuales para cada p\u00e1gina directamente en la carpeta <strong>\/src\/pages<\/strong>, tambi\u00e9n es posible organizar m\u00e1s tus p\u00e1ginas. Puedes crear subcarpetas para agrupar p\u00e1ginas relacionadas. Por ejemplo, puedes crear una carpeta <strong>blog<\/strong> para organizar todas tus p\u00e1ginas relacionadas con el blog.<\/p>\n<p>Para este proyecto, este es el aspecto que tendr\u00e1 la estructura de p\u00e1ginas:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/pages\n        |-- about.js\n        |-- index.js\n        |-- \/blog\n            |-- index.js<\/code><\/pre>\n<h3>Utilizar JSX para Pages<\/h3>\n<p>Como Gatsby est\u00e1 construido sobre React, sus p\u00e1ginas y componentes est\u00e1n escritos en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\">JSX<\/a> (JavaScript XML). JSX es una extensi\u00f3n sint\u00e1ctica de JavaScript que te permite definir la estructura y el dise\u00f1o de tus interfaces de usuario de una forma muy legible y expresiva.<\/p>\n<p>Por ejemplo, puedes crear el contenido de tu p\u00e1gina de inicio (<strong>index.js<\/strong>) as\u00ed<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<h3>Enlazar p\u00e1ginas en Gatsby<\/h3>\n<p>Para crear un enlace a otra p\u00e1gina, puedes utilizar el componente <code>Link<\/code> de la siguiente manera:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default function Home() {\n    return (\n        &lt;&gt;\n            &lt;div&gt;\n                &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                &lt;Link&gt; to=\"\/about\"&gt;About Us&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>En el ejemplo anterior, hemos importado el componente <code>Link<\/code> desde <code>gatsby<\/code> y lo hemos utilizado para crear enlaces a la p\u00e1gina \u00abAbout Us\u00bb y a un blog. La p\u00e1gina \u00abAbout Us\u00bb, por ejemplo, tiene la ruta <code>\/about<\/code>. Cuando los usuarios hagan clic en el enlace \u00abAbout Us\u00bb, acceder\u00e1n a la p\u00e1gina <code>\/about<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El resultado del c\u00f3digo anterior puede aparecer como dos elementos enlazados fusionados, pero ten en cuenta que esto es puramente explicativo. M\u00e1s adelante se crear\u00e1 una barra de navegaci\u00f3n para presentar estos enlaces con el estilo adecuado.<\/p>\n<\/aside>\n\n<p>Para crear enlaces a sitios web externos, puedes utilizar etiquetas de anclaje normales (<code>&lt;a&gt;<\/code>) con el atributo <code>href<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nexport default function Home() {\n  return (\n        &lt;&gt;\n            &lt;div&gt;\n                &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                &lt;div&gt;\n                    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                    &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\" target=\"_blank\" rel=\"noreferrer\"&gt;\n                        &lt;div&gt;Read more&lt;\/div&gt;\n                    &lt;\/a&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>En este caso, el enlace abre el sitio web externo en una nueva pesta\u00f1a del navegador gracias a los atributos <code>target=\"_blank\"<\/code> y <code>rel=\"noreferrer\"<\/code>.<\/p>\n<h3>Crear componentes en Gatsby<\/h3>\n<p>La arquitectura basada en componentes de Gatsby te permite crear bloques de construcci\u00f3n reutilizables para tus p\u00e1ginas web. En lugar de duplicar c\u00f3digo en varias p\u00e1ginas, puedes encapsular elementos comunes en componentes, haciendo que tu c\u00f3digo base sea m\u00e1s organizado, mantenible y eficiente.<\/p>\n<p>Supongamos que el c\u00f3digo de tu p\u00e1gina de inicio incluye la secci\u00f3n de navegaci\u00f3n, el contenido principal y un pie de p\u00e1gina:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;div className=\"nav-links\"&gt;\n        &lt;Link&gt; to=\"\/\"&gt;Home&lt;\/Link&gt;\n        &lt;Link&gt; to=\"\/about\"&gt;About&lt;\/Link&gt;\n        &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n      &lt;\/div&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n      &lt;div className=\"footer\"&gt;\n        &lt;p&gt;\n          Hosted with \u2764\ufe0f by Kinsta's{' '}\n          &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;\n            Static Site Hosting\n          &lt;\/a&gt;\n          .\n        &lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Imagina tener que duplicar el c\u00f3digo de la barra de navegaci\u00f3n y el pie de p\u00e1gina para cada p\u00e1gina de tu sitio. Aqu\u00ed es donde entra en juego el poder de los componentes. Puedes crear componentes reutilizables para la barra de navegaci\u00f3n, el pie de p\u00e1gina y cualquier fragmento de c\u00f3digo que se repita en varias p\u00e1ginas y componentes.<\/p>\n<p>Para trabajar con componentes en Gatsby, crea una carpeta <strong>components<\/strong> en la carpeta <strong>src<\/strong> para almacenar todos los componentes. A continuaci\u00f3n, crea tus componentes, por ejemplo <strong>Navbar.js<\/strong> y <strong>Footer.js<\/strong>. En el archivo <strong>Navbar.<\/strong> <strong>js<\/strong>, separa el c\u00f3digo de esta forma:<\/p>\n<pre><code class=\"language-jsx\">import { Link } from 'gatsby';\nimport React from 'react';\n\nconst Navbar = () =&gt; {\n    return (\n        &lt;nav&gt;\n            &lt;div className=\"nav-links\"&gt;\n                &lt;Link to=\"\/\"&gt;Home&lt;\/Link&gt;\n                &lt;Link to=\"\/about\"&gt;About&lt;\/Link&gt;\n                &lt;Link to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n};\n\nexport default Navbar;<\/code><\/pre>\n<p>Y tambi\u00e9n tu <strong>Footer.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nconst Footer = () =&gt; {\n    return (\n        &lt;div className=\"footer\"&gt;\n            &lt;p&gt;\n                Hosted with \u2764\ufe0f by Kinsta's{' '}\n                &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;Static Site Hosting&lt;\/a&gt;\n                .\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Footer;<\/code><\/pre>\n<p>A continuaci\u00f3n, importa los archivos de tus componentes en tus p\u00e1ginas o componentes y util\u00edzalos de esta forma:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '..\/components\/Navbar';\nimport Footer from '..\/components\/Footer';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;Navbar \/&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n      &lt;Footer \/&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<h3>Crear un componente de dise\u00f1o<\/h3>\n<p>Una pr\u00e1ctica habitual en el desarrollo web es crear un <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/routing\/layout-components\/\">componente de dise\u00f1o<\/a> que encapsule la estructura general de tu sitio. El componente de dise\u00f1o suele incluir elementos que aparecen en todas las p\u00e1ginas, como encabezados, pies de p\u00e1gina, men\u00fas de navegaci\u00f3n y barras laterales.<\/p>\n<p>Crea un nuevo archivo llamado <strong>Layout.js<\/strong> en tu carpeta <strong>\/src\/components<\/strong>. A continuaci\u00f3n, define la estructura del dise\u00f1o. En esta gu\u00eda, la estructura de dise\u00f1o s\u00f3lo incluir\u00e1 la barra de navegaci\u00f3n y el pie de p\u00e1gina:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '.\/Navbar';\nimport Footer from '.\/Footer';\n\nconst Layout = ({ children }) =&gt; {\n    return (\n        &lt;div className=\"layout\"&gt;\n            &lt;Navbar \/&gt;\n            &lt;div&gt; className=\"content\"&gt;{children}&lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Layout;<\/code><\/pre>\n<p>En este componente de dise\u00f1o, utilizamos los componentes para envolver el contenido de la p\u00e1gina (proporcionados como <code>children<\/code>). Para utilizar el componente de dise\u00f1o en tus p\u00e1ginas, imp\u00f3rtalo y envuelve el contenido de tu p\u00e1gina con \u00e9l. Por ejemplo, en tu p\u00e1gina <strong>index.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\n\nexport default function Home() {\n  return (\n    &lt;Layout&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/Layout&gt;\n  );\n}<\/code><\/pre>\n<p>Al utilizar un componente de dise\u00f1o, garantizas una estructura y apariencia coherentes en todas tus p\u00e1ginas, a la vez que mantienes tu c\u00f3digo organizado y f\u00e1cil de mantener. Es una forma eficaz de gestionar los elementos comunes de tu sitio.<\/p>\n<h3>Estilizar p\u00e1ginas y componentes en Gatsby<\/h3>\n<p>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\u00f3dulos para las p\u00e1ginas.<\/p>\n<h4>Estilo CSS<\/h4>\n<p>En Gatsby, puedes crear f\u00e1cilmente un archivo CSS y vincularlo a cualquier componente o p\u00e1gina, y funcionar\u00e1 perfectamente. Por ejemplo, puedes crear una carpeta de <strong>styles<\/strong>\u00a0en la carpeta <strong>src<\/strong> y luego crear un archivo <strong>global.css<\/strong> con tu c\u00f3digo CSS.<\/p>\n<p>Por ejemplo, aqu\u00ed tienes algunos estilos globales b\u00e1sicos para los componentes creados anteriormente:<\/p>\n<pre><code class=\"language-css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500&display=swap');\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    background-color: #ddd;\n    font-family: 'Poppins',\n        sans-serif;\n    width: 1200px;\n    margin: 0 auto;\n}\n\na {\n    text-decoration: none;\n}\n\nimg {\n    width: 100%;\n}\n\nnav {\n    display: flex;\n    justify-content: space-between;\n    height: 200px;\n    align-items: center;\n}\n\nnav .logo-img {\n    width: 100px;\n}\n\nnav .nav-links a {\n    padding: 0 20px;\n    font-size: 18px;\n}\n\n@media (max-width:700px) {\n    body {\n        width: 100%;\n        padding: 0 20px;\n    }\n\n    nav .nav-links a {\n        padding: 0 18px;\n    }\n}\n\n.footer {\n    width: 100%;\n    text-align: center;\n    margin: 100px 0 20px;\n}<\/code><\/pre>\n<p>En el c\u00f3digo anterior, est\u00e1s importando la fuente Poppins de <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-google-fonts\/\">Google Fonts<\/a> y luego definiendo estilos b\u00e1sicos para aplicar a todos tus componentes.<\/p>\n<p>A continuaci\u00f3n, importa el archivo CSS en los componentes que desees estilizar, pero para este proyecto, puedes a\u00f1adirlo a tu componente Dise\u00f1o para que se aplique globalmente:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '.\/Navbar';\nimport Footer from '.\/Footer';\nimport '..\/styles\/global.css';\n\nconst Layout = ({ children }) =&gt; {\n    return (\n        &lt;div&gt;\n            &lt;Navbar \/&gt;\n            &lt;div&gt; className=\"content\"&gt;{children}&lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Layout;<\/code><\/pre>\n<h4>M\u00f3dulo de Estilos CSS<\/h4>\n<p>Los M\u00f3dulos CSS te permiten delimitar tus estilos a componentes o p\u00e1ginas espec\u00edficos. Esto evita conflictos de estilos y facilita el mantenimiento de tu c\u00f3digo. En la carpeta de estilos, crea tus m\u00f3dulos CSS utilizando el formato <strong>&lt;pageName&gt;.module.css<\/strong> y a\u00f1ade el estilo espec\u00edfico al archivo.<\/p>\n<p>Por ejemplo, crea <strong>home.module.css<\/strong> para la p\u00e1gina de inicio y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">.home_hero {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    text-align: center;\n\n}\n\n.home_hero h1 {\n    font-size: 60px;\n    width: 70%;\n}\n\n.home_hero p {\n    color: #6E7076;\n    font-size: 20px;\n}\n\n.btn {\n    background-color: #5333ed;\n    padding: 20px 30px;\n    margin-top: 40px;\n    border-radius: 5px;\n    color: #fff;\n}\n\n@media (max-width:700px) {\n    .home_hero h1 {\n        font-size: 40px;\n    }\n\n    .home_hero p {\n        font-size: 16px;\n    }\n}<\/code><\/pre>\n<p>Para utilizar los estilos CSS del m\u00f3dulo en tu p\u00e1gina o componente Gatsby, importa los estilos de tu m\u00f3dulo CSS como un objeto en la parte superior de tu archivo de p\u00e1gina o componente y util\u00edzalo de esta forma:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/home.module.css';\n\nexport default function Home() {\n  return (\n    &lt;Layout&gt;\n      &lt;div className={styles.home_hero}&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div className={styles.btn}&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/Layout&gt;\n  );\n}<\/code><\/pre>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Tambi\u00e9n puedes aplicar estilos en l\u00ednea, de forma similar a como lo har\u00edas en los componentes React.<\/p>\n<\/aside>\n<br \/>\n<aside data-ox=\"WXJ4bUc0a2xNdEU1Sk8=\" id=\"NzExOTQ=\" class=\"WzEyOTYsMTMyOF0=\" data-jnSrT=\"UlpjMi04T0NEb1EzZjdQelRWNnRn\" data-v=\"MDFkWmxESFRGWW9yTXlzX3phYko=\" data--kB=\"Q3BPbDkuX2Q=\" data-8zQ=\"cDFSY3Q2TkN1VFV5enhEWjdZ\" data-r3koi=\"Im1pZGRsZSI=|ImVzX0VTIg==\" data-8=\"RXhUTktlcGFZejlvQlp5cUoy\" data-k0Z=\"emtzNWNEYm42U1owdFAzNw==\" data-qw92ZWR=\"czhQcmxnRFliLTRhek1Tag==\" data-16mo=\"U1ZvZWstQnNV\" data-x0shT79=\"dTZPbzFfVDBiLVlkbG5jZnoy\" data-YCL7t=\"ZGptNDVxbmxZY0paUFFYdA==\"><\/aside><\/p>\n<h2>Uso de Archivos Est\u00e1ticos en Gatsby<\/h2>\n<p>En Gatsby, los archivos est\u00e1ticos se refieren a activos como im\u00e1genes, fuentes, archivos CSS y otros recursos que se sirven directamente al navegador del cliente sin ning\u00fan procesamiento del lado del servidor. Estos archivos se a\u00f1aden al directorio <strong>\/static<\/strong> en la ra\u00edz de tu proyecto.<\/p>\n<p>Por ejemplo, si a\u00f1ades una imagen <strong>kinsta-logo.png<\/strong> al directorio <strong>\/static<\/strong>, puedes mostrarla en tu componente de la siguiente manera:<\/p>\n<pre><code class=\"language-jsx\">import { Link } from 'gatsby';\nimport React from 'react';\n\nconst Navbar = () =&gt; {\n    return (\n        &lt;nav&gt;\n            &lt;Link&gt; to=\"\/\"&gt;\n                &lt;img src=\"\/kinsta-logo.png\" alt=\"Kinsta Logo\" className=\"logo-img\" \/&gt;\n            &lt;\/Link&gt;\n            &lt;div className=\"nav-links\"&gt;\n                &lt;Link&gt; to=\"\/\"&gt;Home&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/about\"&gt;About&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n};\n\nexport default Navbar;<\/code><\/pre>\n<p>Gatsby resuelve autom\u00e1ticamente estas rutas relativas a la URL correcta cuando se construye tu sitio. M\u00e1s adelante en esta gu\u00eda, aprender\u00e1s a optimizar las im\u00e1genes en Gatsby.<\/p>\n<h2>Plugins e Integraciones<\/h2>\n<p>Gatsby tiene un rico ecosistema de plugins que pueden ampliar su funcionalidad. Puedes encontrar plugins para <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>, <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-google-analytics\/\" target=\"_blank\" rel=\"noopener noreferrer\">anal\u00edtica<\/a>, optimizaci\u00f3n de im\u00e1genes, transformaci\u00f3n markdown y mucho m\u00e1s. Instalar y configurar plugins es sencillo, y pueden mejorar enormemente las capacidades de tu sitio.<\/p>\n<p>En esta gu\u00eda, utilizamos cuatro plugins:<\/p>\n<ol start=\"1\">\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-transformer-remark\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-transformer-remark<\/a>: Este plugin te permite transformar archivos Markdown en contenido HTML, facilitando la creaci\u00f3n y gesti\u00f3n de entradas de blog, documentaci\u00f3n o cualquier contenido basado en texto.<\/li>\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-transformer-sharp\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-transformer-sharp<\/a> y <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-sharp\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-plugin-sharp<\/a>: Estos plugins trabajan juntos para optimizar y manipular im\u00e1genes en tu proyecto Gatsby.<\/li>\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-source-filesystem\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-source-filesystem<\/a>: Este plugin te permite obtener archivos del directorio de tu proyecto y hacer que est\u00e9n disponibles para su consulta con GraphQL.<\/li>\n<\/ol>\n<p>Para utilizar estos plugins en tu proyecto Gatsby, ejecuta el siguiente comando en el directorio ra\u00edz de tu proyecto para instalarlos:<\/p>\n<pre><code class=\"language-bash\">npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem<\/code><\/pre>\n<p>A continuaci\u00f3n, config\u00faralos en tu archivo <strong>gatsby-config.js<\/strong>. Aqu\u00ed tienes un ejemplo de c\u00f3mo configurar los plugins:<\/p>\n<pre><code class=\"language-js\">module.exports = {\n    plugins: [\n        \/\/ ...other plugins\n        \/\/ Transform Markdown files into HTML\n        'gatsby-transformer-remark',\n        \/\/ Optimize and manipulate images\n        'gatsby-transformer-sharp',\n        'gatsby-plugin-sharp',\n        \/\/ Source files from your project directory\n        {\n            resolve: `gatsby-source-filesystem`,\n            options: {\n                name: `posts`,\n                path: `${__dirname}\/src\/posts\/`,\n            },\n        },\n        {\n            resolve: `gatsby-source-filesystem`,\n            options: {\n                name: `images`,\n                path: `${__dirname}\/src\/images\/`,\n            },\n        },\n    ],\n};<\/code><\/pre>\n<p>Se crean dos configuraciones <code>gatsby-source-filesystem<\/code>, que apuntan a dos carpetas: <strong>posts<\/strong> e <strong>images. <\/strong>Posts almacenar\u00e1 algunos archivos markdown (entradas del blog) que se transformar\u00edan con <code>gatsby-transformer-remark<\/code>, e images almacenar\u00e1 im\u00e1genes para el blog y otras im\u00e1genes que desees optimizar.<\/p>\n<p>Recuerda siempre reiniciar tu servidor de desarrollo local cuando hagas cambios en el archivo <strong>gatsby-config.js<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Las im\u00e1genes almacenadas en la carpeta <strong>src<\/strong> de un proyecto Gatsby est\u00e1n pensadas para contenido din\u00e1mico y se someten a la optimizaci\u00f3n de los plugins de Gatsby, mientras que las im\u00e1genes de la carpeta <strong>\/static<\/strong> se tratan como activos est\u00e1ticos y permanecen inalteradas en la salida de compilaci\u00f3n, por lo que son adecuadas para elementos como logotipos e iconos.<\/p>\n<\/aside>\n\n<h2>Crear Entradas de Blog<\/h2>\n<p>Ahora que hemos configurado nuestros plugins, crea una carpeta <strong>posts<\/strong> en el directorio <strong>src<\/strong> y, a continuaci\u00f3n, crea dos archivos Markdown con el siguiente contenido:<\/p>\n<p><strong>post-1.md:<\/strong><\/p>\n<pre><code class=\"language-markdown\">---\ntitle: \"Introduction to Gatsby\"\ndate: \"2023-10-01\"\nslug: \"introduction-to-gatsby\"\ndescription: \"Learn the basics of Gatsby and its features.\"\nfeatureImg: ..\/images\/featured\/image-1.jpeg\n---\n\nWelcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.<\/code><\/pre>\n<p>Y <strong>post-2 .md<\/strong>:<\/p>\n<pre><code class=\"language-markdown\">---\ntitle: \"Optimizing Images in Gatsby\"\ndate: \"2023-10-05\"\nslug: \"optimizing-images-in-gatsby\"\ndescription: \"Explore how to optimize images in your Gatsby project.\"\nfeatureImg: ..\/images\/featured\/image-2.jpeg\n---\n\nImages play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.<\/code><\/pre>\n<p>Estos archivos Markdown contienen frontmatter con metadatos sobre las entradas del blog, incluidos t\u00edtulos, fechas, babosas, descripciones y rutas de im\u00e1genes.<\/p>\n<h2>Consultas en Gatsby con GraphQL<\/h2>\n<p>Gatsby utiliza <a href=\"https:\/\/kinsta.com\/es\/blog\/graphql-vs-rest\/\">GraphQL<\/a> 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.<\/p>\n<p>Cuando ejecutes <code>gatsby develop<\/code> en tu terminal, ver\u00e1s que, adem\u00e1s del enlace <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-source-filesystem\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-source-filesystem<\/a>, que abre tu proyecto en la web, tambi\u00e9n aparece la URL <a href=\"http:\/\/localhost:8000\/___graphql\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:8000\/___graphql<\/a>. Esta URL proporciona acceso al <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/querying-data\/running-queries-with-graphiql\/\" target=\"_blank\" rel=\"noopener noreferrer\">editor GraphiQL<\/a> para tu proyecto Gatsby.<\/p>\n<p>Cuando abras el editor, ver\u00e1s esta interfaz:<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/graphiql-playground.png\" alt=\"La zona de juegos GraphiQL de Gatsby.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La zona de juegos GraphiQL de Gatsby.<\/figcaption><\/figure>\n<p>Puedes consultar toda la informaci\u00f3n sobre tu sitio desde este editor. Pero ya que has creado archivos Markdown y realizado todas las configuraciones en el archivo <strong>gatsby-config.js<\/strong>. Vamos a consultar los archivos Markdown y su contenido ejecutando la siguiente consulta en el editor:<\/p>\n<pre><code class=\"language-json\">query BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}<\/code><\/pre>\n<p>Esta consulta obtiene datos de todos los archivos Markdown utilizando <code>allMarkdownRemark<\/code>. Recupera <code>title<\/code>, <code>slug<\/code>, y <code>description<\/code> de la portada de cada archivo y tambi\u00e9n su <code>id<\/code>.<\/p>\n<p>Despu\u00e9s de escribir tu consulta, haz clic en el bot\u00f3n \u00abReproducir\u00bb (un icono triangular orientado hacia la derecha) para ejecutarla. Los resultados se mostrar\u00e1n en la parte derecha del editor.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/markdown-details-with-graphiql.png\" alt=\"Utilizar el campo de juego GraphiQL para obtener informaci\u00f3n de markdown.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Utilizar el campo de juego GraphiQL para obtener informaci\u00f3n de markdown.<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, puedes utilizar GraphQL para consultar los datos Markdown en tus componentes o p\u00e1ginas. Para consultar estos datos en la p\u00e1gina <strong>blog\/index.js<\/strong>, primero importa <code>graphql<\/code> de <code>gatsby<\/code>. A continuaci\u00f3n, al final del c\u00f3digo JSX, a\u00f1ade lo siguiente:<\/p>\n<pre><code class=\"language-json\">export const query = graphql`\nquery BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}\n`;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, utilizamos la etiqueta <code>graphql<\/code> para crear una consulta GraphQL llamada <code>query<\/code>. Este es el aspecto que debe tener tu archivo <strong>blog\/index.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import { graphql, Link } from 'gatsby';\nimport React from 'react';\nimport Layout from '..\/..\/components\/Layout';\nimport * as styles from '..\/..\/styles\/blog.module.css';\n\nconst blog = ({ data }) =&gt; {\n    const posts = data.allMarkdownRemark.nodes;\n    return (\n        &lt;Layout&gt;\n            &lt;div className={styles.blog_cont}&gt;\n                &lt;h2&gt;Blog&lt;\/h2&gt;\n                &lt;div className={styles.blog_grid}&gt;\n                    {posts.map((post) =&gt; (\n                        &lt;Link\n                            to={`\/blog\/${post.frontmatter.slug}`}\n                            className={styles.blog_card}\n                            key={post.id}\n                        &gt;\n                            &lt;h3&gt;{post.frontmatter.title}&lt;\/h3&gt;\n                            &lt;p&gt;{post.frontmatter.description}&lt;\/p&gt;\n                        &lt;\/Link&gt;\n                    ))}\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\nexport default blog;\n\nexport const query = graphql`\nquery BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}\n`;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, accedes al resultado <code>query<\/code> a trav\u00e9s de la propiedad <code>data<\/code> de tu componente. A continuaci\u00f3n, recorre en bucle los datos de <code>posts<\/code> utilizando el m\u00e9todo <code><a href=\"https:\/\/kinsta.com\/es\/blog\/typeerror-cannot-read-property-map-of-undefined\/\">map()<\/a><\/code> Y, a continuaci\u00f3n, muestra los t\u00edtulos en una lista.<\/p>\n<p>Para evitar errores, crea un archivo <strong>blog.module.css<\/strong> en la carpeta <strong>styles<\/strong> y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">.blog_cont h2 {\n    font-size: 40px;\n    margin-bottom: 20px;\n}\n\n.blog_grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n@media (max-width:700px) {\n    .blog_grid {\n        grid-template-columns: 1fr;\n    }\n}\n\n.blog_card {\n    background-color: #bfbfbf;\n    padding: 20px;\n    border-radius: 5px;\n    color: #000;\n    transition: all .5s ease-in-out;\n}\n\n.blog_card:hover {\n    background-color: #5333ed;\n    color: #fff;\n}\n\n.blog_card h3 {\n    margin-bottom: 15px;\n}\n\n.blog_card p {\n    margin-bottom: 15px;\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/blog-posts-graphql.png\" alt=\"Visualizaci\u00f3n de las entradas del blog obtenidas mediante GraphQL.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Visualizaci\u00f3n de las entradas del blog obtenidas mediante GraphQL.<\/figcaption><\/figure>\n<h2>Comprender las Plantillas y Generar P\u00e1ginas Din\u00e1micas en Gatsby con GraphQL<\/h2>\n<p>En Gatsby, las plantillas y las p\u00e1ginas din\u00e1micas son conceptos esenciales que te permiten crear sitios web flexibles y basados en datos. Las plantillas te permiten definir la estructura y el dise\u00f1o de las p\u00e1ginas, mientras que GraphQL te ayuda a obtener datos para rellenar estas plantillas din\u00e1micamente.<\/p>\n<h3>Crear una plantilla de entrada de blog<\/h3>\n<p>Supongamos que quieres crear un blog en el que cada entrada tenga una estructura coherente, que incluya un t\u00edtulo y un contenido. Puedes crear una plantilla <code>BlogDetails<\/code> para definir este dise\u00f1o. En la carpeta <strong>src<\/strong>, crea una carpeta <strong>templates<\/strong> y, a continuaci\u00f3n, crea un archivo <strong>blog-details.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/blog-details.module.css';\n\nconst BlogDetails = () =&gt; {\n\n    return (\n        &lt;Layout&gt;\n            &lt;div&gt;\n                &lt;div className={styles.blog_content}&gt;\n                    &lt;Img\n                        className={styles.blog_featured}\n                    \/&gt;\n                    &lt;h3&gt;Title&lt;\/h3&gt;\n                    &lt;div&gt;\n                        className={styles.html}\n                        dangerouslySetInnerHTML={}\n                    \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\n\nexport default BlogDetails;<\/code><\/pre>\n<p>En este ejemplo, la plantilla <code>BlogDetails<\/code> define la estructura de las entradas individuales del blog. A continuaci\u00f3n, vamos a utilizar GraphQL para obtener datos de entradas concretas del blog y pas\u00e1rselos como props a esta plantilla.<\/p>\n<h3>Generar p\u00e1ginas din\u00e1micas<\/h3>\n<p>Para generar p\u00e1ginas din\u00e1micas, crea un archivo <strong>gatsby-node.js<\/strong> en el directorio ra\u00edz de tu proyecto. Este archivo te permite definir c\u00f3mo se crean las p\u00e1ginas.<\/p>\n<p>En tu archivo <strong>gatsby-node.js<\/strong>, utiliza GraphQL para consultar los datos que quieras utilizar para las p\u00e1ginas din\u00e1micas. Por ejemplo, si tienes entradas de blog en Markdown, puedes consultar sus slugs:<\/p>\n<pre><code class=\"language-jsx\">const path = require(`path`);\n\nexports.createPages = async ({ graphql, actions }) =&gt; {\n  const { data } = await graphql(`\n    query Articles {\n      allMarkdownRemark {\n        nodes {\n          frontmatter {\n            slug\n          }\n        }\n      }\n    }\n  `);\n\n  data.allMarkdownRemark.nodes.forEach((node) =&gt; {\n    actions.createPage({\n      path: '\/blog\/' + node.frontmatter.slug,\n      component: path.resolve('.\/src\/templates\/blog-details.js'),\n      context: { slug: node.frontmatter.slug },\n    });\n  });\n};<\/code><\/pre>\n<p>En este ejemplo, consultamos los slugs de todas las entradas Markdown y creamos p\u00e1ginas din\u00e1micas para cada entrada utilizando la plantilla <code>BlogDetails<\/code>. 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.<\/p>\n<p>Entendamos primero c\u00f3mo funciona la optimizaci\u00f3n de im\u00e1genes en Gatsby antes de a\u00f1adir una consulta GraphQL a la p\u00e1gina de la plantilla.<\/p>\n<h3>Optimizaci\u00f3n de im\u00e1genes en Gatsby<\/h3>\n<p>Anteriormente, instalaste y configuraste <code>gatsby-transformer-sharp<\/code> y <code>gatsby-plugin-sharp<\/code> junto con <code>gatsby-source-filesystem<\/code> para obtener im\u00e1genes.<\/p>\n<p>Con esos plugins, puedes consultar y optimizar im\u00e1genes con GraphQL. Aqu\u00ed tienes un ejemplo de c\u00f3mo consultar y mostrar una imagen optimizada utilizando <code>gatsby-plugin-sharp<\/code>:<\/p>\n<pre><code class=\"language-json\">export const query = graphql`\n  query {\n    file(relativePath: { eq: \"example.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, est\u00e1s consultando una imagen llamada <strong>example<\/strong><strong>.jpg<\/strong> desde la fuente de <strong>images<\/strong> y utilizando la propiedad <code>fluid<\/code> de la imagen consultada para mostrarla con una representaci\u00f3n responsiva y optimizada.<\/p>\n<p>A continuaci\u00f3n, puedes importar <code>Img<\/code> desde <code>gatsby-image<\/code> para trabajar con im\u00e1genes optimizadas.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { graphql } from 'gatsby';\nimport Img from 'gatsby-image';\n\nconst ImageExample = ({ data }) =&gt; {\n  const { fluid } = data.file.childImageSharp;\n\n  return (\n    &lt;div&gt;\n      &lt;Img fluid={fluid} alt=\"Example Image\" \/&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default ImageExample;<\/code><\/pre>\n<h3>Consulta de p\u00e1ginas din\u00e1micas<\/h3>\n<p>Gatsby utilizar\u00e1 la plantilla especificada para crear p\u00e1ginas individuales para cada entrada del blog. A\u00f1adamos ahora una consulta GraphQL a la p\u00e1gina de la plantilla para obtener los datos basados en el slug:<\/p>\n<pre><code class=\"language-jsx\">import { graphql } from 'gatsby';\nimport Img from 'gatsby-image';\nimport React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/blog-details.module.css';\n\nconst BlogDetails = ({ data }) =&gt; {\n    const { html } = data.markdownRemark;\n    const { title, featureImg } = data.markdownRemark.frontmatter;\n    return (\n        &lt;Layout&gt;\n            &lt;div&gt;\n                &lt;div className={styles.blog_content}&gt;\n                    &lt;Img\n                        fluid={featureImg.childImageSharp.fluid}\n                        className={styles.blog_featured}\n                    \/&gt;\n                    &lt;h3&gt;{title}&lt;\/h3&gt;\n                    &lt;div\n                        className={styles.html}\n                        dangerouslySetInnerHTML={{ __html: html }}\n                    \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\n\nexport default BlogDetails;\n\nexport const query = graphql`\n    query ProjectDetails($slug: String) {\n        markdownRemark(frontmatter: { slug: { eq: $slug } }) {\n            html\n            frontmatter {\n                title\n                featureImg {\n                    childImageSharp {\n                        fluid {\n                            ...GatsbyImageSharpFluid\n                        }\n                    }\n                }\n            }\n        }\n    }\n`;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, ver\u00e1s que buscamos la imagen optimizada y la entrada del blog que coincide con el slug.<\/p>\n<p>Puedes consultar el c\u00f3digo fuente completo de este <a href=\"https:\/\/github.com\/kinsta\/kinsta-gatsby-quickstart\" target=\"_blank\" rel=\"noopener noreferrer\">proyecto Gatsby en GitHub<\/a>.<\/p>\n<h2>Desplegar Sitios Est\u00e1ticos Gatsby con Kinsta<\/h2>\n<p>Kinsta te permite <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">alojar hasta 100 sitios web est\u00e1ticos<\/a>\u00a0<strong>de forma gratuita<\/strong>. Para ello, env\u00eda tu c\u00f3digo a tu proveedor Git preferido (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>) y luego despli\u00e9galo en Kinsta.<\/p>\n<p>Una vez que tu repositorio est\u00e9 listo, sigue estos pasos para desplegar tu sitio est\u00e1tico en Kinsta:<\/p>\n<ol start=\"1\">\n<li>Inicia sesi\u00f3n o crea una cuenta para ver tu panel <a href=\"https:\/\/my.kinsta.com\/?lang=es\">MyKinsta<\/a>.<\/li>\n<li>Autoriza a Kinsta con tu proveedor de Git.<\/li>\n<li>Haz clic en <strong>Sitios est\u00e1ticos<\/strong> en la barra lateral izquierda, y luego en <strong>A\u00f1adir sitio<\/strong>.<\/li>\n<li>Selecciona el repositorio y la rama desde la que deseas desplegar.<\/li>\n<li>Asigna un nombre \u00fanico a tu sitio.<\/li>\n<li>MyKinsta detectar\u00e1 autom\u00e1ticamente los ajustes de compilaci\u00f3n para este proyecto Gatsby. Ver\u00e1s los siguientes ajustes rellenados previamente:\n<ul>\n<li><strong>Comando de compilaci\u00f3n:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Versi\u00f3n de nodo:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Directorio de publicaci\u00f3n:<\/strong> <code>public<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Por \u00faltimo, haz clic en <strong>Crear sitio<\/strong>.<\/li>\n<\/ol>\n<p>Y ya est\u00e1 En pocos segundos tendr\u00e1s un sitio desplegado. Se proporciona un enlace para acceder a la versi\u00f3n desplegada de tu sitio. Si lo deseas, puedes a\u00f1adir m\u00e1s adelante tu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">dominio personalizado<\/a> y tu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificado SSL<\/a>.<\/p>\n<p>Como alternativa al Alojamiento de Sitios Est\u00e1ticos, puedes optar por desplegar tu sitio est\u00e1tico con el <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Alojamiento de Aplicaciones<\/a> de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama m\u00e1s amplia de ventajas y acceso a funciones m\u00e1s robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile, y <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">an\u00e1lisis completos<\/a> que contienen datos hist\u00f3ricos y en tiempo real.<\/p>\n<h2>Resumen<\/h2>\n<p>Esta gu\u00eda repasa los fundamentos de la obtenci\u00f3n de datos, el enrutamiento, el estilo, la optimizaci\u00f3n de im\u00e1genes, los plugins, el despliegue y mucho m\u00e1s.<\/p>\n<p>La flexibilidad, velocidad y el rico ecosistema de Gatsby lo convierten en una potente opci\u00f3n para crear sitios web est\u00e1ticos. Tanto si est\u00e1s creando un blog personal, un portafolio o un sitio web empresarial, Gatsby te lo ofrece.<\/p>\n<p><em>Ahora es el momento de poner en pr\u00e1ctica tus conocimientos y empezar a crear tu propio sitio Gatsby. \u00bfHas utilizado Gatsby para crear algo? No dudes en compartir tus proyectos y experiencias con nosotros en la secci\u00f3n de comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los sitios web est\u00e1ticos han resurgido en los \u00faltimos a\u00f1os gracias a su velocidad, seguridad y sencillez. Una de las principales herramientas para crear sitios est\u00e1ticos &#8230;<\/p>\n","protected":false},"author":287,"featured_media":71195,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1296,1328],"class_list":["post-71194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-generadores-sitios-estaticos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Crear y Desplegar Sitios Est\u00e1ticos con Gatsby y Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/gatsby\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Una Gu\u00eda Completa Para Crear Sitios Est\u00e1ticos Con Gatsby\" \/>\n<meta property=\"og:description\" content=\"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/gatsby\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-30T12:35:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-31T14:09:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Una Gu\u00eda Completa Para Crear Sitios Est\u00e1ticos Con Gatsby\",\"datePublished\":\"2023-10-30T12:35:06+00:00\",\"dateModified\":\"2023-10-31T14:09:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/\"},\"wordCount\":3576,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/\",\"name\":\"C\u00f3mo Crear y Desplegar Sitios Est\u00e1ticos con Gatsby y Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg\",\"datePublished\":\"2023-10-30T12:35:06+00:00\",\"dateModified\":\"2023-10-31T14:09:43+00:00\",\"description\":\"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/gatsby\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generadores de Sitios Est\u00e1ticos\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/generadores-sitios-estaticos\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Una Gu\u00eda Completa Para Crear Sitios Est\u00e1ticos Con Gatsby\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Crear y Desplegar Sitios Est\u00e1ticos con Gatsby y Kinsta - Kinsta\u00ae","description":"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/gatsby\/","og_locale":"es_ES","og_type":"article","og_title":"Una Gu\u00eda Completa Para Crear Sitios Est\u00e1ticos Con Gatsby","og_description":"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.","og_url":"https:\/\/kinsta.com\/es\/blog\/gatsby\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-10-30T12:35:06+00:00","article_modified_time":"2023-10-31T14:09:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"21 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Una Gu\u00eda Completa Para Crear Sitios Est\u00e1ticos Con Gatsby","datePublished":"2023-10-30T12:35:06+00:00","dateModified":"2023-10-31T14:09:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/"},"wordCount":3576,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/gatsby\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/","url":"https:\/\/kinsta.com\/es\/blog\/gatsby\/","name":"C\u00f3mo Crear y Desplegar Sitios Est\u00e1ticos con Gatsby y Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg","datePublished":"2023-10-30T12:35:06+00:00","dateModified":"2023-10-31T14:09:43+00:00","description":"Aprovecha todo el potencial de Gatsby con nuestra completa gu\u00eda. Aprende a crear sitios web est\u00e1ticos ultrarr\u00e1pidos, desde la configuraci\u00f3n hasta la implementaci\u00f3n.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/gatsby\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/10\/gatsby.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Generadores de Sitios Est\u00e1ticos","item":"https:\/\/kinsta.com\/es\/secciones\/generadores-sitios-estaticos\/"},{"@type":"ListItem","position":3,"name":"Una Gu\u00eda Completa Para Crear Sitios Est\u00e1ticos Con Gatsby"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/71194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=71194"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/71194\/revisions"}],"predecessor-version":[{"id":71213,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/71194\/revisions\/71213"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/71194\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/71195"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=71194"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=71194"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=71194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}