Turn a Cloned Jekyll Site Into a Multilingual Website?

By -

Want to Serve Your Jekyll Site in Multiple Languages?

After you clone and modularize your Jekyll theme, one of the most powerful upgrades you can add is multilingual support. Whether you’re publishing documentation, a blog, or a portfolio — localization helps you reach new audiences and markets.

Jekyll doesn’t support multiple languages out-of-the-box, but you can achieve it using smart data structure, flexible layouts, and community plugins.

Step 1: Choose a Multilingual Strategy

There are two common approaches to multilingual Jekyll:

  1. Directory-based structure: Separate folders per language (e.g., /en/, /id/, /fr/)
  2. Data-driven with plugin: Use jekyll-multiple-languages-plugin to manage translations

We’ll use the second method — cleaner, scalable, and works better with modular cloned themes.

Step 2: Install the Multilingual Plugin

gem "jekyll-multiple-languages-plugin"

Add it to your _config.yml:

plugins:
  - jekyll-multiple-languages-plugin

Specify Supported Languages

languages: ["en", "id", "fr"]
default_lang: "en"
exclude_from_localizations: ["assets", "admin"]

This will tell Jekyll to build a version of your site for each language.

Step 3: Create Translation Data Files

In your _data folder, create YAML files for each language:

_data/translations.en.yml
_data/translations.id.yml
_data/translations.fr.yml

Example Content:

title: "Welcome to My Site"
menu:
  home: "Home"
  about: "About"
  contact: "Contact"

Use those values in includes:

{% raw %}
<nav>
  <a href="/">{{ site.data.translations[site.lang].menu.home }}</a>
</nav>
{% endraw %}

Step 4: Translate Content Files

Create versions of each content file with language suffixes:

_posts/
  2025-07-01-intro.en.md
  2025-07-01-intro.id.md
  2025-07-01-intro.fr.md

_pages/
  about.en.md
  about.id.md

Each file should have front matter that includes:

lang: en
permalink: /about/
title: "About Us"

Step 5: Localize Includes and Layouts

Update your modular includes to pull text from translation data instead of hardcoding:

{% raw %}
<h1>{{ site.data.translations[site.lang].title }}</h1>
{% endraw %}

You can even pass parameters to includes for flexible rendering:

{% raw %}
{% include section.html 
  heading=site.data.translations[site.lang].cta.title 
  text=site.data.translations[site.lang].cta.description %}
{% endraw %}

Step 6: Add Language Switcher

Let users navigate between language versions:

{% raw %}
<ul class="lang-switcher">
  {% for lang in site.languages %}
    <li>
      <a href="{{ page.url | replace: '/' | prepend: '/' | prepend: lang | append: '/' }}">
        {{ lang | upcase }}
      </a>
    </li>
  {% endfor %}
</ul>
{% endraw %}

Step 7: Configure Build and Deployment

Once localization is active, each language will live under its own path:

  • /en/ → default language
  • /id/ → Indonesian version
  • /fr/ → French version

Use Netlify, GitHub Actions, or Cloudflare Pages with bundle exec jekyll build to generate the multilingual output.

Optional: Use Multilingual Collections

If you use custom collections, add language support in the file structure:

_tutorials/
  welcome.en.md
  welcome.id.md

SEO Tips for Multilingual Sites

  • Add hreflang tags in your _includes/head.html
  • Customize titles and meta descriptions per language
  • Ensure sitemaps include all localized URLs

Example hreflang Tags:

{% raw %}
<link rel="alternate" hreflang="en" href="{{ site.url }}/en{{ page.url }}" />
<link rel="alternate" hreflang="id" href="{{ site.url }}/id{{ page.url }}" />
<link rel="alternate" hreflang="fr" href="{{ site.url }}/fr{{ page.url }}" />
{% endraw %}

Conclusion: Modular Cloning Enables Global Publishing

Forking got you started. Cloning gave you control. Modularizing made your theme reusable. Now, making your Jekyll site multilingual opens the door to global reach and accessibility.

Whether you're running a personal blog, documentation, or business site — internationalization is now within reach, thanks to your clean cloned foundation and the right plugin strategy.