Construye y Publica Tu Blog Personal con Gatsby y Netlify, parte 1
¡ATENCIÓN! Lo que vas a leer a seguir NO es totalmente compatible con la nueva versión de Gatsby 2.0. Encuentra aquí la versión actualizada.
En esta serie de artículos quiero enseñarte como armar un blog de manera muy sencilla utilizando dos herramientas abiertas disponibles en la web. En tiempos de Medium puede parecer una futilidad que uno tómese el trabajo de hacerse su propio blog, sin embargo hacerlo resulta en tremenda oportunidad para aprender muchísimas cosas y expresarse libremente en la web.
Estaremos viendo juntos un conjunto de tecnologías como por ejemplo React y GraphQL, consideradas hoy día la vanguardia en el universo del desarrollo Web. Veremos también algunos de los servicios que ofrece Netlify, un SaaS que te ayuda a publicar tu sitio y agregar certificados SSL a tus dominios personalizados de manera muy sencilla.
Empecemos por descargar e instalar Node.js. Una vez instalado, abramos nuestras consolas y corramos el siguiente comando para también instalar el módulo gatsby en nuestro sistema.
npm install -g gatsby-cliGatsby 101
Gatsby entra en la categoría de lo que se conoce como generadores de sitios web estáticos. Sabemos que para hacer una página web basta un editor de texto y un navegador. Sin embargo cuando este sitio empieza a crecer, tornase muy complicado mantenerlo ya que mucho del contenido de esos archivos se repite. La idea entonces es tener una rutina que reduzca la necesidad de duplicar partes del código fuente. Menos código, menos problemas y más tiempo para enfocarte en crear el contenido y el estilo de tu página.
Vaya a cualquier directorio de tu sistema en el cual tengas permisos para crear, borrar y modificar archivos y desde ahí corre el siguiente comando para inicializar un nuevo proyecto Gatsby desde lo más básico.
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-hello-world.gitEntra al directorio blog creado por el comando que ejecutamos recién y pincha:
gatsby developDale unos segundos e yendo en tu máquina al porto 8000 de localhost, por defecto deberías poder ver el mensaje “Hello world!”.
Pages y Layouts
Abra la carpeta blog en tu editor de texto y luego busca el archivo index.js adentro del directorio src/pages.
import React from "react"export default () => <div>Hello world!</div>
Tu Index es un componente React y es apenas eso. Me preguntas dónde están los elementos doctype, html, head y body. De esto se encarga Gatsby que los agrega y soluciona de entrada nuestro problema de duplicación.
Crea ahora dos archivos más en la carpeta pages nombrándolos sobre.js y contacto.js. Copia y pega todo el código que hay en index.js adentro de esos dos archivos y modifica cada uno de ellos para que la función default sea respectivamente:
export default () => <h1>Sobre</h1>y
export default () => <h1>Contacto</h1>Modifica index.js también para que sea:
export default () => <h1>Início</h1>Asegúrate de que el servidor de desarrollo esté vivo y anda a tu navegador. Refresca la página y caso sigas viendo el mensaje “Hello world!” anda a tu consola y reinicia el servidor utilizando el comando que vimos al inicio.
gatsby developEn general, al correr este comando uno no tiene la necesidad de volver a ejecutarlo. Para ver los cambios basta salvar el archivo modificado y refrescar el navegador. Hay sin embargo algunas situaciones en las que si tienes que volver a ejecutarlo, como cuando por ejemplo le agregas a tu proyecto un archivo de configuración. Ya veremos cómo se hace eso.
Anda a localhost:8000/sobre y deberías ver la palabra “sobre” con los estilos del elemento h1 de tu navegador. Lo mismo sucede si te vas a localhost:8000/contacto y localhost:8000. Date cuenta que tienes URLs limpias, es decir, no estás levantando un archivo html sino que estás accediendo a un componente React ruteado desde el cliente. 😎
Estaría bueno entonces tener una manera de navegar entre estas distintas páginas. Aquí otra vez vamos a ver en la práctica los beneficios que uno tiene al trabajar con generadores de sitios estáticos. En una situación trivial estaríamos tratando de agregar a cada una de las distintas páginas de nuestro sitio, básicamente un monte de archivos html, el mismo bloque de código que podría ser por ejemplo un menu de navegación horizontal en el topo de cada una de esas páginas. Con Gatsby entretanto tenemos lo que se llama layout.
Layouts son componentes React que Gatsby procesa de manera especial y que sirven exactamente para eso, compartir bloques de código con múltiplas pages. Menos código, menos trabajo y más tiempo para enfocarte en crear el contenido y el estilo de tu página.
Creemos entonces un layout para que tus usuarios puedan navegar entre las diferentes páginas sin tener que escribir las URLs en sus navegadores. Adentro de la carpeta src agrega una nueva carpeta llamada layouts. En seguida, adentro de la nueva carpeta src/layouts agrega un nuevo archivo llamado index.js. Finalmente agrega a este este nuevo archivo lo siguiente:
import React from "react";const styles = {
margin: '0 auto',
maxWidth: 650,
border: '1px solid black',
padding: '0 1rem'
};export default ({ children }) => (
<div style={styles}>
<header><h2>Gatsby rocks!</h2></header>
<main>{children()}</main>
</div>
);
Anda a la consola y reinicia el servidor de desarrollo. Luego abre tu navegador y visita localhost:8000. Prueba agregando /sobre o /contacto a la URL y comprueba como todas las páginas ahora comparten el texto “Gatsby rocks!” y los estilos que agregamos a nuestro layout en src/layouts/index.js.
¡Listo! Llegamos a la mitad del camino en esta tarea de crear un menu de navegación. Ya tenemos nuestro layout lo cual todas nuestras páginas comparten y ahora vamos a agregarle enlaces que permitan al usuario navegar desde la propia interfaz del sitio web.
Diseño modular
Siguiendo los mismos pasos de Jekyll, otro proyecto que entra en esa clase de software conocida como generadores de sitios web estáticos, Gatsby introduce un conjunto de convenciones, módulos y una API pública que lo hacen extremamente flexible.
Uno de estos módulos se llama gatsby-link, que ya instalamos cuando inicializamos nuestro proyecto. Nos queda solamente el trabajo de importar los objetos que este módulo exporta. Nuevamente, estos objetos son apenas componentes React que implementan la lógica necesaria para que Gatsby sepa navegar correctamente entre las diferentes páginas de nuestro sitio.
Sin más demora abramos de vuelta en nuestro editor de texto el archivo index.js que creamos en la carpeta src/layouts. Modifiquemos su contenido para que se vea de la siguiente forma:
import React from "react";
import Link from "gatsby-link";const styles = {
listItem: {
display: 'inline-block',
marginRight: '1rem'
},
menu: {
margin: '0 auto',
maxWidth: 650,
border: '1px solid black',
padding: '0 1rem'
},
header: {
marginBottom: '1.5rem'
},
siteTitleLink: {
textShadow: 'none',
backgroundImage: 'none'
},
siteTitle: {
display: 'inline'
},
list: {
listStyle: 'none',
float: 'right'
}
};const ListLink = props => (
<li style={styles.listItem}>
<Link to={props.to}>{props.children}</Link>
</li>
);export default ({ children }) => (
<div style={styles.menu}>
<header style={styles.header}>
<Link to="/" style={styles.siteTitleLink}>
<h3 style={styles.siteTitle}>Mi blog</h3>
</Link>
<ul style={styles.list}>
<ListLink to="/">Início</ListLink>
<ListLink to="/sobre/">Sobre</ListLink>
<ListLink to="/contacto/">Contacto</ListLink>
</ul>
</header>
<main>{children()}</main>
</div>
);
¡Voila!
A esa altura tu también debe tener corriendo en tu navegador una página web totalmente funcional aunque poco interesante. En los próximos artículos extenderemos este ejemplo para que soporte contenido externo, es decir, desacoplado de la lógica de los componentes.
Estos datos serán integrados automáticamente y de manera dinámica al sitio cada vez que agreguemos, removamos o modifiquemos los mismos. Veremos como Gatsby soluciona este problema a través de su arquitectura modular orientada a plug-ins y construida sobre lo que hoy día hay de más moderno en cuanto a manejo de datos para la Web.
¿Necesitas ayuda? Agenda una sesión en vivo conmigo. ¡los primeros 15 minutos son de regalo! ¿Encontraste algún error o tienes una sugerencia? Deja tu comentario 👇. ¡Muchas gracias!
