Jekyll

Jekyll es un generador de sitios web estáticos preparado para blogging creado en Ruby por Tom Preston, el cofundador de Github.

Jekyll es el motor detrás de GitHub Pages por lo que puedes alojar tu sitio web en GitHub de forma gratuita.

Jekyll utiliza Liquid de Shopify como motor de plantillas.

Los posts en Jekyll normalmente se escriben en Markdown, pero puedes utilizar HTML.

En el inicio de cada post y página en Jekyll va un bloque de código YAML Frontmatter.

El código YAML siempre va al principio entre triples guiones.

YAML tiene este aspecto:

---
layout: post
title: I have no idea what i'm doing
---

La estructura de un sitio en Jekyll es algo así:

.
├── _config.yml
├── _data
|   └── members.yml
├── _drafts
|   ├── el-post-que-me-hara-famoso.md
|   └── el-post-que-no-terminare-de-escribir.md
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2017-10-29-no-tengo-ni-idea-de-lo-que-estoy-haciendo.md
|   └── 2017-04-26-mi-primer-post-en-jekyll.md
├── _sass
|   ├── _base.scss
|   └── _layout.scss
├── _site
└── index.html # también puede ser 'index.md' con YAML Frontmatter válido

_config.yml es el archivo de configuración de Jekyll donde podemos declarar las variables que queramos. Para aceder a las variables declaradas en _config.yml desde nuestras plantillas utilizaremeos la sintaxis {{ site.mivariable }}.

_drafts es la carpeta donde guardamos los posts en los que estamos trabajando, pero que todavía no hemos terminado.

Instalación de Jekyll

Si ya tienes Ruby y RubyGems instalados en tu máquina, puedes crear un nuevo sitio en Jekyll de este modo:

# Instalar las gemas Jekyll y Bundler a traves de RubyGems
~ $ gem install jekyll bundler

# Crear un nuevo sito Jekyll en ./myblog
~ $ jekyll new myblog

# Cambiar a tu nuevo directorio
~ $ cd myblog

# Montar el sitio en el servidor local
~/myblog $ bundle exec jekyll serve

# Ahora puedes ver tu sitio en http://localhost:4000

Nota:

Oficilamente Jekyll no tiene soporte para Windows, pero puede instalarse en Windows, con un poco de trabajo extra.

Instrucciones para instalar Jekyll en Windows.

Temas

Los Temas en Jekyll también son gemas de Ruby, puede que esto no sea raro en el mundo de Ruby pero si para los neófitos como yo.

Que significa esto?

Cuando creas un nuevo sitio en Jekyll con jekyll new new-shiny-site, Jekyll instala un sitio con el tema Minima, con el sistema de gemas.

Con este sistema algunos de los directorios como assets,_layouts,_includes y _sass se quedan ocultos en las gemas del tema, aunque sean leidos y procesados por Jekyll tu no los vas a ver en tu directorio principal y por lo tanto, no vas a poder trabajar con ellos.

Convertir un tema basado en gemas en un tema normal

Para poder crear nuestro tema queremos que todos los archivos estén en el directorio de nuestro sitio en Jekyll, no en el mundo mágico de las gemas brillantes.

Para hacer esto simplemente tenemos que crear o copiar los archivos necesarios del repositorio del tema minima en nuestro directorio y eliminar las referencias al tema original basado en gemas, en este caso minima.

  • Abre Gemfile y elimina gem "minima", "~> 2.0".
  • Abre _config.ymly elimina theme: minima.

Si has llegado hasta aquí, felicidades, ahora tienes un tema totalmente independiente!

Advertencia:

Hemos eliminado todas las referencias al tema inicial por lo que ahora tu Jekyll va a dar errores.

En concreto, te dará el error de que no encuentra los svg de los iconos sociales en el footer, abreló y elimina esa parte y cualquier otra que te de errores, ahora el tema es tuyo!

Las clases, puedes eliminarlas o reusarlas si te gusta como están nombradas, pero ya no hacen referencia a ningún css, tendrás que crear tus propios estilos para darle forma de nuevo al tema. Tranquilo, minima es un tema muy simple y no hay mucho que eliminar realmente.

Gulp

Gulp es un automatizador de tareas hecho en Node.js.

Tanto el código de Gulp como tu Gulp file donde defines tus tareas están escritos en JavaScript.

Gulp nos ayuda a organizar, compilar y optimizar nuestro código.

Gulp usado correctamente puede mejorar tu workflow y la nota de tu sitio web en Google Page Speed.

Gulp te da total libertad a la hora de organizar el código por lo que los requisitos de la estructura de archivos de tu sitio no serán un problema.

La instalación de Gulp se hace con npm.

Instalar Gulp es muy sencillo, primero se tiene que instalar globalmente:

npm install -g gulp

Después tienes que instalarlo en tu proyecto:

npm install --save-dev gulp

Nota:

En este post no voy a explicar el funcionamiento básico de Gulp.

Si te gustan los videos te recomiendo la serie en español: Crea tu workflow front-end con Gulp.js de Juan Andrés Nuñez.

Si prefieres leer prueba con este artículo: Gulp – How To Build And Develop Websites

Browsersync

Browsersync es un servidor local muy útil para desarrollo.

Es lo mismo que utilizar jekyll serve y recargar la página manualmente pero más rápido y con algunas ventajas:

  • Actualiza el navegador automáticamente en varios dispositivos y navegadores.

  • Todos los navegadores siguen el scroll hasta el mismo punto.

  • Todos los navegadores cargan los links al hacer click.

  • Puede simular conexiones lentas, Browsersync puede simular que estas visitando tu web desde un lugar donde no llegan los 50MB de fibra que tienes en casa.

  • Es compatible con Gulp.

  • Es gratis y opensource.

Browsersync te facilita cuatro URL:

Browsersync UI

  • Local: donde puedes ver tu proyecto.
  • Externa: la dirección donde cualquier usuario en tu red local (Lan o Wifi) puede ver el proyecto.
  • UI: Browserync UI te muestra todas las opciones de Browsersync.
  • UI Externa: La UI para cualquier usuario de tu red.

Este es el aspecto de la UI de Browsersync, que en mi caso está en el puerto 3001.

Browsersync UI

Determinar que tareas quieres que haga Jekyll y que tareas quieres que haga Gulp

Tanto Jekyll como Gulp pueden procesar Sass, copiar assets a _dist y lanzar un server local, por lo que tendrás que elegir que tareas quieres que haga cada uno.

Tienes mucha libertad para hacer esto, yo para empezar a funcionar sin complicarme mucho estoy haciendolo así:

Tareas para Jekyll

  • Limpiar el contenido de _site cada vez que se ejecuta jekyll build.
  • Procesar Markdown, gestionar los archivos del Blog y montar los layouts con Liquid y YAML.
  • Copiar los assets de la raiz a _site.

Jekyll por defecto copia todos los archivos y carpetas que encuentra en la raiz con algunas excepciones:

  • Carpetas nombradas con un guión bajo al principio.
  • Archivos con un punto al principio.
  • Archivos que especifiques ignorar en tu _config.yml.

Para que te hagas una idea, estos son los archivos que estoy copiando e ignorando:

Estoy copiando:

  • blog
  • bower_components
  • css
  • images
  • js
  • post
  • CNAME
  • index.html

Estoy excluyendo:

  • vendor/bundle
  • Gemfile
  • Gemfile.lock
  • bower.json
  • gulpfile.js
  • package.json
  • package-lock.json
  • CHANGELOG.md
  • README.md
  • feed.xml
  • node_modules
  • scss

Nota:

Algunos desarrolladores prefieren procesar los assets con Gulp y copiarlos directamente en _dist en vez de copiarlos a la raiz y dejar que Jekyll los copie después a _dist como estoy haciendo yo.

Tareas para Gulp

  • Procesar los estilos
  • Ejecutar Jekyll y lanzar Browsersync
  • Vigilar los cambios y refrescar el navegador

Procesar estilos

Jekyll por defecto compila Sass, pero hacerlo con Gulp tiene varias ventajas:

Podemos utilizar los plugins de Gulp para procesar estilos, hay muchos, yo de momento he empezado con dos:

  • gulp-sass: compila sass.
  • gulp-autoprefixer: añade los prefijos de navegador necesarios y elimina los que ya no lo son.

Ejecutar Jekyll y lanzar Browsersync

Con la orden jekyll serve Jekyll monta un servidor interno en localhost:4000, pero como hemos comentado, utilizar Browsersync tiene sus ventajas.

Necesitamos ejecutar Jekyll para que procese Markdown, copie los assets, las páginas independientes y los archivos del blog a _dist, pero no queremos otro server en funcionamiento.

Por esta razón, no vamos a ejecutar jekyll serve, en su lugar vamos a ejecutar jekyll build.

jekyll serve procesa el html, copia los archivos a _dist, monta un server local y vigila los cambios.

jekyll build se limita a procesar el html y copiar los archivos a _dist.

Para ejecutar Jekyll desde Gulp utilizo el plugin Gulp-shell.

// Build Jekyll
gulp.task('build:jekyll', function() {
  return gulp.src('index.html', { read: false })
    .pipe(shell([
      'bundle exec jekyll build --drafts --config _config.yml,_config.dev.yml'
  ])).on('error', gutil.log);
});

Y así es como estoy lanzando Browsersync desde Gulp:

// Serve
gulp.task('serve', ['sass','build:jekyll'], function() {
  console.log("montando el server en el puerto 4000");
    browserSync.init({
        port: 4000,
        server: {
            baseDir: "./_site"
        }
    });
});

Vigilar cambios y refrescar el navegador

Queremos que Gulp vigile los cambios y refresque el navegador cuando cambie algo en cualquier parte del proyecto.

Para esto tenemos que crear una tarea watch en Gulp:

// Watch
gulp.task('watch', function () {
      gulp.watch(['scss/**/*.scss'], ['sass','rebuild:jekyll']);
      gulp.watch(['**/*.html', 'index.html', '_layouts/*.html', '_posts/*','_my_categories/*','_my_tags/*', '_includes/*.html', '_drafts/*'], ['rebuild:jekyll']);
});

Crear un archivo de configuración distinto para desarrollo no es obligatorio pero puede ser útil.

En mi caso he creado un archivo _config.dev.yml en el que he cambiado la url del proyecto para desarrollo.

url: http://netinetidesign.com // url en produccción
url: http://localhost:4000     // url en desarrollo

Para sobreescribir tu config.yml con config.dev.yml cuando ejecutes jekyll en desarrollo, hazlo de este modo:

'bundle exec jekyll build --config _config.yml,_config.dev.yml'

Aquí my gulpfile terminado por si lo necesitas.

Posteado en Programación con : Jekyll