Lo que he aprendido: temas de Jekyll y GitHub Pages

Acabo de descubrir que GitHub Pages tiene una opción para que elijamos un tema de Jekyll cuando creamos nuestra página. Esto es bastante interesante, porque significa que podemos despreocuparnos del aspecto y centrarnos en el contenido. Al ver esto me puse a investigar sobre los temas de Jekyll, para averiguar qué son y cómo se usan. Os cuento lo que he sacado en claro.


Usar un tema en nuestra página

Los temas de Jekyll son gemas y para usarlos en nuestra página tenemos que seguir los siguiente pasos:

  1. Añadimos al archivo Gemfile una línea donde indicamos el tema que queremos usar:
gem "TEMA"
  1. Instalamos el tema:
bundle install
  1. Activamos el tema añadiendo la siguiente línea al archivo de configuración _config.yml:
theme: TEMA
  1. Creamos el sitio con bundle, lo necesitamos porque estamos usando una gema extra:
bundle exec jekyll serve

Para ver dónde está situado el tema y sus archivos, podemos usar show:

bundle show TEMA

La teoría

Está muy bien saber los pasos para conseguir nuestro objetivo, pero está mejor saber por qué hacemos las cosas, creo yo. Para ello necesitamos saber qué es eso de bundle cosas y el archivo Gemfile.

Veamos, los comandos bundle cosas pertenecen al programa Bundler que es un programa que sirve para instalar y gestionar las gemas que necesita un proyecto. Podemos entender las gemas como si fueran paquetes, Bundler mira a ver si los paquetes necesarios están instalados en las versiones necesarias para que nuestro proyecto funcione.

Para que Bundler haga su trabajo, nosotros le decimos en un archivo llamado Gemfile qué gemas vamos a usar y en qué versión. Por ejemplo, un Gemfile para usar el tema Minima en Jekyll tiene esta pinta:

source "https://rubygems.org"
gem "jekyll", "3.3.1"
gem "minima", "~> 2.0"

Esto le dice a Bundler dónde buscar las gemas y que use Jekyll 3.3.1 y Minima en una versión mayor que la 2.0 y menor que la 3.0.

Cuando hacemos bundle install, Bundle mira el Gemfile e instala lo que debe. Además, cuando usamos Bundle, se crea un archivo Gemfile.lock en el que se guarda la información de las gemas que hemos utilizado, no solo las que nosotros hemos puesto en el Gemfile, sino todas de las que depende nuestro proyecto con sus versiones correspondientes. Este archivo Gemfile.lock puede ser muy largo.

Una nota sobre la versión GitHub Pages

Si estamos usando GitHub Pages, tenemos dos opciones:

  • Creamos la página desde la interfaz y nos ahorramos todos estos pasos. Solo tenemos que seguir las instrucciones

  • Creamos la página en local y tenemos en cuenta unas cuantas cosas que enseguida os cuento.

Lo primero es que tenemos montones de
La siguiente cosa importante es que usar la variante GitHub Pages de Jekyll se requiere Javascript por no sé qué historias con CoffeeScript. Lo podemos solucionar, por ejemplo, instalando Node.js.

Aparte, para crear la web localmente al estilo GitHub Pages tenemos que cambiar el Gemfile. Os lo pongo a lo diff para hacerme la guay:

- gem "jekyll", "3.3.1"
+ gem "github-pages", group: :jekyll_plugins

Ya por último, si os aparece este error:

Liquid Exceptions: No repo name found. Specify using PAGES_REPO_NWO environment variables, repository in your configuration, or set up origin git remote pointing to your github.com repository.

Es porque el tema necesita saber el nombre del autor y del repo para alguna cosa (como poner X project mantained by Y author) y se vuelve loco. Se soluciona fácil añadiendo una línea con esta información al _config.yml:

repository: Author/Project

Creo que no me dejo nada. Me podéis preguntar lo que sea, como siempre (aunque cuidadito con trolear) 😀

Fuente de la imagen: Private Investocat

Referencias

Bundler

Jekyll themes

Customizing GitHub Pages

Temas de Jekyll en GitHub


Tenéis todo lo que he escrito sobre Jekyll y GitHub Pages en la compilación

Anuncios

2 pensamientos en “Lo que he aprendido: temas de Jekyll y GitHub Pages

  1. Pingback: Compilación: GitHub Pages y Jekyll | Onda Hostil

  2. Pingback: En qué ando: segunda quincena de febrero | Onda Hostil

¡Opina sin miedo! (Puedes usar Markdown)

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s