Raúl Ávila

Sobre mí     Archivos

Cómo hice el blog

Jekyll y GitHub

En Internet hay un montón de alternativas para crear un blog propio. Cuando me propuse crear una web personal tuve claro desde el principio que los contenidos generados deberían ser míos. Me explico: en ocasiones, al utilizar plataformas como blogger ocurre que los posts quedan alojados en un servidor sobre el que no tienes ningún control. Y así te puedes encontrar con que nuestro amigo Google ha decidido que no estás cumpliendo las condiciones de uso y cerrártelo de buenas a primeras. En la misma liga juegan los blogs de WordPress, por ejemplo.

No hablo de primera mano, pero sí que me he encontrado con gente en esta situación leyendo foros y demás. Siempre es posible hacer copias de seguridad, pero en caso de catástrofe recuperar los contenidos de la forma en que se encontraban supondría un esfuerzo que no sé si estaría dispuesto a asumir (y digo esto cuando aún no he publicado la segunda entrada de mi blog :)).

Total, que las opciones se iban reduciendo. Durante varias semanas casi llegué a decidirme por contratar un hosting e instalar WordPress (no es lo mismo Wordpress.org que Wordpress.com), pero, para ser sinceros, no me apetecía demasiado el desembolso inicial, y seguía teniendo la sensación de estar limitado por una plataforma, plataforma que es infinita en cuanto a opciones por otra parte, y permite conseguir resultados tan chulos como esta web.

La opción definitiva la descubrí de la mano de Trisha Gee, referencia de la London Java Community. Descubrí que su blog está alojado en GitHub Pages, una especia de servicio de hosting que da GitHub a sus usuarios, ¡de forma gratuita! La idea es que tú generas tu web como quieras y la subes a un repositorio GitHub para finalmente ser publicada en la URL [usuario].github.io. Genial.

Profundizando más, existe una plataforma llamada Jekyll, que es utilizada por GitHub pages para generar webs a partir de contenido estático creado mediante Markdown. Esta plataforma corre con Ruby, lenguage del que no tengo ni idea, pero del que apenas hay que conocer nada para utilizar Jekyll. En resumen, que me decidí por Jekyll + GitHub pages, y diría que no puedo estar más contento con la decisión. Aparte de permitirme mantener una copia local de mi web puedo jugar todo lo que quiera con estilos, plantillas, etc. Otra ventaja muy interesante es que al subirse como contenidos estáticos, sin bases de datos o plugins respaldando, la seguridad frente a ataques es bastante alta.

Reproduciré a continuación, a modo de referencia, los diferentes pasos que llevé a cabo para poner en marcha esta web (y así queda registrado por si tengo que volver a hacerlo algún día):

  1. Dar de alta una cuenta en GitHub. El nombre de usuario será el que dará nombre a la web una vez publicada (en mi caso raulavila.github.io).
  2. Crear el repositorio que alojará el blog, según se explica aquí.
  3. Instalar Jekyll. Si no tienes un Mac sería necesario instalar Ruby primero.
  4. Buscar una plantilla de referencia para, a partir de ahí, dar forma al blog. Esta opción es más sencilla que crear la página desde cero, aunque también sería una posibilidad, claro. La plantilla que elegí fue Poole, es muy minimalista, e incluye varios archivos útiles como el Feed, 404, config, etc.
  5. Añadir la plantilla al repositorio, junto con un fichero .gitignore (para que no se incluyan ciertos archivos en los commits). Si lo subimos a GitHub podremos ver la web publicada por primera vez pasados unos 30 minutos (en posteriores commits los cambios se actualizan automáticamente).
  6. Configurar correctamente las variables del fichero _config.yml
  7. Tunear los ficheros CSS a mi gusto, así como el layout de las plantillas.
  8. Cambiar el idioma de los textos de las plantillas a Castellano. Algún día escribiré un post explicando por qué decidí escribir en Castellano y no en inglés.
  9. Añadir una página de Archivos, que recorre todos los posts publicados y los lista por fecha. Para ello utilizo el lenguaje de plantillas Liquid. También añadí una página Sobre mí, pero tampoco tiene demasiado misterio.
  10. Jekyll genera de forma automática los permalinks, pero no me gustaba demasiado la forma en que lo hacía. Existe la opción de asignar el permalink que deseemos mediante la variable permalink en la cabecera de los posts.
  11. Añadir botones de Twitter (Follow Me en “Sobre mí”, y Tweet en la cabecera de los posts). Es muy sencillo siguiendo las indicaciones de los enlaces.
  12. Soporte para añadir tags en los posts, y crear páginas para cada tag específico. Seguí las indicaciones de este blog, no obstante me trajo varios quebraderos de cabeza por motivos que explicaré en el anexo. La verdad es que el soporte para tags es uno de los puntos flacos de Jekyll+GitHub Pages.
  13. Truncar posts en la página de inicio, según se explica aquí.
  14. Para publicar bajo un dominio propio, en lugar de *.github.io, compré el nombre en NameCheap. Es una opción bastante barata, e incluye el servicio WhoIs Guard.
  15. Configurar las DNS de GitHub pages en NameCheap. Este blog lo explica perfectamente.
  16. Añadir comentarios Disqus. Tras darme de alta en la web, las indicaciones fueron muy claras y funcionó sin ningún problema.
  17. Añadir Google Analytics, para así poder saber si me visita alguien de vez en cuando.
  18. Tunear detallitos sin importancia aquí y allá.

Creo que no me dejo nada. Mención especial para este post, que me sirvió de referencia para muchos de los puntos. De hecho, utilizo la misma plantilla.

Anexo: GitHub y los plugins

Me encontré con un problema inesperado a la hora de añadir el plugin de Ruby que creaba automáticamente las páginas para los tags. Al subirlo a GitHub pages descubrí que dichas páginas ¡no se generaban! Tras investigar un poco, lo que ocurre es que GitHub pages, al generar los sites a partir de las plantillas de Jekyll no ejecuta, por seguridad, los plugins adicionales que pueda haber en la carpeta _plugins, y que sí se ejecutan a nivel local.

La solución a este dilema no fue nada sencilla. Pensé en descartar el uso de plugins para la web, pero me parecía limitarme demasiado. No solo me llevaba a crear una solución más chapucera para los tags, a medio plazo no podría añadir cualquier otra cosa si lo consideraba necesario.

La salida más razonable está explicada en este post. En lugar de dejar a GitHub la tarea de generar la web la genero yo localmente y la subo al repositorio de GitHub pages. El código fuente está subido en un repositorio diferente. Aunque existe una solución que juega con las ramas dentro del mismo repositorio, me pareció más adecuado así (Separation of concerns y tal).

Por tanto, finalmente mi blog está dividido en dos repositorios:

Es increíble la cantidad de trabajo que puede llevar montar una página tan sencillita, pero estoy bastante orgulloso del resultado.