Como crear un blog en 5 minutos
Tags: javascript, gatsby, spanish, html
Published: 2020-09-06 05:27:46

Ante de empezar a crear nuestro blog vamos a revisar algunos conceptos y puntos claves acerca de las tecnologías que vamos a usar.

# ¿Qué es JAMStack?

Stack se refiere a una "pila" de tecnologías para crear un sitio web, un ejemplo de stack clásico es [LAMP Stack](https://en.wikipedia.org/wiki/LAMP_%28software_bundle%29) que utiliza Linux, Apache, Mysql y PHP. Donde Linux es el sistema operativo donde está alojado el sitio, Apache es el servidor web, Mysql es la base de datos y PHP es el lenguaje para crear web dinámicas. 

JAMPStack es un Stack que utiliza Javascript, API's y Markdown en palabras del autor del término 
> “Una arquitectura de desarrollo web moderna basada en JavaScript del lado del cliente, API reutilizables y Markdown prediseñado "
— Mathias Biilmann (CEO & Co-founder of Netlify).

Esto quiere decir que usaremos Javascript como lenguaje para crear nuestro sitio que se comunicará con API's, nuestras páginas estarán escritas en Markdown que posteriormente serán compiladas para construir nuestro sitio productivo.

Cómo dice en el sitio oficial de [JAMStack](https://jamstack.org):
> Sitios y aplicaciones rápidos y seguros entregados mediante la representación previa de archivos y su servicio directamente desde un CDN, eliminando el requisito de administrar o ejecutar servidores web.  

En este [articulo](https://medium.com/@maicolduque01/qu%C3%A9-es-el-jamstack-ad7a60d2736f) puedes leer más acerca JAMStack.

# ¿Qué es Stackbit?
Es una plataforma para sitios JAMStack, [Stackbit](https://www.stackbit.com/) facilita la creación ya que integra herramientas como [Github](https://github.com/), [Netlify](https://www.netlify.com/), [Gatsby](https://www.gatsbyjs.com/), [Contentful](https://www.contentful.com/) y muchas más. 

# Creación del sitio

## Primeros pasos
Nos registramos en Stackbit y [creamos un nuevo proyecto](https://app.stackbit.com/create).

Después seleccionamos un tema para nuestro sitio, también podemos agregar un tema propio [(ver documentación)](https://docs.stackbit.com/uniform/).

![](https://dev-to-uploads.s3.amazonaws.com/i/18v1lzehnl23os8l9w4h.png)

Seleccionamos un generador de sitios entre [Gatsby](https://www.gatsbyjs.com/), [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/) o [Next.js](https://nextjs.org/), en nuestro caso usaremos **Gatsby**.

![](https://dev-to-uploads.s3.amazonaws.com/i/x6hsnsbt2x3uwthhaw0w.png)

Ahora seleccionamos un sistema de administración de contenido (CMS) que es una aplicación que se utiliza para crear y administrar el contenido de nuestro sitio.
Los CMS disponibles son [Sanity](https://www.sanity.io/), [Contentful](https://www.contentful.com/), [Git](https://git-scm.com/), [Netlify](https://www.netlify.com/), [Dato CMS](https://www.datocms.com/) o [Forestry](https://forestry.io/). Podemos elegir dependiendo del sitio que vayamos a crear, como solo en nuestro caso es un blog pequeño usaremos **Git** que es el que viene por default. 
![](https://dev-to-uploads.s3.amazonaws.com/i/x84img29iy6z4cautk7c.png)

Por último seleccionamos un nombre para nuestro sitio y conectamos una cuenta de [Github](https://github.com/) a Stackbit. Y creamos el sitio.
![](https://dev-to-uploads.s3.amazonaws.com/i/993h9ca0z4daokwqs6p7.png)

## Personalizar nuestro sitio
En el dashboard de stackbit veremos nuestro sitio.
![](https://dev-to-uploads.s3.amazonaws.com/i/993h9ca0z4daokwqs6p7.png)

### Modificar el sitio desde CMS
Damos clic en el botón **Open** para abrir el CMS, como en el tutorial elegimos Git nos debe aparecer el siguiente dashboard.
![](https://dev-to-uploads.s3.amazonaws.com/i/993h9ca0z4daokwqs6p7.png)

Desde aquí podemos editar el contenido de nuestro sitio, podemos agregar post a nuestro blog editar las páginas principales, etc. Para publicar un cambio antes debemos de transferirnos el repositorio que stackbit creó para nuestro sitio, para esto nos debió de llegar un correo con las instrucciones.

El CMS trabaja en la rama de **review** y solo podemos hacer cambios de manera loca para que nuestros cambios se vean reflejados al sitio de producción debemos de agregar los cambios a la rama **master**.

### Modificar la estructura del sitio
Como sabemos un [CMS](https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_contenidos) nos sirve para administrar el contenido en nuestra página web, si queremos hacer cambios más avanzados como en el estilo o la estructura general debemos editar el código del sitio.

#### Ejecución de nuestro sitio de manera local  

En el dashboard del CMS damos clic en el botón **settings** nos aparecerá el siguiente menú. Descargamos el repositorio y copiamos la  **stackbit-api-key**.
![](https://dev-to-uploads.s3.amazonaws.com/i/993h9ca0z4daokwqs6p7.png)

1. Descargamos el repositorio a nuestra máquina 
2. Seguimos las instrucciones del archivo README.md

Ahora ya podemos hacer cambios a nuestro proyecto y publicarlos en el sitio de producción solo haciendo **push** a la rama **master** del repositorio.

# Conclusión
Como vimos fue muy rápido y fácil crear un sitio con JAMStack usando Stackbit, nuestro sitio está alojado en **netlify** desde ahí podemos agregar [plugins](https://docs.netlify.com/configure-builds/build-plugins/), un [dominio propio](https://www.netlify.com/docs/dns), [formularios](https://www.netlify.com/docs/form-handling/) con conexión a un backend o [AWS Lambda functions](https://docs.netlify.com/functions/overview/#manage-your-serverless-functions), también podemos agregar [plugins](https://www.gatsbyjs.com/plugins/) a Gatsby para agregar funcionalidades a nuestro sitio.