Categories

Multi language site with Jekyll

Written by Guillermo Garron .
Date: 2013-07-04 17:22:35 -0400

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:

<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Jekyll Multi Language</title>
    
  
    <link rel="stylesheet" href="/css/foundation.css" />
  

    <script src="/js/vendor/custom.modernizr.js"></script>

  </head>
  <body>
    
    <!-- Nav Bar -->
    
    <div class="row">
      <div class="large-12 columns">
	<div class="nav-bar right">
	  <ul class="button-group">
	    <li><a href="/en/" class="button">Home</a></li>
	    <li><a href="/en/about.html" class="button">About</a></li>
	  </ul>
	</div>
	<h1>Blog <small>This is my blog. It's awesome.</small></h1>
	<hr />
      </div>
    </div>
    
    <!-- End Nav -->
    
    
    <!-- Main Page Content and Sidebar -->
    
    <div class="row">
      
      <!-- Main Blog Content -->
      <div class="large-9 columns" role="content">
	
	<article>
	  {{ content }}
	</article>
 
      </div>
 
      <!-- End Main Content -->
 
 
      <!-- Sidebar -->
 
      <aside class="large-3 columns">
 
	<h5>Categories</h5>
	<ul class="side-nav">
	  <li><a href="#">News</a></li>
	  <li><a href="#">Code</a></li>
	  <li><a href="#">Design</a></li>
	  <li><a href="#">Fun</a></li>
	  <li><a href="#">Weasels</a></li>
	</ul>
 
	<div class="panel">
	  <h5>Featured</h5>
	  <p>Pork drumstick turkey fugiat. Tri-tip elit turducken pork chop in. Swine short ribs meatball irure bacon nulla pork belly cupidatat meatloaf cow.</p>
	  <a href="#">Read More &rarr;</a>
	</div>
 
      </aside>
 
      <!-- End Sidebar -->
    </div>
 
    <!-- End Main Content and Sidebar -->
 
 
    <!-- Footer -->
    
    <footer class="row">
      <div class="large-12 columns">
	<hr />
	<div class="row">
	  <div class="large-6 columns">
	    <p>&copy; Copyright no one at all. Go to town.</p>
	  </div>
	  <div class="large-6 columns">
	    <ul class="inline-list right">
	      <li><a href="/en/">Home</a></li>
	      <li><a href="/en/about.html">About</a></li>
	    </ul>
	  </div>
	</div>
      </div>
    </footer>
    
    
    
  </body>
</html>

Now the one in Spanish.

<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Jekyll Multi Lenguaje</title>
    
  
    <link rel="stylesheet" href="/css/foundation.css" />
  

    <script src="/js/vendor/custom.modernizr.js"></script>

  </head>
  <body>
    
    <!-- Nav Bar -->
    
    <div class="row">
      <div class="large-12 columns">
	<div class="nav-bar right">
	  <ul class="button-group">
	    <li><a href="/es/" class="button">Inicio</a></li>
	    <li><a href="/es/acerca.html" class="button">Acerca de</a></li>
	  </ul>
	</div>
	<h1>Bitácora <small>Esta es mi maravillosa bitácora en línea </small></h1>
	<hr />
      </div>
    </div>
    
    <!-- End Nav -->
    
    
    <!-- Main Page Content and Sidebar -->
    
    <div class="row">
      
      <!-- Main Blog Content -->
      <div class="large-9 columns" role="content">
	
	<article>
	  {{ content }}
	</article>
 
      </div>
 
      <!-- End Main Content -->
 
 
      <!-- Sidebar -->
 
      <aside class="large-3 columns">
 
	<h5>Categorias</h5>
	<ul class="side-nav">
	  <li><a href="#">Noticias</a></li>
	  <li><a href="#">Codigo</a></li>
	  <li><a href="#">Diseño</a></li>
	  <li><a href="#">Diversión</a></li>
	  <li><a href="#">Comadrejas</a></li>
	</ul>
 
	<div class="panel">
	  <h5>Featured</h5>
	  <p>Pork drumstick turkey fugiat. Tri-tip elit turducken pork chop in. Swine short ribs meatball irure bacon nulla pork belly cupidatat meatloaf cow.</p>
	  <a href="#">Leer más&rarr;</a>
	</div>
 
      </aside>
 
      <!-- End Sidebar -->
    </div>
 
    <!-- End Main Content and Sidebar -->
 
 
    <!-- Footer -->
    
    <footer class="row">
      <div class="large-12 columns">
	<hr />
	<div class="row">
	  <div class="large-6 columns">
	    <p>&copy; Sin derechos de autor</p>
	  </div>
	  <div class="large-6 columns">
	    <ul class="inline-list right">
	      <li><a href="/es/">Inicio</a></li>
	      <li><a href="/es/acerca.html">Acerca de</a></li>
	    </ul>
	  </div>
	</div>
      </div>
    </footer>
    
    
    
  </body>
</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.

---
layout: en-default
title: Blog Posts
---
{% for post in site.posts %}      
  {% if post.categories contains 'en' %}
          <h4><a href="{{ post.url }}">{{ post.title | truncate:200 }}</a></h4>
  {% endif %}
{% endfor %}  

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

permalink

If you enjoyed the article, please share it

twitter | facebook | google+ | linkedin | email | reddit