• Publicado: 11 Nov 2015

  • Archivado en: general, datascience

Producir pdf's de un sitio Jekyll

En algunas ocasiones puede ser bastante interesante pasar un artículo o una investigación a formato pdf.

Jekyll (el framework sobre cuál está recientemente este blog) nos permite rápidamente hacer sitios estáticos y hostearlos en Github.

Pero en algunas ocasiones, me eh encontrado con la necesidad de mandar el artículo o investigación en formato print (o pdf, más bien).

Por suerte encontré la herramienta wkhtmltopdf (el nombre pudo haber sido mejor) que nos permite pasar cualquier sitio html a un pdf.

Setup en Jekyll

Primero, recomiendo hacer lo siguiente: tener un CSS definido por cada “tipo de post”.

Para los que no están muy familiarizados: el CSS es básicamente un código “madre” dónde se guardan los estilos de un sitio en html. Esto sirve por que en vez de tener que ir página por página cambiando como se ven los titulos, solamente cambiamos el CSS y tenemos un look totalmente diferente.

Para definir un CSS personal, primero tenemos que decirle a nuestra plantilla html (default.html) que si encuentra un CSS personal, lo use (esto va hasta abajo de todos los CSS, para que se sobre-escriba cualquier dependency):

{% if page.custom_css %}
  <link rel="stylesheet" href="{{ site.baseurl }}/css/{{page.custom_css}}.css">
{% endif %}

Después guardamos nuestro CSS personal en la carpeta que dice la ruta (en mi caso css/). Aquí obviamente puedes poner cualquier estilo que quieras.

Finalmente, en cada post o página estática que va generar el sitio, agregamos en el YAML el css personal así:

---
title: "Post 1"
date: '2015-11-10'
featured_image: /images/cover.jpg
layout: post
custom_css: mycss
---

Pequeño caveat, este plugin es un caso de:

GitHub Pages is powered by Jekyll. However, all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.

You can still use GitHub Pages to publish your site, but you’ll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.

Entonces, tendrás que construir localmente el sitio y después subir a Github solo el folder _site.

All about the css

Regresando al CSS, el principal problema que encontré al “imprimir” mis artículos es con este elemento.

Obviamente el CSS está hecho para web, por lo que al pasar cualquier html con una especificación que wkhtmltopdf todavía no comprende, esto puede salir muy mal.

La solución está en comentar los problemáticos webkits, por ejemplo:

table td {
  padding:5px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #ffffff;
/*
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); 
*/

/*
  background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
*/
}

Lo óptimo es guardar un formato que funcione mejor para un pdf en otro CSS. Aquí puedes jugar con el tamaño de la letra, el espaciado, el color y demás.

Es decir, tendrías en tu carpeta dos posts iguales: uno generado con el CSS normal del sitio y otro con el CSS para imprimir. Para no confundir al sistema de archivo del sitio, puedes crear otra carpeta en dónde guardes el post directamente (sin la fecha “2015-11-10”, para que no tome la página como un post).

Cuando hayas subido el sitio, deberías de tener dos sitios estáticos: www.sitio.com/2015/11/10/post1.html (contiene el CSS para web) y otro por ejemplo: www.sitio.com/imprimir/post1.html.

Ahora si usamos la herramienta para convertir a pdf.

wkhtmltopdf

Las instrucciones para bajar e instalar, son bastante sencillas y se pueden encontrar aquí.

Ya que tengas todo instalado, simplemente abre una sessión en la terminal y escribe el comando del programa seguido por el sitio web a “transformar” y el nombre del archivo (debe tener el .pdf):

wkhtmltopdf www.sitio.com/imprimir/post1.html mipost.pdf

Recuerda verificar con ls antes o después en que parte de tu computadora estas, porque ahí se va guardar el pdf!