Instalar Ghost en ambiente de desarrollo y Windows Azure - parte 1

Hemos aprendido a instalar Ghost pensando únicamente en su parte funcional, sin embargo dedicaré este artículo a enseñar cómo se debe montar Ghost en un ambiente de desarrollo y la subsecuente implementación en Windows Azure.

Esta es la primera parte del artículo, encuentra acá la segunda parte:
Instalar Ghost en ambiente de desarrollo y Windows Azure - parte 2

Es un nivel un poco más avanzados para developers, es importante conocer los aspectos relacionados en este artículo ya que les permitirá llevar su implementación al siguiente nivel de personalización.

Creanlo o no, todos los componentes y librerias de los que les hablaré en este artículo son prácticamente un estandar de facto en la industria del desarrollo de software y gozan de una muy amplia popularidad, cosa que muchos de nosotros no estamos muy enterados porque hacemos parte de otro sub grupo de desarrolladores más dedicados a tareas corporativas que a lo que se dedican la enorme mayoría de desarrolladores en agencias y en desarrollo de pequeños sistemas corporativos.
Esto da para debate pero este artículo no es el lugar indicado para seguirlo.

Prerrequisitos y alistamiento

  1. Instalar Ruby
    En el proceso de instalación asegurate de marcar estas opciones:
    Ruby installer options
  2. Instalar Git
    Debes marcar la opción mostrada en la imagen:
    Git installer options
  3. Instalar node.js
    Asegurate que esta opción este marcada:
    node.js installer options
  4. Tener una cuenta de Windows Azure, o en su defecto utilizar un trial

Aunque es opcional nos hemos asegurado de que los 3 instaladores hayan modificado la variable de entorno PATH puesto que esto nos hará la vida más fácil al no tener que cambiar de una consola a otra para efectuar varios comandos.
Aunque hemos marcado en todos los instaladores si tienes problemas puedes verificar de varias formas.

Consola

Desde una consola de comandos abierta como administrador

PATH  

y verificamos el resultado
Path results

Windows Executable

Presionar + R , allí ingresar
SystemPropertiesAdvanced.exe

Y ejecutarlo, en el dialogo emergente
Environment variables

Y de nuevo en el dialogo emergente revisar estas dos variables.
Path environment variables

Windows UI

Puedes llegar al mismo lugar del método anterior
Windows UI

Windows Azure command line

Desde el sitio de Windows Azure podemos descargar el instalador de la consola de comandos multiplataforma.

Sin embargo hay una manera más facil de hacerlo aprovechando que esta última esta hecha con node.js.

En la consola de comandos ejecutamos el siguiente comando.

#--g se usa para instalarlo de manera global no solo en la carpeta actual
npm install azure-cli --g  
#es necesario probarlo
azure  

Azure command line tool

Ghost: Preparar repositorio

Abrimos una consola de comandos y allí nos ubicamos en el directorio donde vamos a crear el repositorio.

Seguidamente debemos descargar la versión más reciente de Ghost directamente desde el repositorio en GitHub, en terminos más técnicos debemos clonar el repositorio remoto en un repositorio local.

git clone https://github.com/TryGhost/Ghost.git  
Cloning into 'Ghost'...  
remote: Counting objects: 11865, done.  
remote: Compressing objects: 100% (8159/8159), done.  
remote: Total 11865 (delta 6262), reused 8646 (delta 3379)  
Receiving objects: 100% (11865/11865), 5.93 MiB | 1.24 MiB/s, done.  
Resolving deltas: 100% (6262/6262), done.  
Checking connectivity... done  

Ahora ya tenemos un directorio con todos los archivos de Ghost, pero para que Ghost funcione se requieren algunos otros subproyectos , por ejemplo el tema por defecto llamado Casper etre otras cosas. Así que debemos pedirle a git que revise los submodulos y los traiga al repositorio.

git submodule update --init  

Sass y Bourbon

Estoy seguro que algunos de ustesdes estan familiarizados con CSS, otros tanto apenas si los han oido nombrar, pero bueno todos saben que es.

Hoy en día las hojas de estilo han evolucionado muchisimo, no solo por la definición del estandard CSS 3 sino porque su uso se ha hecho más intensivo y creativo, son parte fundamental de una página web decente.

Este aumento en la complejidad y cantidad de trabajo a realizar dio origen a varios proyectos dos de ellos son LESS y SASS.

LESS = Leaner CSS
SASS = Syntactically Awesome StyleSheets

Los cuales a groso modo son lenguajes que al 'compilarlos' generan CSS.

Bourbon es una libreria que adiciona algunos mixins a Saas, un mixing es un fragmento de código que al compilarlo se desemvuelve en varios fragmentos más.

Por ejemplo si quisieramos utilizar un estilo box-shadow tendriamo que escribirlo en 5 o 6 formas para soportar todos los browser, pero con ayuda de uno de los mixing incluidos en Bourbon basta con una sola línea que al compilarse generará las demás.

Los mixings son soportados por LESS y SASS pero Bourbon lo que hace es incorporar en SASS unos mixing pre construidos así que no tienes que hacerlos tu.

# Bourbon syntax  
@include box-shadow(0 2px 2px 0 rgba(0, 0, 0, 0.3));
# Output
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
    -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
     -o-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);

Esto nos trae muchas ventajas, no solo desarrollar más rápido sino que el código que ahce parte de la solución es más fácil de leer y por ende más fácil de mantener.

SaaS y Bourbon nacieron como proyectos de Ruby, para obtenerlos debemos instalar dos gemas de Ruby que no inesperadamente se llaman SaSS y Bourbon, estas 'gemas' (librerias de ruby) serán usadas posterioremente para compilar los archivos de SaSS con sus mixings para así generar código CSS.

Desde la consola ejecuta

gem install sass  
gem install bourbon  

En lo personal no me gusta mucho ese aproach, LESS originalmente estaba hecho en Ruby pero luego se desacopló y se monto todo en JS de tal forma que es un script el cual en tiempo de ejecución del website convierte el LESS en CSS, allí incorporá caché local y algunas cosas extra.

Grunt

Grunt logo

Muchos de ustedes han trabajado siempre con el entorno de Visual Studio, algunos han trabajado haciendo deployment automatizado de sus proyectos (lo cual hoy día es clic derecho publicar) y otros más experimentados han personalizado el proceso a travez del deployment tool y desde luego desde Team Foundation Server/Service (TFS).

Con este último no solo se puede automatizar el deployment sino tambien

  • Control de código fuente
  • Colaboración
  • Ejecución de Test
  • Planeación de acuerdo a una metodología (scrum, cmmi etc)
  • Y un sin número de características adicionales más a nivel enterprise

Bien, en el mundo "no Microsoft" no hay NADA que siquiera se acerque a ello, pero las herramientas son completamente modulares y extensibles por lo que podemos usar otras varias herramientas que integrándolas entre si nos pueden brindar características similares, en especial a lo relacionado con el deployment y automatizcion de pruebas.

Allí es donde Grunt juega un papel muy importante en node.js ya que grunt es un motor que permite agendar y ejecutar tareas, qué tipo de tareas?

  • Te suena minimizar los css y js al hacer deploy? --> si con Sass y Bourbon
  • Que tal ejecutar el set de pruebas automatizadas para garantizar que un Build no arruinará nada de lo que ya estaba funcionando?
  • El propio deploy es una tarea que puede incorporar descargar e instalar componentes adicionales, crear archivos de configuración y ejecutar otras tareas, en fin todo lo que usualmente hacemos con TFS y ms deployment tool.

Como ya estarás adivinando nuestro 'proyecto' de Ghost incorpora archivos de configuración donde estan listadas todas las dependencias (librerias) requeridas e incluso los comandos necesarios para incializarlas.

Grunt es el 'middle ware' que puede ejecutar tareas durante el proceso de deploy por ello es necesario que lo instalemos.

npm install -g grunt-cli  

Ahora si a instalar Ghost

Desde la consola de comandos estando en la carpeta donde quedo el proyecto de Ghost clonado:

#instalar ghost
npm install  
#inicializar grunt
grunt init  
#ejecutar las rutinas de paso a prod
#p.e. compilar Sass a CSS, minificar js etc.
grunt prod  

Taraaaaaaaaaaaaan

Ejecutamos esto en consola

npm start  

local ghost running

y en el browser http://localhost:2368

Ghost website running

Esta es la primera parte del artículo, encuentra acá la segunda parte:
Instalar Ghost en ambiente de desarrollo y Windows Azure - parte 2
Espero sus comentarios y no duden en compartirlo ;)

Comparte este artículo

comments powered by Disqus