En esta serie de artículos quiero enseñarte como armar un blog de manera muy sencilla.
En tiempos de sitios com Dev.to y Medium puede parecer una pérdida de tiempo 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.
Trabajeremos juntos con un conjunto de tecnologías consideradas hoy día la vanguardia en el universo del desarrollo Web. Veremos también algunas de las herramientas que ofrece Netlify, un SaaS que nos ayudará a publicar el resultado del proyecto que contruiremos en esta serie.
Gatsby 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 simples archivo texto HTML. 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 como mínimo 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 la cara de tu página.
Asumo que a esta altura ya tienes instalado y configurado en tu sistema las herramientas básicas que vas a necesitar para trabajar con Gatsby, es decir, minimamente, Node.js (node, npm, npx) y Git (git). Empieza navegando 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.
npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-hello-world.git
Cambia al directorio blog/ creado por el comando que ejecutamos recién y en seguida pincha:
npm run develop
Dale unos segundos y en cualquier navegador que tengas instalado en tu sistema, navega a http://localhost:8000/ para ver el mensaje Hello world! en pantalla.
En el navegador Firefox puede ser que veas el mensaje de error Unhandled Rejection (SecurityError): The operation is insecure.
Ignoralo pinchando con el ratón la cruz que se ve en el canto superior derecho del mensaje de error.
Pages y Layouts
Abre la carpeta blog/ en tu editor de texto y 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 html, head y body. De esto se encarga Gatsby que los agrega por nosotros solucionando ya de entrada parte de nuestro problema de duplicación.
Crea ahora dos archivos más en la carpeta src/pages/ nombrándolos sobre.js y contacto.js. Copia y pega todo el código que hay en src/pages/index.js adentro de esos dos nuevos archivos y modifica cada uno de ellos para que respectivamente se parezcan a:
import React from "react";
export default () => <h1>Sobre</h1>;
y
import React from "react";
export default () => <h1>Contacto</h1>;
Modifica también index.js para que se parezca a:
import React from "react";
export default () => <h1>Início</h1>;
Asegúrate de que el servidor de desarrollo esté corriendo 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:
npm run develop
Para ver los cambios, en general basta salvar el archivo modificado y refrescar el navegador. Hay sin embargo algunas situaciones en las que si tienes que volver a iniciarlo, como cuando por ejemplo le agregas a tu proyecto un archivo de configuración. En los próximos artículos de la serie veremos cómo y para qué se hace eso.
Anda a http://localhost:8000/sobre y deberías ver la palabra “Sobre” con los estilos del elemento h1 de tu navegador. Lo mismo debería suceder si te vas a http://localhost:8000/contacto. Date cuenta que tienes URLs limpias, es decir, no estás levantando un archivo HTML sino que estás activando y desactivando componentes React controlados desde el cliente. 😎
Layouts
Navegar de esta manera no es lo que uno tiende a considerar una buena idea, así que el siguiente paso es agregarle al sitio una manera mejor de navegar entre sus distintas páginas. Aquí otra vez veremos en la práctica los beneficios que uno tiene al trabajar con generadores de sitios estáticos como Gatsby.
En una situación normal estaríamos tratando de agregar a cada una de las distintas páginas del sitio, básicamente un monte de archivos HTML, copias del mismo bloque de código que podría ser por ejemplo un menu de navegación horizontal. Pero con Gatsby podemos crear un único componente React que contiene el código específico del menu de navegación para ser reutilizado en todas las páginas que lo requieran.
Create entonces un componente de este tipo para que tus usuarios puedan navegar entre las diferentes páginas sin tener que escribir manualmente las URLs en sus navegadores. Adentro de la carpeta src/ agrega una nueva carpeta llamada components/ y en seguida, adentro de la nueva carpeta src/components/, agrega un nuevo archivo llamado layout.js. Finalmente agrega a este este nuevo archivo lo siguiente:
import React from "react";
import { Link } from 'gatsby';
export default ({ children }) => (
<div>
<header>
<ul>
<li>
<Link to="/">Início</Link>
</li>
<li>
<Link to="/sobre">Sobre</Link>
</li>
<li>
<Link to="/contacto">Contacto</Link>
</li>
</ul>
</header>
<main>{children}</main>
</div>
);
Modifica también src/pages/index.js, src/pages/sobre.js y src/pages/contacto.js para que se parezcan a lo que sigue. Recuerda además cambiar el texto que va adentro del elemento h1 en cada uno de ellos.
import React from "react";
import Layout from "../components/layout";
export default () => <Layout><h1>Início</h1></Layout>;
Guarda todos los cambios y anda a tu navegador.
¡Voila!
A esa altura tu también debe tener corriendo en tu allí una página web totalmente funcional aunque poco interesante. En los próximos artículos extenderemos este ejemplo agregándole contenido de verdad. Veremos como hacerlo con Gatsby, su arquitectura modular orientada a plug-ins y construida sobre lo que al 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!
Oldest comments (0)