Sitio multi lenguaje con Jekyll

Introducción

Hace ya un tiempo, que escribo en Ingles, por que de ese modo llegaba a más personas, pero he pensado que debo igualmente aportar a las personas que no hablan el Ingles, y que hablan mi idioma nativo (Castellano). El mantener dos sitios separados no me atraía mucho, pues las veces que lo intente, descuidaba uno de ellos, en especial desde el punto de vista de diseño y funcionalidad.

Por estos motivos, busque la forma de hacer que Jekyll (el motor que uso para generar este sitio), funcionara para generar un sitio multi lenguaje. Veamos ahora paso a paso como se puede lograr eso.

Instalación de Jekyll

Vamos a asumir que estas usando Mac OS X o GNU/Linux (Ubuntu o Debian). Si usas algún otro, puedes buscar en Google como instalar Jekyll en tu sistema operativo.

Mac OS X

Hay varias formas de hacerlo y la que les mostrare no es precisamente la mejor o peor, solo es la que yo uso.

El primer paso es instalar XCode, este lo instalas del Mac App Store

Luego instalamos homebrew.

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Con eso, ya podemos actualizar ruby.

brew install ruby

Ahora con la última versión de ruby, debemos hacer que esta sea la que nuestra Mac utilize.

echo 'export PATH=/usr/local/Cellar/ruby/1.9.3-p194/bin:$PATH' >> ~/.bash_profile

Y recargamos el perfil.

source ~/.bash_profile

Se recomienda utilizar rvm en lugar de homebrew para instalar la última versión de Ruby, pero yo lo hago asi por que no requiero multiples versiones. Puedes usar otra si te parece.

Finalmente podemos instalar Jekyll

gem install jekyll

Debian y Ubuntu

Si estas trabajando en Ubuntu o Debian, la forma de instalar Jekyll será.

sudo apt-get install ruby1.9.1-dev

y luego:

sudo gem install jekyll

Estructura general del sitio

Nota: No requieres crear esta estructura, ni bajar los archivos de esta seccion, al final del articulo indicare como bajar todo el proyecto, que puede que este algo diferente a lo indicado aqui, pero las instrucciones abajo, te ayudaran a entender y que puedas crear tu propio proyecto

Ahora que tenemos Jekyll instalado, debemos proceder a estructurar nuestro sitio, existen muchas opciones nuevamente, en realidad tantas como personas, pero vamos con la que yo escogi.

/
|
/_layouts/en-default.html
         /en-post.html
         /es-default.html
		 /es_post.html
/css/main.css
/es/index.html
/es/atom.xml
/es/_posts/
            |
			/2013-07-04-hola-mundo.md
/en/index.html
/en/atom.xml
/en/_posts/
            |
			/2013-07-04-hello-world.md

Con esa estructura básica podemos comenzar. Vamos por partes, y creemos la estructura básica y los archivos de estilo, dado que es solo para efectos de demostración de un sitio multilenguaje, no pondre mucho enfásis en este punto y haremos algo realmente sencillo y nos apoyaremos en un template de Zurb Foundation.

Creando un sitio nuevo

A mi me gusta mantener un control de cambios usando git para mis proyectos, esto no es necesario, pero si gustas y usas git tambien, pues vamos.

mkdir ~/jekyll/
cd  ~/jekyll/
git init

Nos bajamos el Foundation.

wget http://foundation.zurb.com/files/foundation-4.2.3.zip

Y lo descomprimimos.

unzip foundation-4.2.3.zip

Borramos lo que nos hace falta.

rm foundation-4.2.3.zip

Realizamos nuestro primer commit,

git add -A
git commit -m 'foundation'

Utilizare el template de blog, de foundation, que pueden bajarlo, entre otros, de aqui

La parte realmente importante de este proyecto, son los layouts. Deben haber layouts para ingles y para español, y deben estar separados unos de otros. Para este sencillo blog, utilizo solo dos layouts, uno que es el default y agrega lo basico de una pagina, y otro que es el layout para los artículos del blog, que pone la informacion de fecha, de autor y el texto mismo del artículo.

Veamos el layout default en Ingles:

{% gist jekyll-multi/_layouts/en-default.html %}

y ahora el de castellano.

{% gist jekyll-multi/_layouts/es-default.html %}

Como podemos apreciar las diferencias estan solo en la traducción de los menús, y de las etiquetas, por razones de SEO, conviene que se traduzcan tambien los comentarios del código html.

Los artículos en castellano deben ir en el directorio /es/_posts/ y los de ingles en /en/_posts/, en Jekyll el directorio donde esta un archivo es la categoría a la que pertenece, y es esta categoría lo que usamos para filtrar los artículos por idioma en el indice de cada sección.

Veamos el index.html en ingles, para darnos cuenta.

{% gist jekyll-multi/en/index.html %}

De igual modo, se puede crear los archivos para atom.xml.

Conclusión

Mantener un sitio en dos idiomas es más sencillo que mantener un sitio separado para cada idioma, a mi me gusta mucho Jekyll, y deseo escribir en Castellano e Ingles, lo que me llevo a buscar una manera de hacerlo, sin perder la calidad del sitio, y mostrar en cada sección información completa en el idioma que le corresponde.

Espero le sea a alguien de utilidad.

Se puede bajar el sitio usuado para el ejemplo aqui