Multi language site with Jekyll

Introduction

It's been a while that I am writing a blog, but mostly in English, being my native tongue Spanish I wanted to also write in that language, but I needed to find the way to keep one site being it multi-lingual. Now that I am using Jekyll for more than a year, I started to look a way to write in English and Spanish in this site. But of course following the best practices about having a site in two or more languages.

You need to have all labels, and menus in one language per page, you do not have to mix both languages in a single page, I have found the way, and now I want to share it with you.

Jekyll installation

Let's assume you are using Mac OS X, or Ubuntu/Debian GNU Linux, if you are using any other operating system you will have to find the way to install it.

Mac OS X

There are a lot of ways to do this, the one that I am going to show here, is just the one I use not the best, not the worst.

First you need to install XCode, you can download it from the Mac App Store

Then let's install homebrew

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

Now, we can get the lastest version of Ruby, or at least a newer version than the one that is packed with Mac

brew install ruby

We now have newer version of ruby, let's tell our Mac to use it.

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

Reload the profile

source ~/.bash_profile

It is advisable to use rvm instead of homebrew, but I use this method because I do not need two or more versions of Ruby.

Finally, we can install Jekyll

gem install jekyll

Debian or Ubuntu

If you are working with Debian or Ubuntu it will be easier.

sudo apt-get install ruby1.9.1-dev

and then.

sudo gem install jekyll

That is it, done.

Structure of the site

Note: There is no need to download anything from the links below, at the end of this post, you will find a link to download the full project

With Jekyll installed you need to create the basic structure of the site.

/
|
/_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

With this basic structure, we can continue, we will need the css files, and the basic layout. I will use Zurb Foundation. Notice that the site is divided into two categories, or main categories es and en, one for each language.

Creating the new site

It is not needed to use git, but I like to use it, so, the next steps are:

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

Let's download foundation

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

uncompress it.

unzip foundation-4.2.3.zip

Delete the zip file

rm foundation-4.2.3.zip

Go for the first commit.

git add -A
git commit -m 'foundation'

I will use the blog template from Foundation for this example, you can see it, here

The most important part is the layout, I will use for this small example two files to create the basic layout. default.html and post.html. Because this is a two language site, I will create these files. en-default.html, en-post.html, es-default.html and es-post.html.

Let's see the default layout in English:

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

Now the one in Spanish.

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

As you can see the basic differences are just the translation of all menus, and labels. It is of course needed to have even the html comments translated to make Google sure which is the language used by each category.

The Spanish posts should go to /es/_posts/ and the English ones to /en/_posts/, with Jekyll, each folder is a category, so in this case we have two English and Spanish. And we will use these categories to filter the posts in the index file of each one of the sections.

See the index file of the English category to see how this works.

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

You can use the same method to create the atom.xml for each language.

Conclusion

Maintain a single site with two languages is easier to keep one for each language, that is why I decided to go this way, and at the same time I have learned how flexible Jekyll is.

You can download all files of this project here