Multi Language Setup in Jekyll
How to make Jekyll MultilingualIt’s extremely easy to install multilingual support in Jekyll without any plugin. All credits goes to Sylvain Durand post about making Jekyll multilingual, check it out. Here is my setup:
Setting up multilingual in FrontMatter
Simply add ref as a unique identifier to connect pages or posts with different languages and lang to set language code. Only use the ISO 639-1 format as language code.
---
layout: post
lang: en
ref: sitemap
---Hreflang
Let’s add hreflang as a HTML link element in the header. This ensures that search engines serve the correct language in the search results. Under “_includes” - add the following code to “head.html”:
<head>
...
{% assign posts=site.posts | where:"ref", page.ref | sort: 'lang' %}
{% for post in posts %}
<link rel="alternate" hreflang="{{ post.lang }}" href="{{ post.url }}" />
{% endfor %}
{% assign pages=site.pages | where:"ref", page.ref | sort: 'lang' %}
{% for page in pages %}
<link rel="alternate" hreflang="{{ page.lang }}" href="{{ page.url }}" />
{% endfor %}
...
</head>Language selector
A must for a multi language is to have a language switcher. Under “_includes” - add the following code to “header.html”:
<nav>
...
{% assign posts=site.posts | where:"ref", page.ref | sort: 'lang' %}
{% for post in posts %}
<a href="{{ post.url }}">{{ post.lang }}</a>
{% endfor %}
{% assign pages=site.pages | where:"ref", page.ref | sort: 'lang' %}
{% for page in pages %}
<a href="{{ page.url }}">{{ page.lang }}</a>
{% endfor %}
</nav>
...Display posts on homepage
First, under “_layouts” - add the following code to “home.html”:
{% assign posts=site.posts | where:"lang", page.lang %}
<div class="post-listing">
{% for post in posts %}
<a href="{{ post.url | relative_url }}">
<h1>{{ post.heading | escape }}</h1>
</a>
{% endfor %}
</div>Then add ref and lang to “index.md”
---
layout: home
lang: en
ref: index
---Create new .md files for each language and place in root.