Categoría: blog

Categorías
blog

Pasar variables en la url Gatsby

sitemap

En esta entrada vamos a ver como pasar variables en la url, tipica web que pasa unas variables en la url via Get, que la siguiente página va a recoger esas variables y hacer algo con ellas.

El problema que ocurre con Gatsby es que cuando pasas variables por la url y preguntas desde js por windows.location.search (para recuperar las variables) y compilas Gatsby te va a dar errores ya que el paso a producción no existen la variable windows.

Si quieres más información de esto último lo tienes en este enlace.

Ahora bien, volviendo al tema que nos ocupa, como paso variables y las recojo. El código sería algo así:

Por un lado formamos la url con los datos que queremos enviar, sería algo así.

dominio.com?iva=21&prezzoPerIva=55230.45&prezzo=45645&sumadedu=suma

Y en la url que queremos recoger los valores montariamos algo así:

  let params = '';
  let iva = '';
  let prezzoPerIva = '';
  let prezzo = '';
  let sumadedu = '';
  let url = '';
  let sumaDevenga='';
  let conSin='';

  if (typeof window !== 'undefined') {
     params = new URLSearchParams(window.location.search);
     iva = params.get("iva");
     prezzoPerIva = params.get("prezzoPerIva");
     prezzo = params.get("prezzo");
     sumadedu = params.get("sumadedu");
     url = window.location.href;

  }

Cómo puedes ver, lo primero que hago es poner todos los valores a cero, pregunto si window existe o no por evitar los errores de paso a producción y por último recojo los valores y luego ya realizo las operaciones que necesite con esos valores.

Este sería un ejemplo funcionando:

https://comocalculariva.com/

Escribe los valores que quieras y mira como los recoje la pantalla final.

Categorías
blog

Window is not defined | Solución Gatsby Error

Gatsby – Window is not defined o Located is not defined


¿Qué es , por qué ocurre y cómo solucionarlo?

Gatsby es uno de los generadores de sitios estáticos más populares disponibles para crear webs preconstruidas para aplicaciones Jamstack. Es un framework basado en React que ofrece muchos plugins para hacer la vida más cómoda a la comunidad de desarrolladores. He estado usando Gatsby durante un par de años, y mi experiencia es muy buena a excepción de algunos problemillas.

Hablaremos de uno de esos fallos que me he enfrentado y que afortunadamente he encontrado soluciones. Espero que os sea útil.

¿Qué es el error Window is not defined o Located is not defined ?


Para ejecutar una aplicación basada en Gatsby hay dos entornos diferentes, gatsby develop y gatsby build

gatsby develop: Un entorno de desarrollo habilitado con recarga en caliente. En este entorno, todas las APIs específicas del navegador como localstorage, o las globales como window, document, etc., funcionarán bien.
gatsby build: Es el entorno para construir la aplicación para producir componentes desplegables. Incluso puedes ejecutar la aplicación localmente desde los componentes desplegables usando el comando gatsby serve. A diferencia del entorno de desarrollo, el entorno de construcción está basado en nodejs.

El entorno nodejs no tiene las variables globales de un navegador definidas , como pueden ser window, document, o locate… Por lo tanto, si en el código fuente haces referencias a estas globales, pues va a dar poblemas durante la construcción. Es más que probable que tengas fallos durante la de construcción.

Nota: También puedes encontrarte con este error cuando utilizas una librería del lado del cliente (tal vez, un instalacion npm) que contiene una referencia a window, document, etc.

¿Cómo arreglar el error «ventana no definida»?

Hay varias maneras de arreglar/ignorar este error. Puedes utilizar la que más te convenga.

Comprobar si la ventana está definida


Puede comprobar si este objeto global del navegador está definida y, basándose en si está o no , ejecutar el bloque de código.

La variable isBrowser te ayuda a determinar si el objeto ventana está disponible en el entorno. Vamos a utilizarla para comprobar y llamar a un método para obtener un elemento del almacenamiento local del navegador.

Sería algo así:

const isBrowser = typeof window !== "undefined"

Yo he optado por realizar algo así.

Primero defino la variable para que funcione en las dos versiones gatsby develop y gatsby build.

La defino y le doy el valor que quiera, en este caso le pondré un valor vacio

let params = '';

Luego pregunto si window (la global) esta definida, y en el caso de que esté definida le doy el valor que deberia de tener y en el caso que no esté definida ya va a tener un valor vacio y no va a dar error. 

if (typeof window !== 'undefined')

El código completo sería asi:

let params = '';
if (typeof window !== 'undefined') {
   params = new URLSearchParams(window.location.search); 
}

Esto hará que no tengas problema en ninguno de los dos entornos de compilación o construcción.

Esto me solucionó el error que me daba cuando quería pasar variables entre una url a otra url montado la web de cálculo de IVA , cuando intentaba recuperar las variables de la url en construcción me mostraba el error de que no existia para esa variable global.

Categorías
blog

Añadir fichero robots.txt a Gatsby React

Hola!,


En esta entrada vamos a ver cómo añadir el fichero robots a tu instalación Gatsby.

Para ello lo primero es instalar el plugin directamente desde node o desde yarn.


Puedes hacerlo lanzando uno de los siguientes comandos:

yarn add gatsby-plugin-robots-txt

o bien

npm install --save gatsby-plugin-robots-txt

Después basta con que lo añadas a tu fichero gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        configFile: 'robots-txt.config.js'
      }
    }
  ]
};

En mi caso voy a customizar este fichero porque necesito que algunas de las URL no las indexe Google , por ejemplo no quiero que indexe las URL /tag/

Tendriamos que crear el fichero robots-txt.config.js y añadir ahí la configuración del fichero.

La configuración que le he puesto en ese fichero sería la siguiente:

module.exports = {
    host: 'https://malditawifi.web.app',
    sitemap: 'https://malditawifi.web.app/sitemap.xml',
    policy: [
        {
            userAgent: "Googlebot",
            allow: "/",
            disallow: "/tag",
            crawlDelay: 2,
        },
        {
            userAgent: "*",
            allow: "/",
            disallow: "/tag",
            crawlDelay: 10,
            cleanParam: "ref /articles/",
        },
    ],
};

Y el resultado sería asi:

User-agent: Googlebot
Allow: /
Disallow: /tag/
Crawl-delay: 2

User-agent: *
Allow: /
Disallow: /tag/
Crawl-delay: 10
Clean-param: ref /articles/
Sitemap: https://malditawifi.web.app/sitemap.xml
Host: https://malditawifi.web.app

Una vez que realices el Build verás tu flamante fichero robots.txt generado como le has indicado.

Categorías
blog

¿Qué es Gatsby JS?

Bienvenido! En este artículo vamos a aprender cosas básicas sobre Gatsby JS, qué es y por qué lo usaría.

Así que vamos a empezar con la pregunta, ¿Qué es Gatsby?

En pocas palabras, Gatsby es un generador de sitios estáticos.

¿Qué significa eso?

Vale bien, y ¿Qué es un generador de sitios estáticos?
La parte de sitio estático significa que lo que Gatsby producirá para nosotros son archivos HTML estáticos que cargamos en un servidor.

Ahora bien, esto funciona de manera diferente a como funcionan muchos sitios web donde se visita un sitio web y tiene que ir a consultar una base de datos o hacer algo de programación en el propio servidor con el fin de servir sus páginas web.

Así que Gatsby va a romper esa convención y va a tener todas las cosas ya preconfiguradas de antemano y sólo va a servir eso.

Es importante señalar que los sitios estáticos no significan que no sean interactivos o no sean dinámicos.

Por lo tanto, podemos cargar JavaScript en los archivos HTML que Gatsby sirve, así como hacer que las llamadas a la API hagan interacciones y construyan sitios increíblemente ricos e inmersivos, aunque sean estáticos en su naturaleza de sólo ser archivos HTML servidos sin que se ejecuten lenguajes de programación del lado del servidor, como puede ser Java o Php.

Gatsby también es un generador. Esto significa que Gatsby es en realidad una herramienta que se ejecuta en nuestro ordenador de manera más común, aunque puedes ejecutar Gatsby en un servidor, y va a generar contenido para ti.

En la configuración común que utilizo aquí, ejecutamos Gatsby localmente en nuestro ordenador cuando estamos construyendo un sitio y luego generamos el producto final terminado que Gatsby devolverá en forma de ficheros html y js, que es un sitio estático de Gatsby, y de nuevo esto incluirá imágenes HTML CSS JavaScript todas las cosas que necesitamos para que nuestro sitio funcione, Gatsby lo generará para nosotros así que queremos pensar en Gatsby como una herramienta que nos ayudará a construir un producto final.

Para hacer toda esta generación Gatsby va a usar el Node JS. Node se ejecutará en un entorno de desarrollo en su propio ordenador. Sin embargo la vista final cuando envíes una vista de Gatsby en vivo porque es estática y no necesitará correr Node JS en el propio servidor.

Está usando node para ayudar a generar los archivos como parte de su sistema de herramientas, pero el resultado final no requiere que Node se ejecute en el lado del servidor.

Gatsby JS utiliza GraphQL


Una de las grandes cosas de Gatsby es que va a utilizar el lenguaje de consulta GraphQL para obtener datos de cualquier lugar.

Si no estás familiarizado con GraphQL, es una evolución de cómo hacer las llamadas a la API más simples y eficientes. Y es una herramienta realmente grandiosa en la que probablemente vas a disfrutar entrar si no la conoces ya.

La parte más emocionante de esto es que podemos meter nuestros datos en un sitio de Gatsby desde cualquier lugar!

Podríamos usar archivos de reducción, podemos acceder a bases de datos, podríamos engancharnos a CMS comunes como WordPress y otros CMS, tirar el contenido desde ficheros planos o incluso sólo desde archivos CSV.

Debido a que tenemos Node corriendo en nuestro entorno de desarrollo y tenemos este lenguaje GraphQL, tenemos un enorme rango de habilidades de lo que podríamos utilizar para poder llevar datos a Gatsby.

Es importante recordar que Gatsby no va a manejar nuestros datos por nosotros, sino que hará que los datos sean llevados a Gatsby y generará el sitio a partir de esos datos.

Los usos de Gatsby reaccionan por las plantillas
Gatsby también usa React y CSS, con los que espero que estés familiarizado. React se va a utilizar para todas las plantillas y CSS para el estilo.

Así que, GraphQL traerá nuestros datos, React se encargará de cómo debe verse la plantilla y el estilo es CSS. Luego, finalmente todo será exportado a ese último y súper rápido sitio estático de Gatsby.

Gatsby tiene un rico ecosistema de plugins
También quiero mencionar que Gatsby está construido con una arquitectura de plugins y este es un gran sistema.

Porque lo que estamos sirviendo es un sitio estático y cómo interactuamos con JavaScript y otras cosas puede ser un poco complicado. Así que es muy agradable que podamos sacar este complejo código en plugins y que podamos confiar en un enorme ecosistema de otros autores de plugins para hacer algo del trabajo pesado con cosas comunes para nosotros.

Esta arquitectura de plugins es una gran parte de Gatsby y lo que lo hace tan popular y poderoso.

¿Qué es Gatsby?

Gatsby es un generador de sitios estáticos que utiliza GraphQL para obtener datos, React para plantillas y tiene una arquitectura de plugin.

¿Por qué usar Gatsby?


Ahora hablemos de ¿Por qué usar Gatsby?

En una simple frase, usas Gatsby por su velocidad, seguridad y mejor experiencia de usuario y de desarrollo.

Podría decirse que una de las mayores ventajas que obtienes con Gatsby, porque está generando un sitio estático, va a ser la velocidad.

Va a ser mucho más rápido que muchas de las alternativas, incluso comparado con los sitios en caché que usan WordPress y cosas así, porque ese sitio estático es realmente difícil de superar en términos de velocidad y rendimiento.

También debido a la naturaleza estática y al envío de archivos HTML, esto será inherentemente más seguro.

No hay una base de datos en vivo para hackear o acceder. No hay datos de usuarios que se vayan a almacenar en el servidor con el sitio de Gatsby. Así que incluso si alguien fuera capaz de hackear el servidor en sí, sólo tendrá acceso a los archivos HTML y podrá hacer mucho menos daño que si tuviera acceso, por ejemplo, a un sitio de WordPress o tuviera acceso a los datos del usuario o a la información de la tarjeta de crédito del comprador y todo ese tipo de cosas.

Así que vamos a tener enormes ganancias de seguridad cuando trabajemos con Gatsby.

Finalmente, la tercera gran ganancia con Gatsby es la mejora de la experiencia del desarrollador.

Estoy muy contento de que esto sea algo importante en la comunidad de desarrolladores de hoy en día. Puede ser realmente agotador y molesto para los desarrolladores trabajar con productos anticuados.

Una de las cosas buenas de trabajar con Gatsby es que tienes un entorno de desarrollo moderno. Las herramientas son simples y robustas. Los lenguajes son modernos y limpios. En general, es un entorno realmente genial para trabajar. Eso se extiende también a la comunidad de otros desarrolladores.

Si eres un desarrollador esto debería ser súper claro para ti y emocionante. Si no eres un desarrollador y estás aprendiendo sobre Gatsby a un alto nivel, recuerda que esto es algo que realmente necesitas valorar en tus proyectos: la experiencia general de los desarrolladores.

Gatsby JS es Código Abierto con un equipo de desarollo pagado, por lo que el desarrollo y evolución está más que garantizado.
Lo último que hay que recordar de todo esto es que Gatsby tiene un equipo sólido, una comunidad de código abierto y una gran documentación.

Gatsby es un proyecto de código abierto que tiene grandes logros en términos de su capacidad de crecimiento y la gente contribuye a él. Además es gratis! Eso no es poca cosa.

Sin embargo, a diferencia de algunas comunidades de código abierto, Gatsby también tiene un equipo de profesionales pagados que están ahí para ayudar a que el proyecto de código abierto crezca y florezca.

Esto es algo genial si estás considerando invertir en una tecnología que podría no tener el apoyo a largo plazo, probablemente no tengas que preocuparte por eso con Gatsby.

Documentación de Gatsby


Además, hay una gran documentación y eso es muy útil cuando se trabaja con una herramienta para saber que se le apoyará en la documentación. El equipo de Gatsby parece tomarse esto en serio y hace un gran trabajo con ello.

Una rápida revisión de Gatsby JS


Así que, dicho esto, hagamos un rápido repaso de todo lo que hemos aprendido:

Gatsby es un generador de sitios estáticos que bajo el capó utiliza Node, GraphQL y React.
Sus principales beneficios son la seguridad de la velocidad y la experiencia del desarrollador.
Gatsby tiene una estable y creciente comunidad de desarrolladores y autores de plug-ins

Categorías
blog

Compilar y subir una aplicación Ionic al hosting Firebase

firebase

En esta entrada vamos a ver cómo compilar y subir una aplicación hecha en Ionic al hosting de Firebase .

Es obvio que lo primero tienes que tener creada la aplicación a Ionic antes de todo esto .

Compilando el proyecto para subirlo a Firebase

Desde la linea de comandos de Ionic CLI, al igual que has podido crear la aplicación para iOS o la aplicación para Android tienes que crear la aplicación para el Browser. Qué será la que subiremos al hosting de Firebase.

El siguiente comando lo necesitamos para crear una aplicación

ionic build --prod

Utilizamos –prod si vas a subir la aplicación a tu versión de producción.

Esto generará por defecto el build de nuestra aplicación y lo genera en la carpeta www.

En la configuración de ionic puedes especificar o poner otra carpeta diferente en el caso de que quieras otra carpeta diferente.

Seleccionar el hosting de Firebase

Obviamente para utilizar Firebase tienes que tener una cuenta creada , te vale cualquier cuenta gratuita y puedes utilizar tu Gmail para crear la cuenta

firebase hosting

Crear un proyecto en Firebase Hosting

Lo primero que debes de hacer es crear un proyecto en firebase
Para crear un proyecto te tienes que ir a la consola de firebase y darle a crear proyecto
https://console.firebase.google.com/

En este caso seleccionaremos y utilizaremos cómo proyecto el hosting de Firebase.

Ahora nos vamos a nuestro proyecto a Joanic y si no tenemos instalado Firebase en nuestro npm lanzamos el siguiente comando desde la consola:

npm install -g firebase-tools

Una vez instalado Firebase nos logeamos con el siguiente comando:

firebase login

Ahora iniciamos el proyecto con el siguiente comando

firebase init

firebase deploy app

Después de darle acceso y permitir el acceso desde el proyecto a nuestra cuenta Firebase y haber lanzado el comando de inicializacion nos mostrara las opciones del proyecto:

Seleccionaremos el proyecto tipo hosting le damos a la tecla Enter y nos preguntará que proyecto queremos añadir buscamos el proyecto y volvemos a darle a la tecla Enter.

Nos preguntará que directorio queremos hacerlo público, en nuestro caso le diremos en directorio www

Nos preguntara si lo configura como si single-page app y rescribe todas las URLs a index.html, le diremos que sí

Nos preguntara si rescribe el fichero index.html, y aquí le diremos que no.

Una vez hecho esto habrá creado el fichero firebase.json en el proyecto.

Y finalmente el último paso para poder hacerte Firebase sería lanzar el comando Firebase deploy.

firebase deploy

Y listo con esto tendrás tu flamante aplicación Ionic subida al hosting de Firebase gratuitamente

firebase app
Categorías
blog

Cómo configurar el consentimiento de Cookies GDPR con Gatsby


Cómo ya sabrás el Reglamento General de Protección de Datos (GDPR) impone un par de requisitos a los sitios web en lo que respecta a la recopilación y el procesamiento de los datos de los usuarios.

Si quieres utilizar Google Analytics o Facebook Pixel para «rastrear» a los usuarios sólo puedes utilizarlos poniendo el típico aviso de cookies en tu web y que los usuarios les parezca correcto que les rastrees, o lo que es lo mismo acepten en la barrita de las cookies.

Para hacer que tu sitio Gatsby cumpla con los requisitos, hay dos partes que necesitas implementar.


Para cumplir con la normativa de la GDPR, no se pueden recopilar datos de los usuarios a menos que éstos hayan dado su consentimiento explícito. Cuando se trata de scripts de rastreo eso significa que los scripts no pueden ser activados antes de que el usuario dé el consentimiento.

Para lograr esto hay un plugin de Gatsby que nos facilita todo el trabajo. El plugin gatsby-plugin-gdpr-cookies comprueba dos cookies que controlan si los scripts de Google Analytics o de Pixel de Facebook se pueden activar.

Las cookies tienen el nombre de los scripts gatsby-gdpr-google-analytics y gatsby-gdpr-facebook-pixel. Cuando el valor de estas cookies es verdadero, los scripts se activan.

Puedes instalar el plugin usando npm:

npm install --save gatsby-plugin-gdpr-cookies


Para configurar el plugin pon la configuración en tu gatsby-config.js:

// in your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-analytics', // default
          anonymize: true // default
        },
        googleTagManager: {
          trackingId: 'YOUR_GOOGLE_TAG_MANAGER_TRACKING_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-tagmanager', // default
          dataLayerName: 'dataLayer', // default
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-facebook-pixel', // default
        },
        // defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],
}


Puedes ver los detalles en la página de Gatsby

Recibir el consentimiento del usuario


El usuario puede dar su consentimiento para que se recojan sus datos construyendo su propio formulario y configurando las cookies (gatsby-gdpr-google-analytics y gatsby-gdpr-facebook-pixel).

Si está usando React en su sitio Gatsby, puedes optar por una solución ya hecha , sería utilizar el plugin react-cookie-consent

Este componente de React viene empaquetado en un módulo npm, así que puedes añadirlo a tu proyecto desde yarn o npm, sería así:

npm install --save react-cookie-consent


Después de eso, tienes que añadir el componente en su archivo layout.js para luego añadirlo en el diseño. Es importante que el componente se cargue en todas las páginas para que aparezca en cualquier página que haya visitado el usuario.

Yo he creado el compomente CookieConsent , que voy a llamar desde el footer o header para que se lance en todas las páginas. 

import CookieConsent from "react-cookie-consent";

<CookieConsent
location="bottom"
buttonText="Accept"
declineButtonText="Decline"
cookieName="gatsby-gdpr-google-analytics">

Este sitio usa cookies...
</CookieConsent>

Ahora, desde donde quieras llamarlo tienes que importar el módulo, y luego llamarlo pasándole los datos que le quieras pasar para su correcta ejecución.

En mi caso lo llamo en el footer como he comentado, pero también puedes importarlo y lanzarlo directamente desde el layout que quieras sin tener que crear un componente aparte. 

Y listo , con esto tendrás tu flamante banner con lo de las cookies :)
Categorías
blog

Deploy Gatsby React app en Firebase

Después de crear una aplicación en React el paso final es la implementación desplegando la aplicación correctamente.

Desplegando la aplicación la haremos visible y la pondremos accesible en producción o en el entorno que hayas elegido.

En esta entrada vamos a desplegar nuestra aplicación React utilizando Firebase como hosting. (Exactamente como está montado ahora mismo esta web)

Utilizar Firebase como hosting Deploy

Vamos a ver los tres pasos que tienes que realizar para desplegar tu aplicacion en Firebase.

Estos pasos también funciona para cualquier otra biblioteca o framework como Angular o Vue.

El primer paso sería instalar el CLI de Firebase globalmente en tus módulos de node:

npm install -g firebase-tools


Con una instalación global de Firebase CLI, puedes implementar cualquier aplicación sin preocuparte por la dependencia de tu proyecto.

Cómo cualquier paquete de node que hayas instalado globalmente recuerda que debes actualizarlo de vez en cuando a una versión más nueva con el mismo comando: 

npm install -g firebase-tools

Una vez instalado en node, vamos a logearnos en Firebase, obviamente tienes que tener una cuenta en Firebase, y un proyecto creado que utilizará el hosting, si no lo tienes todavía entonces debes de hacerlo ya!
Vamos a  Firebase y creamos un nuevo proyecto.

Y ahora vamos a asociar Firebase CLI con nuestra cuenta de Google Firebase, para eso lanzamos el siguiente comando:

firebase login

Una vez que realizas el siguiente comando debes de ver una URL en su línea de comando o bien se abrirá tu navegador. Si esto no sucede, Firebase CLI puede abrir la URL automáticamente.

firebase

Elije tu cuenta de Google para crear un proyecto de Firebase y dale a Google los permisos necesarios. Deberías de ver una confirmación desde Google diciendo que tu configuración es correcta. Regresa a la línea de comandos para verificar que te has logeado correctamente.

A continuación, vamos a la carpeta del proyecto y ejecutamos el siguiente comando, que inicializa un proyecto de Firebase que se pueda usar como hosting de Firebase:

firebase init


Elije la opción de Hosting.

elegir hosting firebase


Como Google conoce los proyectos de Firebase asociados con tu cuenta después de iniciar sesión, puedes seleccionar tu proyecto de Firebase de una lista de proyectos de la plataforma Firebase:

Hay algunos pasos de configuración que puedes definir. En lugar de usar la carpeta public como predeterminada, en mi caso vamos a utilizar la carpeta public, así lo que dejamos tal y como está. Si configuras el paquete con una herramienta como Webpack, puedes elegir el nombre apropiado para la carpeta de compilación:

La aplicación de React crea una carpeta después de realizar la compilación npm run build por primera vez. En esta carpeta encontrarás todo el contenido dentro de la carpeta public , que será la carpeta que vas a realizar el deploy

En mi caso que estoy subiendo un proyecto Gatsby lanzo el comando Gatsby build para ver lo que genera y ver que todo está en orden.

gatsby build

Una vez que acaba de generar la web lanzo el siguiente comando para realizar el deploy en Firebase. 

firebase deploy

Ahora, después de lanzar el comando Firebase te dirá que todo está ok, y podrás ver tu proyecto en la página de tu proyecto seguido de web.app o seguido de firebase.com , o bien en el dominio customizado que hayas puesto desde Firebase.

En mi caso puedes ver el proyecto en el dominio malditawifi.web.app
Y listo ya tendrás tu web desplegada en Firebase.

Cualquier duda puedes dejar un comentario

Categorías
blog

Crear Sitemap en tu web Gatsby

sitemap

Hola!

En esta entrada vamos a ver como añadir un sitemap a tu web hecha con Gatsby, este sitemap te vale para cualquier proyecto hecho con Gatsby da igual si tu web está conectada a un wp o coge los datos de un xml , json etc etc.

Tener un Sitemap de tu web es útil para el SEO. A la hora de que los buscadores indexen tu sitio y no se pierdan es util que tengas un sitemap.

sitemap

Afortunadamente para ti, añadir un mapa a un proyecto de Gatsby es increíblemente fácil! muy muy simple.

Instalación

Este post asume que ya tienes un proyecto de Gatsby configurado, y que estás listo para editarlo. Si necesitas ayuda para llegar a ese punto, por favor sigue el tutorial de introducción en el post de crear una web con Gatsby

Instalar el plugin

Como probablemente te darás cuenta más temprano que tarde, ¡hay un montón de plugins útiles y oficiales de Gatsby! Siempre es una buena idea mirar a través de la sección de plugins en el sitio oficial cuando se construyen nuevos proyectos. Para nuestro mapa del sitio, haremos uso de un plugin oficial gatsby-plugin-sitemap.

Esta es la única nueva dependencia que estamos añadiendo a nuestro proyecto, así que vamos a añadirla así:

$ npm install gatsby-plugin-sitemap

Añade el plugin a tu configuración de Gatsby:

Y ahora todo lo que queda por hacer es añadir el plugin de sitemap a nuestro archivo gatsby-config.js, y opcionalmente configurarlo.

Antes de añadir el plugin, tenemos que asegurarnos de que el objeto siteMetadata tiene un valor siteUrl válido:

Editamos el fichero gatsby-config.js

siteMetadata: {
  siteUrl: `https://www.codifica.me`, 
},


Importante: ¡No te saltes este paso! Por defecto, este plugin usa el valor ‘siteMetadata’ para construir las urls de su mapa de sitio.

A continuación, un poco más abajo dentro del archivo gatsby-config.js, añadimos el plugin en nuestro array de plugins.

plugins: [
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: `./sitemap.xml`,
      exclude: [`/otras`]
    }
  },
]

La forma más fácil de añadir el plugin no implica ninguna configuración extra, y creará automáticamente los elementos del mapa de sitio para cada página de nuestro sitio. Este ‘método sin configuración’ incluye todas las páginas, por lo que igual necesitas un poco de configuración adiccional.

Opciones de configuración


De acuerdo con la documentación del plugin, hay varias opciones disponibles para personalizar la generación de nuestro mapa del sitio.

consulta: (Consulta GraphQL) Esta es una consulta GraphQL utilizada para obtener los datos necesarios para generar el mapa del sitio. Se utiliza por defecto para obtener el valor site.siteMetadata.siteUrl que hemos establecido anteriormente, y todas las páginas disponibles. La consulta por defecto tiene este aspecto, y rara vez necesitarás añadir mas cosas:

query: `
  {
    site {
      siteMetadata {
        siteUrl
      }
    }
    allSitePage {
      edges {
        node {
          path
        }
      }
    }
}`

Conclusión

Los sitemaps son una parte importante de cualquier sitio web para la correcta indexación en los motores de búsqueda, y especialmente para los sitios más nuevos con un bajo número de backlinks. Es un paso que a menudo se pasa por alto, pero puede acelerar drásticamente el proceso de indexación y que así tu sitio web salga antes en los buscadores.

Afortunadamente, con Gatsby y sus increíbles plugins de sitemaps, podemos añadir sitemaps a nuestros proyectos en poco tiempo!

Categorías
blog

Crear una web con Gatsby y WordPress (Paso 1)

gatsby-image

Hola!

Hace un montón que no subo nada al blog, y como llevo unos meses viendo Gatsby js me he puesto a escribir este mini tuto de cómo crear una pagina simple (spa) con Gatsby .

Instalarlo es sencillo, vamos a utilizar npm (Node Package Manager) como gestor de paquetes y librerías con lo que instalaremos Gatsby.

Sería así:

npm install --global gatsby-cli

Hecho esto crear una página con Gatsby es así de simple

gatsby new gatsby-site

Y ahora vamos a levantar el servidor local para ver lo que hecho. 

gatsby develop

Podemos ver que la salida de los comandos nos muestra la url del servidor local, que sería la siguiente
http://localhost:8000

gatsby ini

Y aquí podríamos ver la flamante página que hemos creado.

Entrando en http://localhost:8000 puedes ver la página de presentación de Gatsby.

Se verá los siguiente:

Con esto ya podemos cerrar la computadora y bajar a celebrarlo. 😉