Bienvenidos al desastre 🦄

Bienvenidos al desastre 🦄

Hola a todos, no es momento de presentaciones. Podéis llamarme Guillermo, así lo quisieron mis padres.

Hoy lanzo este proyecto personal. Una noche de confinamiento dedicada a intentar comprender nuevas formas de hacer las cosas. Nuevas formas de publicar contenido, de generar experimentos personales y aprender.

Un blog personal

Esta web por la que navegas, que seguramente esté hecha un desastre, se ha construido con los siguientes elementos:

Gatsby - Generador de sitios estáticos

Gatsby es un framework gratuito y open source basado en React que permite desarrollar de forma rápida sitios web y aplicaciones web rápidos

Y yo poco puedo añadir más.

Ghost 3.0 - Plataforma CMS
Nuevo editor de contenidos. Ya vale de Wordpress.

Lo he alojado en un servidor DigitalOcean por 5$/mes. Para ser un proyecto personal de bajo tráfico es un pelín caro, pero así me fuerzo a darle movimiento.

Netlify - Alojamiento + CI
Hosting gratuito que nos permite desplegar Gatsby desde el repositorio con bajas limitaciones de tráfico, que si no recuerdo mal, son 100GB/mes 🤘🏽. Suficiente para un blog personal.

Cloudinary - Red de entrega de contenidos
CDN bastante famosa que se integra con Ghost pero... estoy intentando meterla en el proceso sin éxito.

Proceso y situación actual

Nadie dijo que montar esto sin tener ni idea fuera fácil. He seguido muchos tutoriales, guías donde te explican perfectamente qué teclas pulsar y en qué orden... pero no es tan sencillo.

Resumiendo, te doy los pasos que he seguido para llegar al estatus actual:

  • Despliegue de Gatsby en Netlify: son realmente 3 clics y tenemos una plantilla base que medianamente vamos a poder "tocar", o eso creo.
  • Dominio apuntando a las DNS de Netlify: sencillito. Ahora esta plataforma gestiona el dominio.
  • DNS propagadas en Netlify: generamos DNS record "A" apuntando a la IP de DigitalOcean donde hemos dado alta el subdominio.
  • Instalando Ghost en DigitalOcean: bajo un subdominio "blog.guillermogascon.com" hará de gestor de contenidos.
  • Conectando todo: es el momento de generar APIs desde Ghost, conectarlas con Gatsby y enganchar un hook para el despliegue de contenido rápido desde Ghost a Netlify.
  • Metemos Google Analytics en Gatsby

Y hasta aquí he llegado.

Ahora mismo puedo controlar el contenido que se publica, puedo controlar las imágenes (aunque se enlazan desde el subdominio blog.guillermogascon.com), no he conseguido conectar Ghost con Cloudinary.

Los problemas

¡Pero ya llegan los problemas!

¿Cómo narices se toca el diseño?

No podemos añadir una plantilla predefinida desde Ghost ya que Gatsby está gestionando un diseño totalmente independiente.

¡Todos los cambios a maneja me imagino!

¿Cómo narices hago funcionar esto desde la consola de DigitalOcean para ofrecer las imágenes desde CDN?

Voy a dejar por aquí un tuit que me he marcado alas 5 de la madrugada después de este curro donde pongo mis dudas y podéis añadir las vuestras. Se aceptan consejos y recomendaciones. :)

Actualización (11/04/20)

Después de unas cuantas horas dándome tortas, creo que he conseguido incluir Cloudinary como CDN de imágenes.

Vamos a probar