{"id":29734,"date":"2019-12-27T04:42:17","date_gmt":"2019-12-27T12:42:17","guid":{"rendered":"https:\/\/kinsta.com\/?p=58518&#038;preview=true&#038;preview_id=58518"},"modified":"2025-02-19T15:30:42","modified_gmt":"2025-02-19T14:30:42","slug":"gatsby-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/","title":{"rendered":"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)"},"content":{"rendered":"<p>\u00bfC\u00f3mo funciona un sitio web din\u00e1mico t\u00edpico, como los basados en WordPress? Cuando un visitante introduce la URL en un navegador o visita su sitio web a trav\u00e9s de un enlace, se env\u00eda una solicitud a su servidor web.<\/p>\n<p>El servidor recoge los datos necesarios a trav\u00e9s de consultas de base de datos y genera un archivo <a href=\"https:\/\/kinsta.com\/es\/blog\/como-subir-un-archivo-html-a-wordpress\/\">HTML<\/a> para que su navegador lo muestre. Los sitios est\u00e1ticos, por otro lado, almacenan estas respuestas en archivos planos en el servidor que son entregados instant\u00e1neamente a un visitante.<\/p>\n<p>Los <a href=\"https:\/\/kinsta.com\/es\/blog\/generadores-de-sitios-estaticos\/\">generadores de sitios est\u00e1ticos<\/a> existen desde hace mucho tiempo, pero recientemente han crecido en popularidad. En esta gu\u00eda paso a paso, veremos la<strong> integraci\u00f3n de WordPress con Gatsby<\/strong>, un generador de sitios est\u00e1ticos.<\/p>\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>\u00bfQu\u00e9 es Gatsby?<\/h2>\n<p>WordPress crea sitios web din\u00e1micos, que necesitan estar apilados de <a href=\"https:\/\/kinsta.com\/es\/blog\/acaso-ha-muerto-php\/\">PHP<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-mysql\/\">MySQL<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/nginx-vs-apache\/\">Apache o Nginx<\/a> en el servidor para ejecutarse. Es posible crear una versi\u00f3n est\u00e1tica de WordPress generando una lista de p\u00e1ginas HTML para todo el contenido de su sitio.<\/p>\n<p>Esta versi\u00f3n est\u00e1tica de WordPress se llama WordPress sin cabeza o WordPress sin servidor. Este proceso de conversi\u00f3n se hace una sola vez para que la misma p\u00e1gina pueda ser servida a los visitantes varias veces. \u00bfC\u00f3mo convertir su sitio de WordPress a una versi\u00f3n est\u00e1tica? Aqu\u00ed es donde Gatsby entra en escena.<\/p>\n<p><a href=\"http:\/\/gatsbyjs.com\/\">Gatsby<\/a>, o GatsbyJS, es un generador de sitios est\u00e1ticos construido con <a href=\"https:\/\/reactjs.org\">ReactJS<\/a> y alimentado por <a href=\"https:\/\/graphql.org\/\">GraphQL<\/a>. Gatsby permite que cualquiera pueda crear sitios web y aplicaciones atractivas y ricas en funciones. Gatsby obtiene los datos de su sitio de distintas fuentes, incluyendo sitios web existentes, llamadas a la API y archivos planos a trav\u00e9s de GraphQL, y crea el sitio est\u00e1tico bas\u00e1ndose en los ajustes de configuraci\u00f3n especificados por usted.<\/p>\n<p>Gatsby fue desarrollado hace s\u00f3lo un a\u00f1o, pero un gran n\u00famero de usuarios est\u00e1n probando Gatsby. Gatsby ha encontrado aceptaci\u00f3n en una variedad de escenarios. La p\u00e1gina principal del <a href=\"https:\/\/airbnb.io\/\">Blog de Ciencia de Datos e Ingenier\u00eda de Airbnb<\/a> es impulsada por Gatsby, aunque las entradas reales del blog est\u00e1n alojadas en Medium.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/blog-ingenieria-ciencia-datos-airbnb-3-1.png\" alt=\"Blog de Ingenier\u00eda y Ciencia de los Datos de Airbnb\" width=\"1500\" height=\"689\"><figcaption class=\"wp-caption-text\">Blog de Ingenier\u00eda y Ciencia de los Datos de Airbnb<\/figcaption><\/figure>\n<p>Braun es una marca de la compa\u00f1\u00eda de bienes de consumo P&#038;G. Su <a href=\"https:\/\/ca.braun.com\/en-ca\">sitio canadiense est\u00e1<\/a> alojado en Gatsby, mientras que la funci\u00f3n de b\u00fasqueda en el sitio es impulsada por React.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/braun-website-espanol-pagina-web-3-1.png\" alt=\"Braun's Website Espa\u00f1ol P\u00e1gina Web\" width=\"1500\" height=\"858\"><figcaption class=\"wp-caption-text\">P\u00e1gina Web de Braun<\/figcaption><\/figure>\n<p>Adem\u00e1s, Gatsby tambi\u00e9n ha despertado el inter\u00e9s de <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">los desarrolladores independientes<\/a> por sus carteras. Portafolios como <a href=\"https:\/\/jacobdcastro.com\/\">el de Jacob Castro<\/a> tienen principalmente contenido est\u00e1tico con enlaces a obras y contacto a trav\u00e9s del correo electr\u00f3nico, haciendo as\u00ed que un sitio est\u00e1tico se ajuste perfectamente a sus necesidades.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/cartera-jacob-d-castro-3-1.png\" alt=\"Cartera de Jacob D. Castro\" width=\"1500\" height=\"858\"><figcaption class=\"wp-caption-text\">Portafolio de Jacob D. Castro<\/figcaption><\/figure>\n<h3>\u00bfPor qu\u00e9 Elegir Gatsby?<\/h3>\n<p><strong>Sitios web r\u00e1pidos: <\/strong>El principal beneficio de construir un sitio est\u00e1tico con Gatsby es <a href=\"https:\/\/kinsta.com\/es\/aprender\/acelerar-wordpress\/\">la velocidad<\/a>, que los webmasters han estado tratando de optimizar desde el anuncio de Google de <a href=\"https:\/\/webmasters.googleblog.com\/2010\/04\/using-site-speed-in-web-search-ranking.html\">utilizar la velocidad del sitio en la clasificaci\u00f3n de la b\u00fasqueda web<\/a>. Los tiempos de carga tambi\u00e9n afectan a las vistas de p\u00e1gina y a las conversiones. Se ha estimado que un retraso de un segundo en el tiempo de carga del sitio <a href=\"https:\/\/kinsta.com\/es\/aprender\/optimizacion-de-velocidad-del-sitio\/#slow-how-slow\">puede llevar a una reducci\u00f3n del 7% en las conversiones<\/a>.<\/p>\n<p><strong>Seguridad: <\/strong>Tambi\u00e9n se obtiene una mayor <a href=\"https:\/\/kinsta.com\/es\/blog\/seguridad-wordpress\/\">seguridad<\/a> con un sitio est\u00e1tico. Como se trata de un mont\u00f3n de archivos est\u00e1ticos que se sirven, no hay mucho que hackear. Adem\u00e1s, siempre puede volver a generar los archivos est\u00e1ticos si se pierden.<\/p>\n<p><strong>Costos del servidor: <\/strong>El alojamiento de un sitio din\u00e1mico requiere que su servidor sea compatible con su nivel tecnol\u00f3gico. Si est\u00e1 trabajando con un sitio est\u00e1tico, puede alojarlo en casi cualquier servidor, lo que reduce el costo asociado con el alojamiento tambi\u00e9n.<\/p>\n<p>Generar el sitio est\u00e1tico con Gatsby en cada cambio necesita Javascript, lo cual tambi\u00e9n puede hacerse en una m\u00e1quina local antes de transferir los archivos est\u00e1ticos al sitio.<\/p>\n<h3>\u00bfPor qu\u00e9 Evitar Gatsby?<\/h3>\n<p><strong>Sin contenido din\u00e1mico incorporado:<\/strong> Si quiere usar Gatsby, tendr\u00e1 que replantearse c\u00f3mo controlar y servir el contenido din\u00e1mico, es decir, tendr\u00e1 que crear un <a href=\"https:\/\/www.gatsbyjs.org\/docs\/data-fetching\/\">h\u00edbrido<\/a> de est\u00e1tico\/din\u00e1mico para conseguirlo (m\u00e1s informaci\u00f3n a continuaci\u00f3n).<\/p>\n<p>Por ejemplo, <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-comentarios-wordpress\/\">los comentarios<\/a> deben alojarse externamente a trav\u00e9s de un servicio como <a href=\"https:\/\/kinsta.com\/es\/blog\/anuncios-de-disqus\/\">Disqus<\/a>.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-formulario-contacto-wordpress\/\">Los formularios de contacto<\/a> tambi\u00e9n tendr\u00edan que ser reenviados a trav\u00e9s de un socio externo como <a href=\"https:\/\/kinsta.com\/es\/blog\/google-forms-alternativas\/\">Google Forms<\/a>. En resumen, usted perder\u00eda el control directo sobre dicho contenido din\u00e1mico, ya que sus respuestas no se almacenan en sus servidores.<\/p>\n<p><strong>Las construcciones frecuentes son inc\u00f3modos: <\/strong>Los sitios est\u00e1ticos tambi\u00e9n tienen el problema de las reconversiones frecuentes. Cualquier cambio que haga en su sitio web s\u00f3lo se reflejar\u00e1 una vez que haya regenerado las p\u00e1ginas y las haya vuelto a cargar en el servidor.<\/p>\n<p><strong>Experiencia t\u00e9cnica: <\/strong>Gatsby est\u00e1 construido sobre ReactJS y GraphQL. Por lo tanto, se necesitan algunos conocimientos de JavaScript y una idea b\u00e1sica de GraphQL para trabajar y portar un sitio web a Gatsby.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-vs-html-estatico\/\">Los sitios web est\u00e1ticos<\/a> son buenos para aquellos que buscan una soluci\u00f3n de bajo costo, con alta seguridad. Algunos casos de uso son los sitios web de la cartera para aut\u00f3nomos y los sitios de demostraci\u00f3n de productos.<\/p>\n<p>Si cree que los beneficios superan a los defectos, \u00a1genial! Ahora intentaremos configurar Gatsby para que se integre con nuestro <a href=\"https:\/\/kinsta.com\/es\/blog\/ejemplos-de-sitios-wordpress\/\">sitio de WordPress<\/a>.<\/p>\n<p>La \u00faltima versi\u00f3n del sitio de Gatsby que construimos en este tutorial est\u00e1 <a href=\"https:\/\/github.com\/sdaityari\/gatsby-wordpress\">disponible en GitHub<\/a> para su uso.<\/p>\n<h2>Paso 1: Configuraci\u00f3n de Gatsby<\/h2>\n<p>En esta secci\u00f3n veremos c\u00f3mo instalar Gatsby y crear un sitio est\u00e1tico b\u00e1sico con Gatsby.<\/p>\n<h3>Requisitos Previos<\/h3>\n<p>El primer paso para empezar con Gatsby es comprobar sus requisitos previos. Gatsby se sirve a trav\u00e9s de npm, el instalador de paquetes de NodeJS. Por lo tanto, necesita NodeJS y npm en su entorno antes de instalar Gatsby. Adem\u00e1s, Gatsby requiere que <a href=\"https:\/\/kinsta.com\/es\/blog\/instalar-git\/\">instale Git<\/a>, el sistema de gesti\u00f3n de c\u00f3digo fuente.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Actualmente, Kinsta no puede alojar servidores NodeJS y estos deben ser configurados en otro lugar. Sin embargo, puede usar Kinsta para su instalaci\u00f3n de WordPress y extraer datos usando la <a href=\"https:\/\/kinsta.com\/es\/blog\/rest-api-de-wordpress\/\">API REST<\/a> o <a href=\"https:\/\/kinsta.com\/blog\/wordpress-revolution-with-graphql\/\">GraphQL<\/a>.<\/p>\n<\/aside>\n\n<p>Si utiliza Windows, puede instalar NodeJS y Git a trav\u00e9s del instalador de la p\u00e1gina de descarga. En un Mac, puede descargar sus instaladores o usar homebrew.<\/p>\n<pre><code>brew install nodejs\nbrew install git<\/code><\/pre>\n<p>Si est\u00e1 ejecutando el sistema operativo Linux, puede instalar NodeJS a trav\u00e9s de un instalador de paquetes como apt.<\/p>\n<pre><code>sudo\u00a0apt update\nsudo\u00a0apt install\u00a0nodejs git<\/code><\/pre>\n<h3>Instalar Gatsby<\/h3>\n<p>Una vez que haya instalado con \u00e9xito NodeJS y Git, \u00a1estar\u00e1 listo para instalar Gatsby! La forma m\u00e1s f\u00e1cil es ejecutar el siguiente comando en el terminal (utilice la l\u00ednea de comandos <code>npm<\/code> en Windows):<\/p>\n<pre><code>npm\u00a0install\u00a0-g gatsby-cli<\/code><\/pre>\n<p>El instalador primero instala las dependencias y luego Gatsby. Ya est\u00e1 listo para crear su primer sitio Gatsby.<\/p>\n<h3>Construya e Implemente su Sitio Gatsby<\/h3>\n<p>Ejecute el siguiente comando para crear un sitio Gatsby.<\/p>\n<pre><code>gatsby new gatsby-wordpress<\/code><\/pre>\n<p>Gatsby crea un sitio en el directorio \/gatsby-wordpress clonando la <a href=\"https:\/\/github.com\/gatsbyjs\/gatsby-starter-default.git\">plantilla de inicio de Gatsby<\/a>. Puede proporcionar una plantilla de inicio diferente para clonar. Una vez que la clonaci\u00f3n se haya completado y las dependencias est\u00e9n instaladas, puede ejecutar una versi\u00f3n de desarrollo del sitio con el siguiente comando.<\/p>\n<pre><code>cd\u00a0gatsby-wordpress\ngatsby develop<\/code><\/pre>\n<p>A continuaci\u00f3n, puede visitar la versi\u00f3n de desarrollo del sitio en http:\/\/localhost:8000.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/sitio-inicio-gatsby-3-1.png\" alt=\"Sitio de inicio de Gatsby\" width=\"1500\" height=\"715\"><figcaption class=\"wp-caption-text\">Sitio de inicio de Gatsby<\/figcaption><\/figure>\n<p>El paso final es construir su sitio est\u00e1tico. El siguiente comando crea los archivos est\u00e1ticos en el directorio p\u00fablico. Para subirlo a un servidor, simplemente puede subir el contenido de este directorio al directorio ra\u00edz del servidor. Puede que desee a\u00f1adir <a href=\"https:\/\/www.gatsbyjs.org\/docs\/path-prefix\">un prefijo de ruta<\/a> como www.example.com\/blog\/ como URL ra\u00edz para sus construcciones.<\/p>\n<pre><code>gatsby build<\/code><\/pre>\n<p>Para iniciar un servidor HTML de forma local para mostrar esta forma est\u00e1tica de su sitio web, debe utilizar el comando <code>serve<\/code>. Tenga en cuenta que s\u00f3lo funciona despu\u00e9s de ejecutar el comando de construcci\u00f3n.<\/p>\n<pre><code>gatsby serve<\/code><\/pre>\n<p>Ahora que ha creado con \u00e9xito un sitio est\u00e1tico b\u00e1sico desde Gatsby, vamos a intentar integrarlo con WordPress.<\/p>\n<h2>Paso 2: \u00bfC\u00f3mo Conectar Gatsby a WordPress?<\/h2>\n<p>En esta secci\u00f3n, <strong>integrar\u00e1<\/strong> su<strong> sitio de WordPress con Gatsby<\/strong>. Apuntar\u00eda a Gatsby a la direcci\u00f3n de su blog de WordPress para permitirle obtener los \u00faltimos datos cuando ejecuta el servidor de desarrollo o genera las p\u00e1ginas est\u00e1ticas.<\/p>\n<p>El proceso de conexi\u00f3n de Gatsby a WordPress consiste en obtener los datos de WordPress, que se activan mediante una compilaci\u00f3n. Una vez que Gatsby ha obtenido los datos de WordPress, crea el sitio est\u00e1tico basado en la plantilla actual.<\/p>\n<p>El proceso utiliza el sitio de WordPress que tiene una fuente para las publicaciones en Gatsby. Para facilitar este intercambio, es necesario instalar el plugin de Gatsby para WordPress mediante el siguiente comando:<\/p>\n<pre><code>npm\u00a0install\u00a0gatsby-source-wordpress<\/code><\/pre>\n<h3>Configurar Gatsby<\/h3>\n<p>A continuaci\u00f3n, a\u00f1ada este plugin al archivo de configuraci\u00f3n de Gatsby gatsby-config.js.<\/p>\n<p>Luego, agregue el siguiente c\u00f3digo al archivo para conectar Gatsby a su fuente de WordPress. En este ejemplo, utilizamos un sitio de <a href=\"https:\/\/kinsta.com\/es\/blog\/instalar-wordpress-localmente\/\">WordPress alojado localmente<\/a> en MAMP. En una nota al margen, puede que desee editar el t\u00edtulo y la descripci\u00f3n del sitio en siteMetadata.<\/p>\n<pre><code class=\"language-js\">module.exports = {\n  siteMetadata: {\n    ...\n  },\n  plugins: [\n    ...\n    {\n        resolve: `gatsby-source-wordpress`,\n        options: {\n            \/\/ Specify the URL of the WordPress source\n            baseUrl: `localhost:8888\/wordpress`,\n            protocol: `http`,\n            \/\/ Indicates if a site is hosted on WordPress.com\n            hostingWPCOM: false,\n            \/\/ Specify which URL structures to fetch\n            includedRoutes: [\n              '**\/posts',\n              '**\/tags',\n              '**\/categories'\n            ]\n        }\n    }\n\n<\/code><\/pre>\n<h3>Obtener Mensajes con GraphQL<\/h3>\n<p>Una vez que haya especificado el origen del sitio de WordPress en su archivo de configuraci\u00f3n, deber\u00e1 especificar qu\u00e9 datos deben extraerse del sitio de WordPress. Gatsby utiliza GraphQL, un lenguaje de consulta de c\u00f3digo abierto para APIs, para obtener publicaciones de WordPress en masa.<\/p>\n<p>Antes de finalizar las consultas a seleccionar, puede seleccionar interactivamente el contenido que necesita obtener de WordPress. Ejecute el servidor de desarrollo y vaya a la URL: http:\/\/localhost:8000\/___graphql para abrir el editor GraphQL.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/consulta-datos-graphql-3-1.png\" alt=\"Consulta de datos con GraphQL\" width=\"1500\" height=\"487\"><figcaption class=\"wp-caption-text\">Consulta de datos con GraphQL<\/figcaption><\/figure>\n<p>Cuando haya finalizado el contenido de la extracci\u00f3n, puede agregar las consultas de GraphQL al archivo index.js.<\/p>\n<p>Por ahora, saquemos el t\u00edtulo y s\u00f3lo un extracto de cada art\u00edculo. Podemos a\u00f1adir m\u00e1s campos m\u00e1s tarde.<\/p>\n<pre><code class=\"language-js\">import React from \"react\"\nimport { graphql } from \"gatsby\"\nimport Layout from \"..\/components\/layout\"\nimport SEO from \"..\/components\/seo\"\n\nexport default ({ data }) =&gt; {\n  return (\n    &lt;Layout&gt;\n      &lt;SEO title=\"home\" \/&gt;\n      &lt;h4&gt;Posts&lt;\/h4&gt;\n      {data.allWordpressPost.edges.map(({ node }) =&gt; (\n        &lt;div&gt;\n          &lt;p&gt;{node.title}&lt;\/p&gt;\n          &lt;div dangerouslySetInnerHTML={{ __html: node.excerpt }} \/&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/Layout&gt;\n  )\n}\nexport const pageQuery = graphql`\n  query {\n    allWordpressPost(sort: { fields: [date] }) {\n      edges {\n        node {\n          title\n          excerpt\n        }\n      }\n    }\n  }\n<\/code><\/pre>\n<p>\u00a0<\/p>\n<p>Cuando revise el sitio de desarrollo, notar\u00e1 que todos los posts de WordPress han sido sacados con sus encabezados y extractos mostrados:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/pagina-inicio-gatsby-posts-wordpress-3-1.png\" alt=\"P\u00e1gina de inicio de Gatsby con posts de WordPress\" width=\"1500\" height=\"543\"><figcaption class=\"wp-caption-text\">P\u00e1gina de inicio de Gatsby con posts de WordPress<\/figcaption><\/figure>\n<p>Aunque esto no parece bonito, ha sacado con \u00e9xito los datos relevantes de WordPress. El siguiente paso es crear una nueva p\u00e1gina para cada entrada.<\/p>\n<h2>Paso 3: Crear una Plantilla de P\u00e1gina B\u00e1sica<\/h2>\n<p>En esta secci\u00f3n, har\u00e1 que Gatsby cree una entrada para cada p\u00e1gina de su sitio WordPress e incluir\u00e1 enlaces a estas entradas a trav\u00e9s del <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-slug\/\">slug<\/a>.<\/p>\n<h3>Crear una P\u00e1gina para Cada Mensaje<\/h3>\n<p>El primer paso despu\u00e9s de sacar todos los posts de la fuente de WordPress es instruir a Gatsby para que cree una p\u00e1gina para cada post. Esta es una acci\u00f3n que se completa mediante la acci\u00f3n <code>createPage<\/code>.<\/p>\n<p>A\u00f1ada el siguiente c\u00f3digo a gatsby-node.js. Note que estamos obteniendo adicionalmente el contenido, autor, fecha y slug de cada post:<\/p>\n<pre><code class=\"language-js\">const path = require(`path`)\n\nexports.createPages = ({ graphql, actions }) =&gt; {\n  const { createPage } = actions\n  return graphql(`\n    {\n      allWordpressPost(sort: {fields: [date]}) {\n        edges {\n          node {\n            title\n            excerpt\n            slug\n            date(formatString: \"MM-DD-YYYY\")\n            author {\n              name\n            }\n          }\n        }\n      }\n    }\n\n  `).then(result =&gt; {\n    result.data.allWordpressPost.edges.forEach(({ node }) =&gt; {\n      createPage({\n        \/\/ Decide URL structure\n        path: node.slug,\n        \/\/ path to template\n        component: path.resolve(`.\/src\/templates\/blog-post.js`),\n        context: {\n          \/\/ This is the $slug variable\n          \/\/ passed to blog-post.js\n          slug: node.slug,\n        },\n      })\n    })\n  })<\/code><\/pre>\n<p>Despu\u00e9s de extraer los datos de GraphQL, el c\u00f3digo crea una p\u00e1gina para cada mensaje. Dentro del mensaje, puede especificar la estructura de la URL de la p\u00e1gina basada en el slug usando la ruta.<\/p>\n<p>Alternativamente, puede obtener el ID del mensaje y especificarlo en la URL. La variable de componente apunta al modelo a trav\u00e9s del cual se debe renderizar el puesto. Por \u00faltimo, pasamos el slug como el contexto de la plantilla. Esto es necesario para que el modelo consulte el puesto correcto de la lista de puestos obtenidos.<\/p>\n<p>Lo ideal ser\u00eda pasar una variable que identifique de manera \u00fanica un mensaje como el contexto.<\/p>\n<p>Reinicie el servidor de desarrollo despu\u00e9s de haber hecho cambios en el archivo gatsby-node.js para que los cambios surtan efecto.<\/p>\n<h3>Crear un Modelo para Visualizar una Contabilizaci\u00f3n<\/h3>\n<p>Crear una plantilla de directorio en el directorio src. Cree un nuevo archivo blog-post.js dentro del directorio de plantillas e introduzca el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">import React from \"react\"\nimport Layout from \"..\/components\/layout\"\nimport { graphql } from \"gatsby\"\n\nexport default ({ data }) =&gt; {\n  const post = data.allWordpressPost.edges[0].node\n  console.log(post)\n  return (\n    &lt;Layout&gt;\n      &lt;div&gt;\n        &lt;h1&gt;{post.title}&lt;\/h1&gt;\n        &lt;div dangerouslySetInnerHTML={{ __html: post.content }} \/&gt;\n        &lt;p&gt; By: {post.author.name} &lt;\/p&gt;\n        &lt;p&gt; On: {post.date} &lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/Layout&gt;\n  )\n}\n\nexport const query = graphql`\n  query($slug: String!) {\n    allWordpressPost(filter: { slug: { eq: $slug } }) {\n      edges {\n        node {\n          title\n          content\n          slug\n          date(formatString: \"MM-DD-YYYY\")\n          author {\n            name\n          }\n        }\n      }\n    }\n  }<\/code><\/pre>\n<p>\u00a0<\/p>\n<p>La consulta de GraphQL obtiene la fecha y los nombres de los autores, que se muestran hacia el final del mensaje. Puede obtener campos adicionales usando el <a href=\"http:\/\/localhost:8000\/___graphql\">editor GraphQL<\/a> y mostrarlos en la p\u00e1gina de publicaci\u00f3n.<\/p>\n<h3>Enlace a las P\u00e1ginas del \u00cdndice<\/h3>\n<p>Ha creado una nueva p\u00e1gina para cada mensaje. Sin embargo, necesita a\u00f1adir un enlace a estos mensajes desde la p\u00e1gina del \u00cdndice. Dir\u00edjase a index.js y modifique el c\u00f3digo para a\u00f1adir un enlace a cada mensaje:<\/p>\n<pre><code class=\"language-sass\">import React from \"react\"\nimport { Link, graphql } from \"gatsby\"\nimport Layout from \"..\/components\/layout\"\nimport SEO from \"..\/components\/seo\"\n\nexport default ({ data }) =&gt; {\n  return (\n    &lt;Layout&gt;\n      &lt;SEO title=\"home\" \/&gt;\n      &lt;h1&gt;My WordPress Blog&lt;\/h1&gt;\n      &lt;h4&gt;Posts&lt;\/h4&gt;\n      {data.allWordpressPost.edges.map(({ node }) =&gt; (\n        &lt;div&gt;\n          &lt;Link to={node.slug}&gt;\n            &lt;p&gt;{node.title}&lt;\/p&gt;\n          &lt;\/Link&gt;\n          &lt;div dangerouslySetInnerHTML={{ __html: node.excerpt }} \/&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/Layout&gt;\n  )\n}\n\nexport const pageQuery = graphql`\n  query {\n    allWordpressPost(sort: { fields: [date] }) {\n      edges {\n        node {\n          title\n          excerpt\n          slug\n        }\n      }\n    }\n  }<\/code><\/pre>\n<p>Aqu\u00ed est\u00e1 el estado de la p\u00e1gina de \u00edndice:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/pagina-indice-despues-anadir-enlaces-publicaciones-3-1.png\" alt=\"P\u00e1gina de \u00edndice despu\u00e9s de a\u00f1adir los enlaces de las publicaciones\" width=\"1500\" height=\"620\"><figcaption class=\"wp-caption-text\">P\u00e1gina de \u00edndice despu\u00e9s de a\u00f1adir los enlaces de las publicaciones<\/figcaption><\/figure>\n<p>Al hacer clic en un enlace a una entrada, aqu\u00ed est\u00e1 la p\u00e1gina de la entrada del blog, representada por blog-post.js:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/post-blog-contenido-fecha-creacion-autor-3-1.png\" alt=\"Post del blog con t\u00edtulo, contenido, fecha de creaci\u00f3n y autor\" width=\"1500\" height=\"460\"><figcaption class=\"wp-caption-text\">Post del blog con t\u00edtulo, contenido, fecha de creaci\u00f3n y autor<\/figcaption><\/figure>\n<h2>Paso 4: Tareas Avanzadas de Migraci\u00f3n<\/h2>\n<p>Aunque haya importado con \u00e9xito todos los posts de WordPress, vamos a realizar algunas tareas avanzadas para asegurarnos de que no se enfrente a problemas en el futuro. En esta secci\u00f3n, puede trabajar eficazmente con las im\u00e1genes y a\u00f1adir a sus datos la \u00faltima fecha y hora modificadas.<\/p>\n<h3>Conversiones de la Ruta de la Imagen<\/h3>\n<p>Una de nuestras publicaciones originales, \u00ab\u00a1Puesto con imagen!\u00bb ten\u00eda una imagen. Si se mueve a la p\u00e1gina correspondiente en Gatsby, notar\u00e1 que la imagen se muestra, pero la fuente de la imagen es la misma que la de WordPress. En este ejemplo, apunta a la imagen de WordPress alojada localmente.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/gatsby-post-imagen-fuente-3-1.png\" alt=\"v Gatsby post con una imagen y su fuente\" width=\"1500\" height=\"767\"><figcaption class=\"wp-caption-text\">Gatsby post con una imagen y su fuente<\/figcaption><\/figure>\n<p>Si est\u00e1 alojando las im\u00e1genes de forma externa, esto no supondr\u00e1 un problema ya que seguir\u00e1 apuntando a su servidor de im\u00e1genes. Sin embargo, si almacena las im\u00e1genes dentro de su instalaci\u00f3n de WordPress, \u00a1tendr\u00e1 que obtener las im\u00e1genes con los posts tambi\u00e9n!<\/p>\n<p>El plugin de <a href=\"https:\/\/github.com\/TylerBarnes\/gatsby-wordpress-inline-images\">im\u00e1genes en l\u00ednea<\/a> se encarga de esto. Primero, instale el<br \/>\ng<code>atsby-image<\/code> y luego el plugin <code>gatsby-wordpress-inline-images<\/code>.<\/p>\n<pre><code>npm install gatsby-image\nnpm install gatsby-wordpress-inline-images<\/code><\/pre>\n<p>A continuaci\u00f3n, a\u00f1ada las siguientes l\u00edneas a su archivo <code>gastby-config.js<\/code>.<\/p>\n<pre><code class=\"language-js\">module.exports = {\n  siteMetadata: {\n    ...\n  },\n  plugins: [\n    ...\n    {\n      resolve: `gatsby-source-wordpress`,\n      options: {\n        ...\n        \/\/ If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.\n        \/\/ This feature is untested for sites hosted on WordPress.com\n        useACF: true,\n        plugins: [\n          {\n            resolve: `gatsby-wordpress-inline-images`,\n            options:\n            {\n              baseUrl: `localhost:8888\/wordpress`,\n              protocol: `http`\n            }\n          }\n        ]\n      }\n    }\n  ],\n}<\/code><\/pre>\n<p>Reiniciando el servidor de desarrollo despu\u00e9s de hacer estos cambios se descargar\u00e1n las im\u00e1genes del sitio de WordPress y se almacenar\u00e1n localmente. Puede verificar esto desde la ruta de la misma imagen.<\/p>\n<h3>Mostrar la \u00daltima Fecha de Modificaci\u00f3n<\/h3>\n<p>Si gestiona un blog en el que actualiza regularmente sus entradas, es posible que desee informar a los lectores cuando una entrada se actualiz\u00f3 por \u00faltima vez. Aunque usted sac\u00f3 la \u00abfecha creada\u00bb en la consulta de GraphQL anteriormente, esta secci\u00f3n le dice c\u00f3mo sacar la \u00ab\u00faltima modificaci\u00f3n\u00bb de la marca de tiempo tambi\u00e9n.<\/p>\n<p>Para a\u00f1adir la \u00faltima marca de tiempo modificada de WordPress a su post de Gatsby, necesita a\u00f1adir el campo modificado a la lista de elementos de su consulta GraphQL. Es un sello de tiempo como <code>date<\/code>, por lo que tambi\u00e9n necesita a\u00f1adir el par\u00e1metro <code>formatString<\/code>. Aqu\u00ed est\u00e1 el archivo <code>blog-post.js<\/code> modificado:<\/p>\n<pre><code class=\"language-js\">...\n&lt;Layout&gt;\n  &lt;div&gt;\n    ...\n    &lt;p&gt; On: {post.date} &lt;\/p&gt;\n    &lt;p&gt; Last modified: {post.modified} &lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/Layout&gt;\n...\n\nexport const query = graphql`\n  query($slug: String!) {\n  {\n    allWordpressPost {\n      edges {\n        node {\n          ...\n          modified(formatString: \"MM-DD-YYYY\")\n        }\n      }\n    }\n  }\n<\/code><\/pre>\n<p>Una vez que haya a\u00f1adido esto, podr\u00e1 ver la \u00faltima marca de tiempo modificada en la p\u00e1gina de entrada del blog en Gatsby:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/10\/publicar-ultima-modificacion-marca-tiempo-3-1.png\" alt=\"Publicar con la \u00faltima modificaci\u00f3n de la marca de tiempo\" width=\"1500\" height=\"520\"><figcaption class=\"wp-caption-text\">Publicar con la \u00faltima modificaci\u00f3n de la marca de tiempo<\/figcaption><\/figure>\n<h2>C\u00f3mo Desplegar Tu Sitio Web Gatsby en Kinsta<\/h2>\n<p>Adem\u00e1s del <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">Alojamiento WordPress<\/a>, Kinsta ofrece <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Alojamiento de Aplicaciones<\/a>, <a href=\"https:\/\/sevalla.com\/database-hosting\/\">Alojamiento de Bases de Datos<\/a> y <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">Alojamiento de Sitios Est\u00e1ticos<\/a>. \u00a1Puedes alojar hasta 100 sitios est\u00e1ticos gratis!<\/p>\n<p>Para desplegar tu sitio con el Alojamiento de Sitios Est\u00e1ticos, primero env\u00eda tu c\u00f3digo a un 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 sigue estos pasos para desplegarlo:<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\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>A\u00f1ade la configuraci\u00f3n de construcci\u00f3n en el siguiente formato:\n<ul>\n<li><strong>Comando de construcci\u00f3n:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Versi\u00f3n de Node:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Directorio de publicaci\u00f3n:<\/strong> <code>public<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Por \u00faltimo, haz clic en <strong>Crear sitio<\/strong>.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n<h2>Resumen<\/h2>\n<p>Tomar la decisi\u00f3n de convertir su sitio de WordPress en un sitio est\u00e1tico aprovechando las ventajas de Gatsby puede ser una tarea dif\u00edcil. Para ello, debe ejecutar los siguientes pasos:<\/p>\n<ul>\n<li>Instalar Gatsby para construir un sitio de inicio<\/li>\n<li>Conectar Gatsby a la fuente de WordPress a trav\u00e9s de GraphQL<\/li>\n<li>Crear plantillas para entradas de blog<\/li>\n<li>Importe todas sus im\u00e1genes desde WordPress<\/li>\n<li>Mostrar la \u00faltima marca de tiempo modificada de WordPress<\/li>\n<\/ul>\n<p><em>Ahora, es su turno: \u00bfHa jugado con Gatsby? \u00bfCu\u00e1l es su experiencia con \u00e9l? Cu\u00e9ntenos en los comentarios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfC\u00f3mo funciona un sitio web din\u00e1mico t\u00edpico, como los basados en WordPress? Cuando un visitante introduce la URL en un navegador o visita su sitio web &#8230;<\/p>\n","protected":false},"author":118,"featured_media":29746,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[652,653],"topic":[1345,1328,1290],"class_list":["post-29734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-headless","tag-serverless","topic-desarrollo-wordpress","topic-generadores-sitios-estaticos","topic-headless-cms"],"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>Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)<\/title>\n<meta name=\"description\" content=\"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.\" \/>\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-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)\" \/>\n<meta property=\"og:description\" content=\"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/\" \/>\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=\"2019-12-27T12:42:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-19T14:30:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.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=\"Shaumik Daityari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shaumik Daityari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 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-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/\"},\"author\":{\"name\":\"Shaumik Daityari\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9d2eef02950231307b3e89cc7c932036\"},\"headline\":\"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)\",\"datePublished\":\"2019-12-27T12:42:17+00:00\",\"dateModified\":\"2025-02-19T14:30:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/\"},\"wordCount\":2985,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg\",\"keywords\":[\"headless\",\"serverless\"],\"articleSection\":[\"Los mejores tutoriales de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/\",\"name\":\"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg\",\"datePublished\":\"2019-12-27T12:42:17+00:00\",\"dateModified\":\"2025-02-19T14:30:42+00:00\",\"description\":\"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#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\":\"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)\"}]},{\"@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\/9d2eef02950231307b3e89cc7c932036\",\"name\":\"Shaumik Daityari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/feb5b18a7ac559ec6c8e8afcf96418ac?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/feb5b18a7ac559ec6c8e8afcf96418ac?s=96&d=mm&r=g\",\"caption\":\"Shaumik Daityari\"},\"description\":\"Shaumik is a data analyst by day, and a comic book enthusiast by night (or maybe, he's Batman?) Shaumik has been writing tutorials and creating screencasts for over five years. When not working, he's busy automating mundane daily tasks through meticulously written scripts!\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/shaumikdaityari\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)","description":"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.","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-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)","og_description":"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.","og_url":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2019-12-27T12:42:17+00:00","article_modified_time":"2025-02-19T14:30:42+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg","type":"image\/jpeg"}],"author":"Shaumik Daityari","twitter_card":"summary_large_image","twitter_description":"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Shaumik Daityari","Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/"},"author":{"name":"Shaumik Daityari","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9d2eef02950231307b3e89cc7c932036"},"headline":"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)","datePublished":"2019-12-27T12:42:17+00:00","dateModified":"2025-02-19T14:30:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/"},"wordCount":2985,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg","keywords":["headless","serverless"],"articleSection":["Los mejores tutoriales de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/","name":"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg","datePublished":"2019-12-27T12:42:17+00:00","dateModified":"2025-02-19T14:30:42+00:00","description":"\u00bfQuiere saber m\u00e1s sobre el CMS sin servidor, Gatsby y WordPress? Aprenda a crear sitios web s\u00faper r\u00e1pidos impulsados por Gatsby y WordPress con este tutorial.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/gatsby-wordpress.jpg","width":1460,"height":730,"caption":"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/gatsby-wordpress\/#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":"Introducci\u00f3n a la Construcci\u00f3n de Sitios Web con Gatsby y WordPress (R\u00e1pido y Est\u00e1tico)"}]},{"@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\/9d2eef02950231307b3e89cc7c932036","name":"Shaumik Daityari","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/feb5b18a7ac559ec6c8e8afcf96418ac?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/feb5b18a7ac559ec6c8e8afcf96418ac?s=96&d=mm&r=g","caption":"Shaumik Daityari"},"description":"Shaumik is a data analyst by day, and a comic book enthusiast by night (or maybe, he's Batman?) Shaumik has been writing tutorials and creating screencasts for over five years. When not working, he's busy automating mundane daily tasks through meticulously written scripts!","url":"https:\/\/kinsta.com\/es\/blog\/author\/shaumikdaityari\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/29734","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\/118"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=29734"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/29734\/revisions"}],"predecessor-version":[{"id":71714,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/29734\/revisions\/71714"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/pt"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/translations\/dk"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/29734\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/29746"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=29734"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=29734"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=29734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}