Publicando de Jekyll a Github Pages con Bitbucket Pipeline

Debido a unos problemas de seguridad que tuve con WordPress decidí cambiar el blog a algo estático servido desde Github Pages. Pero el nuevo sitio tenía que cumplir algunos requerimientos mínimos:

1. Debe tener buen aspecto
2. Posibilidad de tener múltiples idiomas (español e inglés)
3. Estático, nada de de scripts ni base de datos

Jekyll

Ya había escuchado de esta solución por lo que tenía como una referencia, así como Hugo, pero como vi que está soportado por Github Pages decidí darle una oportunidad.

De Wordpress a Jekyll

Para recuperar las entradas del blog ya publicadas levanté un ambiente aislado con Docker usando un dump de la base de datos del sitio y la última versión de Wordpress con los plugins requeridos en cada caso.

Luego para exportar las entradas usé el plugin WordPress to Jekyll Exporter

Lo único que tuve que hacer para poder usar este plugin fue deshabilitar el plugin qTranslate, el cual ya estaba bastante desactualizado y sin soporte y de todas maneras lo tenía que migrar a alguna otra opción

Jekyll theme: Minimal Mistakes

Busqué varias opciones pero el tema Minimal Mistakes fue el qué más se adaptó a lo que estaba buscando en cuanto a aspecto y funcionalidad.

Jekyll multi-lenguage: _i18n

Aquí también probé un par de plugins, pero el que mejor me funcionó fue jekyll-multiple-languages-plugin.

Plugins en Github pages

Github Pages soporta un número limitado de plugins, por lo que si se necesita usar algún plugin personalizado la solución es generar localmente los estáticos del sitio con Jekyll y luego publicarlos en Github Pages. De esta forma se pueden usar todos los plugins necesarios sin necesidad de que estén suportados en Github Pages.

Automatizando la generación de los estáticos y publicación

Existen varios ejemplos de cómo automatizar la construcción y publicación, como lo comentan en el plugin polyglot:

 # publi.sh
# change the branch names appropriately
git checkout site
rm -rf _site/
jekyll build
git add --all
git commit -m "`date`"
git push origin site
git subtree push --prefix  _site/ origin gh-pages

Bitbucket Pipeline

Pero para la automatización se me ocurrió usar el Pipeline de Bitbucket e investigando me conseguí con este artículo bien explicado Continuous Deployment for Jekyll using Bitbucket Pipeline to deploy in Github, el cual pueden consultar para los pasos bien detallados.

Si bien muchas de las cosas la saqué de estos dos artículos anteriores, no fue tan directo por lo que tuve que adaptar el script debido a que no pude hacer push al branch gh-pages con mi cuenta personal de Github, así mi Pipeline quedó definido de la siguiente manera:

 This is a sample build configuration for Ruby.
# Check our guides at https://confluence.atlassian.com/x/8r-5Mw for more examples.
# Only use spaces to indent your .yml configuration.
# -----
# You can specify a custom docker image from Docker Hub as your build environment.
image: ruby:2.3.3

pipelines:
  default:
    - step:
        script: # Modify the commands below to build your repository.
          - bundler --version
          - bundle install
          - bundle exec jekyll build -t
  branches:
    master:
      - step:
          script:
            - bundler --version
            - bundle install
            - bundle exec jekyll build -t
            - git clone https://github.com/lgallard/lgallard.github.io.git
            - cp -r /opt/atlassian/pipelines/agent/build/_site/* lgallard.github.io/
            - cd lgallard.github.io
            - git config --global user.email "lgallard@gmail.com"
            - git config --global user.name "Luis Gallardo"
            - git config --global push.default simple
            - git add --all
            - git commit -m "`date`"
            - git push https://$githubtoken@github.com/lgallard/lgallard.github.io.git

Donde $githubtoken es una variable de entorno que se le pasa al contenedor con el token generado previamente en Github.

Problema al construir el Pipeline

Cuando construía mi sitio localmente desde mi máquina no tenía ningún problema, pero al momento de correr el Pipeline siempre me arrojaba el siguiente error:

bundle exec jekyll build
 + bundle exec jekyll build
Configuration file: /opt/atlassian/pipelines/agent/build/_config.yml
            Source: /opt/atlassian/pipelines/agent/build
       Destination: /opt/atlassian/pipelines/agent/build/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
Building site for default language: "en" to: /opt/atlassian/pipelines/agent/build/_site
Loading translation from file /opt/atlassian/pipelines/agent/build/_i18n/en.yml
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
                    Invalid US-ASCII character "\xE2" on line 54
jekyll 3.6.0 | Error:  Invalid US-ASCII character "\xE2" on line 54

Como el error era de encoding supuse que había algo distinto en el ambiente del Pipeline y mi PC. Entonces como el Pipeline de Ruby a la larga es solo una imagen de Docker de Ruby que se toma desde Dockerhub busqué en la documentación de la imagen y se resolvía solo pasando el encoding como variable al contenedor en Settings > Pipelines > Environment variables:

LANG: C.UTF-8

Publicación del sitio

Ahora solo con hacer push de las entradas en el repo de Bitbucket corre el Pipeline y se publica todo en Github Pages!

Referencias:

1. Continuous Deployment for Jekyll using Bitbucket Pipeline to deploy in Github
2. WordPress to Jekyll Exporter
3. Minimal Mistakes
4. jekyll-multiple-languages-plugin
5. Docker ruby