Vamos a empezar con este pequeño curso donde explicaremos como desarrollar una plantilla para el maravilloso gestor de contenidos llamado Ghost.

Será un curso que irá a un ritmo muy natural y muy cotidiano, es decir, que lo iré haciendo a medida que tenga tiempo -y ganas-, por lo que si necesitas aprender a crear plantillas de manera inmediata no esperes que sea aquí -a menos que leas esto con el tutorial acabado-.

Como ya he dicho en más de una ocasión, Ghost es una plataforma de publicación ideal para proyectos personales y profesionales. Empecé a usar Ghost por primera vez en mi blog personal donde hablo de «mis mierdas» -aquí el autor no sabía muy bien como explicarlo-.

A continuación, os dejo un resumen de algunas de las características clave que a menudo corresponden a los «elementos imprescindibles» al seleccionar una plataforma para un blog o sitio:



Ghost es de código abierto, y por lo tanto lo puedes alojar en tu servidor sin problemas. Pero si no quieres liarte con estos temas, puedes usar sus servicios de alojamiento.



Admite múltiples roles para autores, editores y administradores para todo el equipo del gestor de contenido.



Está preparado para tener un SEO listo para usar que incluye soporte para Facebook Open Graph, Twitter Cards, Schema.org y páginas AMP.



Suscripción al sitio/blog por RSS, correo electrónico y Slack.



Ghost tiene aplicaciones de escritorio para Mac, PC y GNU/Linux (además de Android y iOS).



No lo olvidemos, la arquitectura temática de Ghost es flexible y fácil de trabajar, a la vez que le permite diseñar sus propios diseños creativos e innovadores.

es flexible y fácil de trabajar, a la vez que le permite diseñar sus propios diseños creativos e innovadores. Crea tu tema en cuestión de minutos -gracias a este tutorial, claro…-.

Entendiendo la estructura de Ghost

Por defecto, Ghost viene instalado con un tema llamado Casper. Es un tema simple pero con todo lo necesario para crear tu propio blog. Sin embargo, al tener todas las características, puede ser un poco farragoso usar este tema como base para crear nuestro tema.

Pero a medida que vayamos entendiendo la estructura de Ghost, podremos observar parte del código para entender como funcionan ciertos conceptos.

Y precisamente haremos esto en nuestro curso, leernos la documentación extensa de Ghost Themes y estudiar a fondo el tema Casper para aprender a crear temas para Ghost.



Además para este curso vamos a empezar con una base que he creado específicamente para este curso. Que contiene todos los ficheros necesarios para que el tema sea funcional. Pero no tiene contenido HTML ni nada que mostrar.



Además, usaremos un Framework de CSS llamado Bulma que nos facilitará el diseño adaptativo y también evitará realizar una maquetación a nuestro gusto (elimino esto del curso, porque mi gusto no es el mismo que el tuyo, así que una vez tengas el tema, dale el color que más te guste con la brocha gorda :P).



Elementos principales



Dentro de todos los elemento que podemos mostrar en nuestras plantillas de Ghost, estos son los más importantes:

Entradas : También llamados como Stories es el elemento principal, sin esto, pues… no seria un blog :/.

: También llamados como Stories es el elemento principal, sin esto, pues… no seria un blog :/. Páginas : Es una variante de las entradas con la diferencia que estas están excluidas de la pagina principal.

: Es una variante de las entradas con la diferencia que estas están excluidas de la pagina principal. Autores : Son objetos asociados a las entradas y a las páginas. Son los usuarios que han creado ese tipo de contenido. Además los autores también tendrán una pagina especifica con avatar, nombre, descripción y los artículos que han escrito.

: Son objetos asociados a las entradas y a las páginas. Son los usuarios que han creado ese tipo de contenido. Además los autores también tendrán una pagina especifica con avatar, nombre, descripción y los artículos que han escrito. Navegación : esto se puede modificar desde Ghost y es el menú de nuestro tema.

: esto se puede modificar desde Ghost y es el menú de nuestro tema. Etiquetas : También asocian entradas y páginas en temáticas en concreto. Al igual que el autor, tiene una pagina principal por cada etiqueta.

: También asocian entradas y páginas en temáticas en concreto. Al igual que el autor, tiene una pagina principal por cada etiqueta. Atributos del blog : Esto incluye el título y la descripción del blog, los logotipos y los iconos sociales.

: Esto incluye el título y la descripción del blog, los logotipos y los iconos sociales. Suscripción por correo: También existe la posibilidad de suscribirte por correo y también tiene una pagina especifica para hacer esto.



Estructura básica



La estructura básica de las plantillas para Ghost es el siguiente:



/assets : Dentro de este directorio tendremos el CSS , JS y tipografías o imágenes del tema.

: Dentro de este directorio tendremos el , y tipografías o imágenes del tema. /partials : Este directorio contiene partes del tema, así como el menú o plantilla para las entradas y páginas. Veréis también que en otros tutoriales -incluso la documentación- habla de un fichero llamado loop.hbs en este caso no vamos a usar ese fichero -porque lo haremos de otra manera que creo que es más fácil de entender todo-.



: Este directorio contiene partes del tema, así como el menú o plantilla para las entradas y páginas. Veréis también que en otros tutoriales -incluso la documentación- habla de un fichero llamado en este caso no vamos a usar ese fichero -porque lo haremos de otra manera que creo que es más fácil de entender todo-. author.hbs : Esta es la página del autor donde contiene el nombre del autor, el avatar, la biografía y el listado de entradas que ha escrito.

: Esta es la página del autor donde contiene el nombre del autor, el avatar, la biografía y el listado de entradas que ha escrito. default.hbs : Esta es la plantilla principal del diseño y que se usará para el resto de páginas -el home, páginas, autor…-.

: Esta es la plantilla principal del diseño y que se usará para el resto de páginas -el home, páginas, autor…-. index.hbs : Esta es la página principal -el home- y es donde contendrá el bucle para cargar las entradas.

: Esta es la página principal -el home- y es donde contendrá el bucle para cargar las entradas. page.hbs : Plantilla para las páginas -que no entradas-.

: Plantilla para las páginas -que no entradas-. post.hbs : Plantilla para las entradas.

: Plantilla para las entradas. tag.hbs : Plantilla para las etiquetas donde cargarán las entradas de la misma etiqueta.



Preparar ambiente de trabajo



Una vez hemos comprendido la estructura de Ghost, lo que deberemos de hacer es preparar nuestro ambiente de trabajo. Aquí no voy a contar mucho, cada uno tiene su ambiente y sus editores de texto.

Lo que si que haremos será descargar la base con Git:

git clone https://gitlab.com/t3rr0rz0n3/ghost-base-theme

Cosas importantes a tener en cuenta

En este curso habrá muchas cosas de las cuales no vamos a explicar y que seguramente tengas que aprender por tu cuenta. Por eso aviso de que es importante que mientras hagamos este tutorial miremos al mismo tiempo las documentaciones.

La documentación de Ghost Themes es súper completa y vamos a aprender mucho -yo he aprendido leyendo prácticamente toda la documentación-.

Como que también vamos a usar un FrameWork de CSS para evitarnos la faena de la maquetación, también tendremos que estar atentos a dicha documentación.

Además Bulma no tiene JS, por lo que tendremos que hacerlo nosotros con jQuery o con alguna otra librería que permita hacer ciertas cosas.

Y sobretodo, y lo más importante, nuestra imaginación y creatividad para hacer una buena plantilla que haga que el usuario que visite nuestra web se sienta como en casa.

