Instalar Ghost en ambiente de desarrollo y Windows Azure - parte 1
Avanzado
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.
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 estandard 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
Instalar Ruby
En el proceso de instalación asegurate de marcar estas opciones:
Instalar Git
Debes marcar la opción mostrada en la imagen:
Instalar node.js
Asegurate que esta opción este marcada:
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 resultadp
Windows Executable
Presionar + R , allí ingresar
Y ejecutarlo, en el dialogo emergente
Y de nuevo en el dialogo emergente revisar estas dos variables.
Windows UI
Puedes llegar al mismo lugar del método anterior
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
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
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
y en el browser:
Espera la segunda parte de este artículo donde nos dedicaremos 100% a publicar desde nuestro ambiente de desarrollo a Windows Azure