En los últimos tiempos, los sitios de desarrollo estático han ganado popularidad. Esto se debe a que son rápidos, seguros y simples. Gatsby destaca dentro de este movimiento como un Generador de Sitios Estáticos (SSG). Es conocido por su velocidad gracias a tecnologías como React y GraphQL.
Además, estos sitios hechos con Gatsby son veloz y eficientes. Esto vale tanto durante su desarrollo como una vez están en funcionamiento.
La gente, empresas e incluso tecnologías como React.js Documentación Oficial, Blog personal de Dan Abramov (overreacted.io) y Página web de Kent C. Dodds han elegido Gatsby. Este generador les permite crear sitios rápidos y seguros.
Tiene la ventaja de poder integrar distintas fuentes de información. Puede conectarse con CMS como WordPress o ‘Sanity.io’, APIs, servicios y hasta bases de datos como Firebase. Una de las mejores partes de usar Gatsby es que mantiene tu información segura. No hace peticiones ni almacena información peligrosa al ser publicado.
Puntos clave:
- Gatsby es un framework open source que integra React y GraphQL para crear aplicaciones web rápidas.
- Gatsby permite conectar con diferentes fuentes de datos, como CMS, APIs y bases de datos.
- Gatsby se destaca por su velocidad y seguridad, ya que recolecta la información del sitio sin hacer peticiones en producción.
- Gatsby es muy popular y ha sido adoptado por empresas y desarrolladores líderes en la industria.
- Crear un blog con Gatsby y Markdown es una solución eficiente y escalable.
¿Qué es Gatsby?
Gatsby es un framework de código abierto que usa React para hacer páginas web muy rápidas. Actúa como un constructor que cuida de cosas importantes desde el inicio. Por ejemplo, ayuda con SEO, accesibilidad y mejora el rendimiento de las páginas. Así, hacer páginas web que estén listas rápido es más fácil que solo con React. Combina herramientas como React y GraphQL. Esto hace que las páginas no solo sean rápidas mientras se crean, también lo son cuando se ven.
| Tecnología | Descripción |
|---|---|
| Gatsby | Framework basado en React que ayuda a crear sitios web y aplicaciones web rápidos |
| React | Biblioteca de JavaScript para construir interfaces de usuario |
| GraphQL | Lenguaje de consulta y entorno de ejecución para API, utilizado por Gatsby para interactuar con los datos |
| Generador de sitios estáticos | Herramienta que compila el sitio web en archivos HTML, CSS y JavaScript estáticos antes de la publicación |
| SEO | Optimización de un sitio web para que sea visible y relevante en los motores de búsqueda |
| Accesibilidad | Diseño de un sitio web para que pueda ser utilizado por personas con discapacidades |
| Optimización del rendimiento | Mejora de la velocidad y eficiencia de un sitio web |
Crear un Blog con Gatsby y Markdown
Para empezar con Gatsby, tenemos dos opciones. Podemos usar Starters o comenzar desde cero. La manera más rápida es usando Starters. Solo necesitas elegir uno y listo. También, está el gatsby-starter-default para empezar de forma simple.
Pasos para iniciar un proyecto con Gatsby
Iniciar «a mano» significa más trabajo. Tendrás que instalar React y Gatsby, además de crear varios archivos. Algunos de estos son gatsby-config.js, gatsby-node.js, gatsby-browser.js y gatsby-ssr.js. Con estos, puedes configurar muchas cosas, como metadatos, qué plugins usar y páginas dinámicas.
Usando Starters
Empezar con un Starter hace todo más fácil. Solo encuentra uno que se adecue a tus necesidades y instálalo.
Configurando Gatsby
Para personalizar tu proyecto, usa los archivos de configuración de Gatsby. Con gatsby-config.js, gatsby-node.js, gatsby-browser.js y gatsby-ssr.js, puedes ajustar metadatos, plugins y páginas al gusto.
Plugins en Gatsby
En Gatsby, los plugins son como herramientas creadas por la gente. Ayudan a poner a punto tu aplicación. A diferencia de WordPress, no ralentizan tu sitio. Esto es porque Gatsby convierte todo tu código previamente.
Plugins utilizados para este proyecto
Para nuestro proyecto vamos a emplear varios plugins. Algunos ejemplos son gatsby-source-filesystem y gatsby-transformer-remark. También usaremos gatsby-plugin-sitemap y gatsby-plugin-image. Estos plugins mejora el manejo de contenido en Markdown. Ademas, ayudan a optimizar imágenes, crear mapas de sitio, y más.
| Plugin | Función |
|---|---|
| gatsby-source-filesystem | Permite leer archivos Markdown y otras fuentes de contenido |
| gatsby-transformer-remark | Transforma los archivos Markdown en datos que Gatsby puede usar |
| gatsby-plugin-sitemap | Genera un mapa del sitio para una mejor indexación por buscadores |
| gatsby-plugin-react-helmet | Facilita la gestión de los metadatos de la página |
| gatsby-plugin-image | Optimiza las imágenes para una carga más rápida |
| gatsby-plugin-sass | Permite usar Sass para los estilos del sitio |
Generando páginas a partir de Markdown
Para hacer páginas de archivos Markdown, usamos gatsby-node.js. Usamos onCreateNode para sacar el slug de cada Markdown. Luego, createPages hace consultas GraphQL y crea páginas con ese slug y un diseño de blog.
Creando nodos en gatsby-node.js
Usamos onCreateNode para extraer el slug de cada Markdown. Luego, lo añadimos a los nodos. Así, cada archivo Markdown tendrá su URL única.
Generando páginas con createPages
Después de tener el slug en los nodos, toca crear las páginas. Con createPages, hacemos consultas para los blogposts. Así, se crean las páginas usando un diseño especial.
Creando un template para las páginas de blogposts
Un diseño especial en React llena las páginas de blogposts. Este diseño lo guardamos en src/templates. Y se usa en createPages para hacer los blogs.
Listando las publicaciones en la página principal
Crear una página para cada blogpost es clave. Pero, esencial también es mostrar todas las publicaciones principales en la página principal. Para eso, usaremos una consulta GraphQL en el inicio del sitio.
Esta consulta permitirá ver todos los blogposts. Aparecerán en un listado con un enlace a cada uno. Así, los visitantes podrán llegar fácil a la página de cada blogpost.
| Características | Valores |
|---|---|
| Generador de sitios estáticos | Gatsby |
| Lenguaje principal | JavaScript |
| Integración con GraphQL | Sí |
| Optimización de rendimiento | Altamente optimizado |
| Plataformas de hospedaje | GitHub Pages, Netlify |
Configurando un CMS con Netlify
Vamos a añadir Netlify CMS para editar fácilmente el blog. Es un CMS usado con sitios estáticos como Gatsby. Necesitamos poner una carpeta «admin» en «static». En ella, va un index.html que llama a Netlify CMS. También un config.yml para ajustar las colecciones, como la de los blogposts.
Configuración de la carpeta Admin
Lo primero, creamos una carpeta «admin» en «static». Ahí colocaremos un index.html que activa Netlify CMS.
Configurando colecciones
En la carpeta «admin», creamos un config.yml. Esto sirve para indicar las colecciones que tendremos, como la de «entradas de blog». Esta colección incluirá info básica como título, fecha de publicación, y el texto del post.
Autenticación en el código
Además de la carpeta «admin» y sus ajustes, pondremos código para autenticar usuarios. Esto va en la carpeta «admin» y en index.js del sitio.
Deployment en Netlify
Usaremos Netlify para publicar el sitio y dejarlo en línea. Será fácil y nos da SSL gratis.
Autenticación en Netlify
Por último, configuraremos la autenticación con Netlify. Se hace desde el panel, activando Identity y Git Gateway. Así, decidimos si el CMS será privado o público.
Personalización adicional
Además de hacer funcionar el blog, podemos añadir más cosas para mejorar nuestro sitio web. Podemos hacerlo mejor en internet, ser más fáciles de encontrar en buscadores y más accesibles para todos.
Para que las páginas se carguen más rápido, Gatsby tiene muchas herramientas útiles. Por ejemplo, podemos dividir y cargar los códigos necesarios. También podemos preparar de antemano los recursos que necesitarán los usuarios o ajustar las imágenes para que pesen menos.
Mejorar el SEO es fácil con Gatsby. Podemos crear automáticamente cosas como los metadatos y los mapas del sitio. Esto ayuda a que nos encuentren mejor en Google.
Gatsby se preocupa por la accesibilidad también. Ofrece formas de hacer nuestro sitio amigable y fácil de usar para todos, incluso para quienes necesitan herramientas de asistencia. Con ciertos plugins, es aún más sencillo lograrlo.
Otra ventaja de Gatsby es que podemos hacer nuestro blog muy atractivo visualmente. Podemos añadir servicios y funciones especiales para blogs. Su flexibilidad nos permite adaptarlo como queramos, haciéndolo único y perfecto para lo que necesitamos.
Conclusión
En este tutorial, hemos visto cómo crear un blog. Lo hicimos rápido, seguro y fácil de ampliar. Usamos Gatsby, Markdown y Netlify CMS. Aprendimos a configurar Gatsby y generar páginas desde archivos Markdown.
También aprendimos a listar las publicaciones en la página principal. Eso fue gracias a la integración de un CMS. Gatsby es muy útil para crear sitios y aplicaciones web. Se enfoca en ser rápido, seguro y optimizado.
En este proyecto conocimos Gatsby más. Usamos React y GraphQL para hacer nuestra aplicación web aún mejor. El uso de Markdown para el contenido fue muy útil. Y la inclusión de Netlify CMS facilitó mantener el blog actualizado.
En resumen, vimos que Gatsby es genial para hacer blogs y sitios web. Es bueno en performance, seguridad y optimización. Al usar Gatsby, Markdown y Netlify CMS, hacemos una solución fuerte para nuestro blog.
FAQ
¿Qué es Gatsby?
¿Cómo puedo iniciar un proyecto con Gatsby?
¿Qué son los plugins en Gatsby?
¿Cómo se generan las páginas a partir de archivos Markdown?
¿Cómo se listan las publicaciones en la página principal?
¿Cómo se integra Netlify CMS en un proyecto Gatsby?
Enlaces de origen
- https://davidinformatico.com/crear-blog-gatsby/
- https://kinsta.com/es/blog/gatsby/
- https://platzi.com/blog/construye-tu-blog-con-react-gatsby-markdown/
- https://www.escuelafrontend.com/como-crear-un-blog-con-next-js
- https://chernando.xyz/aprendiendo-gatsby-con-starter-blog/
- https://lasfi.to/tutoriales/guia-gatsby-blog-netlify/
- https://www.freecodecamp.org/espanol/news/manual-de-next-js/
- https://kinsta.com/es/blog/bibliotecas-de-componentes-react/
- https://docs.astro.build/es/guides/migrate-to-astro/from-nextjs/
- https://fmontes.com/es/blog/how-i-built-my-portfolio-with-gatsby-and-reactjs