Tutoriales Aplicaciones Web / septiembre 03, 2016

Configuración de Ghost para usarlo en GitLab Pages

Iba hacer un tutorial muy extenso sobre como utilizar las GitLab Pages pero como siempre me pasa se me adelantan ¬¬ Así que lo que haré es resumir brevemente como usar GitLab Pages para tener una web estática, recomendar los blogs donde ya tienen una perfecta explicación y luego centrarme el el tutorial de como configurar Ghost para usarlo en GitLab Pages.

Que es y porqué uso Ghost

Antiguamente, cuando usaba GitHub (que aún lo sigo usando pero más que nada para colaborar con otros proyectos y me podéis seguir aquí) utilizaba Jekyll para una pequeña web que me quería hacer. Pero debido a que he reinstalado mi sistema, he tenido que eliminar todo y ahora tras intentar volver a instalar Jekyll en mi PC de nuevo, parece que algo no funciona y no puedo solucionarlo. Tras varios días buscando posibles soluciones decidí abandonar Jekyll y pasarme a Ghost.

Ghost es una plataforma de blogging desarrollada sobre NodeJS y Handlebars (y con sqlLite3 por defecto) que es totalmente de Código Abierto con una idea muy clara: hacer una cosa y hacerlo muy bien. De esta manera se centran exclusivamente a la creación de contenido y nada más (por eso es tan maravilloso crear contenido como veréis más adelante).

Además este novedoso proyecto cuenta dos dos principios:

  1. Código Abierto. Ghost está bajo licencia MIT, por lo que podrás usarlo, modificarlo, etc.
  2. Ghost y la comunidad. Este pequeño proyecto está totalmente sostenido a través de una organización llamada Ghost Foundation y está desarrollado por muchos voluntarios a lo largo de todo el mundo.

¿Qué podemos hacer con Ghost?

  • Gestión de usuarios: Ghost es multiusuario, por lo que podemos crear diferentes usuarios con diferentes roles, para así mantener una cierta jerarquía en cuanto a permisos de usuarios.
  • Gestión de categorías: Puedes crear, eliminar y modificar categorías que podrás asignar a tus entradas. Además cada categoría puede tener una imagen destacada.
  • Gestión de menús: También puedes crear varios menús para tu plantilla y gestionarlos desde el panel de administración.
  • Editor de MarkDown: Lo mejor de Ghost para mi. Para crear los artículos de Ghost podemos utilizar tanto HTML como MarkDown, pudiendo así escribir entradas de manera más rápida y dinámica. La vista de editor la página se divide en dos zonas, una para editar y otra para la previsualización de lo que escribimos.
  • SEO: En Ghost el RSS y el sitemap están incluidos en el core y se generan automáticamente (disponibles en /rss y /sitemap.xml). Además podemos cambiar las URL y etiquetas meta de todos nuestros artículos y categorías para facilitar la indexación de nuestro contenido con los motores de búsqueda.
  • Exportación/Importanción de contenido: Nunca fue tan fácil la importación/exportación de contenido. Al utilizar archivos JSON para importar y exportar contenido hace que todo sea más simple y fácil con un solo clic.
  • Plantillas: Hay una cantidad enorme de plantillas para usar con Ghost. Y si eres atrevido o simplemente eres desarrollador web puedes hacer una en cuestión de horas (yo lo hice, es realmente fácil y tienen una documentación perfecta).

Configuración de Ghost en local

¡Al lío! Lo primero que tenemos que hacer es descargarnos Ghost desde los repositorios oficiales o haciendo clic aquí:

Nota: Me acabo de dar cuenta de que han sacado nueva versión de Ghost, yo instalé la versión 0.9.0 y ahora ya hay la versión 0.10.0 y trae muchas novedades interesantes que podéis leer en el anuncio oficial.

$ wget https://ghost.org/zip/ghost-0.10.0.zip

Descomprimimos en /opt/Ghost:

# unzip ghost-0.10.0.zip -d /opt/Ghost

Cambiamos permisos y añadimos nuestro usuario como propietario:

# chmod 755 -R /opt/Ghost
# chown zagur.zagur -R /opt/Ghost

Instalamos dependencias:

# apt-get install nodejs-legacy nodejs npm wget

Comprobamos que se ha instalado correctamente visualizando su versión:

$ nodejs -v
> v4.2.6

$ node -v
> v4.2.6

Nos posicionamos dentro del directorio de Ghost y ejecutamos lo siguiente:

$ cd /opt/Ghost
$ npm install --production

Una vez instalado, iniciamos nuestro servidor con Ghost:

npm start

Una vez tenemos Ghost instalado localmente en nuestro ordenador e iniciado el servidor, podremos acceder a nuestro Ghost abriendo un navegador y escribiendo en la barra de direcciones http://localhost:2368.

Ahora tocará iniciar una configuración para el panel de administración y para crear una cuenta. Para hacerlo tan solo tenemos que acceder por http://localhost:2368/ghost y seguir los pasos:

Captura de pantalla de 2016-09-03 01-26-03

Configuración Ghost

Instalación de Buster

Si subimos el directorio /opt/Ghost en un repositorio de GitLab preparado para ser usado como GitLab Page, éste no podrá ser visualizado como una página web ya que no hay un servidor ejecutando NodeJS, por lo tanto tenemos que transformar el Ghost local que tenemos instalado y subir las páginas estáticas que creemos con Buster.

Instalamos pip:

$ cd /opt/Ghost
# easy_install pip
# pip install buster

Configuración de Ghost para GitLab Pages

El siguiente paso será crear un repositorio en GitLab Pages y pondremos el siguiente nombre: zagur.gitlab.io (donde «zagur» será vuestro nombre de usuario de GitLab). Una vez hemos creado el repositorio, tenemos que configurar Ghost.

Modificamos el fichero /opt/Ghost/config.js:

config = {
    // ### Production
    // When running Ghost in the wild, use the production environment.
    // Configure your URL and mail settings here
    production: {
        url: 'http://my-ghost-blog.com',

Al principio del fichero veremos algo parecido al código de arriba, tendremos que cambiar ‘http://my-ghost-blog.com’ por nuestra dirección de nuestra GitLab Page (en mi caso): ‘http://zagur.gitlab.io’.

Ahora configuramos Buster:

$ buster setup

En este proceso nos pedirá la URL de nuestro repositorio (ejemplo: https://github.com/zagur/zagur.github.io.git)

Y para acabar generamos nuestra página estática a partir de nuestro Ghost, pero antes, tenemos que iniciar nuestro servidor con:

$ npm start

Y luego ejecutamos:

$ buster generate --domain=http://localhost:2368

Este comando generará una carpeta llamada «static» dentro de /opt/Ghost. En ese directorio tendremos nuestro Ghost en formato estático y listo para subir a GitLab.

Preparar repositorio para alojar una GitLab Page

Como habéis podido leer en el tutorial de VictorHck donde explica como «Alojar una página html utilizando GitLab Pages» hay que crear un fichero llamado .gitlab-ci-yml para que funcione bien la página. En /opt/Ghost/static crearemos este fichero con el siguiente contenido:

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
    paths:
    - public
  only:
  - master

Una vez hemos creado el fichero solo nos queda subir el contenido de /opt/Ghost/static a nuestro repositorio con los comandos necesarios.

$ git add .
$ git commit -m "First commit"
$ git push origin master

Actualizar Ghost

Bueno como habéis visto podemos crear desde una web dinámica como Ghost instalado en nuestro ordenador o servidor una web estática y utilizarla en nuestra página de GitLab Pages con nuestro dominio personal. Cuando queramos actualizar nuestra GitLab Page, tan sólo tenemos que iniciar nuestro servidor con:

$ npm start

Entramos desde nuestro navegador a nuestro Ghost local y creamos el contenido nuevo y luego generamos la página estática con:

$ buster generate --domain=http://localhost:2368

¡Así de sencillo!

Fuentes: Ghost Documentation, Carl Bernardo y Mindful Ramblings

Haz que cada palabra cuente: tu donación nos inspira a seguir creando contenido. Accede al apartado de Donación para hacer tu aportación