Construye y publica tu blog personal con Gatsby 2.0 y Netlify, parte 1
Tags: javascript, react, graphql, gatsby
Published: 2020-05-18 20:41:14

En esta serie de artículos quiero enseñarte como armar un blog de manera muy sencilla. 

En tiempos de sitios com [Dev.to](https://dev.to/) y [Medium](https://medium.com/) 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](https://es.wikipedia.org/wiki/Software_como_servicio) 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.

```bash
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:

```bash
npm run develop
```

Dale unos segundos y en cualquier navegador que tengas instalado en tu sistema, navega a [http://localhost:8000/](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/`.

```jsx
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](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/html), [head](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/head) y [body](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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:

```jsx
import React from "react";

export default () => <h1>Sobre</h1>;
```

y

```jsx
import React from "react";

export default () => <h1>Contacto</h1>;
```

Modifica también `index.js` para que se parezca a:

```jsx
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:

```bash
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](http://localhost:8000/sobre) y deberías ver la palabra “Sobre” con los estilos del elemento [h1](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos) de tu navegador. Lo mismo debería suceder si te vas a [http://localhost:8000/contacto](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:

```jsx
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.

```jsx
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](https://www.codementor.io/@n370) conmigo. ¡los primeros 15 minutos son de regalo! ¿Encontraste algún error o tienes una sugerencia? Deja tu comentario 👇. ¡Muchas gracias!