Ya conoces el proceso de construcción de un sitio estático utilizando el generador Jekyll de principio a fin. Además, Jekyll soporta el uso de plugins adicionales para generar algunos tipos de páginas automáticamente o modificar el comportamiento de distintas formas. Sin embargo, el uso de plugins está restringido en GitHub Pages por motivos de seguridad. Para aprovechar todas las posibilidades que nos ofrece el generador estático, vamos a aprender cómo automatizar el propio proceso de generación para GitHub Pages mediante un sistema de integración continua como Travis CI, y a extender la funcionalidad del sitio con distintos plugins.
Extendiendo con plugins
El sistema de plugins de Jekyll te permite ejecutar código adicional que construya contenido personalizado para tu sitio. Si lo compilas fuera de GitHub Pages generalmente podrás utilizarlos, ya que el modo "seguro" de Jekyll está desactivado por defecto.
Los plugins se pueden añadir de varias formas: bien incluyendo el código en la carpeta _plugins, o bien indicándolo como dependencia en el Gemfile o el archivo _config.yml. La forma más sencilla es añadirlo mediante el siguiente comando, sustituyendo jekyll-gist por el plugin deseado:
bundle add --group=jekyll_plugins jekyll-gist
La mayoría de plugins interesantes consisten en generadores, es decir, programas que añaden páginas a tu sitio automáticamente. Pueden servir para crear archivos por categorías y etiquetas, generar páginas especiales como sitemap.xml, y páginas de contenido a partir de otras fuentes de datos. También existen extensiones para el marcado Liquid con nuevos filtros y etiquetas.
En nuestro ejemplo, vamos a incluir un plugin que genera páginas de archivo para cada categoría. Para ello, ejecutamos la orden siguiente:
bundle add --group=jekyll_plugins jekyll-category-pages
Ahora, añadimos una estructura para las páginas de tipo archivo en la ruta _layouts/category_index.html:
---
layout: default
---
<h3>
{{ page.total_posts }}
post{% if page.total_posts != 1 %}s{% endif %}
en la categoría {{ page.title }}
</h3>
<ul>
{% for post in page.posts %}
<li><a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
Ahora, podremos especificar una o varias categorías en la variable categories de los datos iniciales de cada post. Cuando lancemos Jekyll para servir nuestro sitio, podremos acceder a la ruta /category/nombre_categoria para cada una de ellas:
Este es sólo un ejemplo, puedes consultar la lista de plugins útiles disponibles que te pueden ayudar a refinar y organizar mejor el contenido de tu sitio.
Compilación en la nube
Los servicios de integración continua permiten la automatización de builds y tests a lo largo del período de desarrollo de un proyecto. Uno de los más conocidos es Travis CI, que además cuenta con integraciones útiles en GitHub.
Nuestro objetivo con la integración continua es que, al subir cambios en nuestro sitio web, se lance un proceso de generación automático que termine publicando el sitio en GitHub Pages.
Para ello, necesitaremos dividir el repositorio de trabajo en dos ramas, una de ellas contendrá el código del sitio sin generar y la otra el listo para publicar. Para crear la nueva rama, puedes usar el comando git checkout -b <nombre_rama> o bien hacerlo desde GitHub como se observa en la siguiente figura:
Nota: si tu sitio web está almacenado en un repositorio de tipo usuario.github.io entonces la rama de publicación será master y la de trabajo una aparte, por ejemplo dev o site. Si es un repositorio normal, que es el caso que trabajaremos en esta guía, entonces la rama de publicación se llamará gh-pages y la de trabajo puede ser master o cualquier otra.
Ahora, inicia sesión en Travis CI y activa el repositorio en el que quieras publicar tu sitio, como el repositorio example de la figura:
Para configurar Travis CI, simplemente añade un archivo .travis.yml con una configuración como la siguiente:
language: ruby
rvm:
- 2.5
before_install: |
gem install bundler
git config --global user.email "[email protected]"
git config --global user.name "David (Bot)"
[ "${TRAVIS_PULL_REQUEST}" = "false" ] && \
git clone -b gh-pages https://${MY_TOKEN}@github.com/cmvp-jekyll/example.git .site
script: |
bundle exec jekyll build -d .site
touch .site/.nojekyll
after_success: |
cd .site/
[ "${TRAVIS_PULL_REQUEST}" = "false" ] && \
git add * && \
git add . --all && \
git commit -m "Actualización: `date`" && \
git push origin gh-pages --quiet
Esto indica a Travis CI que debe utilizar una máquina con Ruby, instalar las dependencias del sitio y clonar la rama de publicación en el directorio .site, donde indicaremos a Jekyll que genere el sitio. Después, compondrá un commit con los cambios y los subirá a dicha rama.
La variable MY_TOKEN que aparece en la configuración debes establecerla en los ajustes de Travis CI para tu repositorio (sección Environment Variables), consiguiendo un token de acceso personal desde GitHub con acceso a tus repositorios. En las siguientes figuras muestro cómo crear tu nuevo token y añadirlo a la configuración de Travis:
Una vez que subas el archivo de configuración a GitHub, Travis CI debería arrancar un build para compilar el código de tu sitio web, y posteriormente subirlo a la rama de publicación:
Nota: Puesto que ahora compilas tu sitio en un servidor externo a GitHub, comprueba que las variables url y baseurl del archivo de configuración _config.yml contienen los valores correctos para ser servidos en GitHub.
Descárgate el ejemplo de este artículo desde aquí.
En la próxima entrega, la semana que viene, haremos un resumen práctico de todo lo que hemos visto hasta ahora, basándonos en un vídeo explicativo que muestre todo el proceso de creación de un sitio y su despliegue y publicación automáticos en Github.
Crea tu propia página o blog gratis con Jekyll y Github - Serie completa:
Fecha de publicación: