Turn a Cloned Jekyll Site Into a Multilingual Website?
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:
- Directory-based structure: Separate folders per language (e.g.,
/en/,/id/,/fr/) - Data-driven with plugin: Use
jekyll-multiple-languages-pluginto 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
hreflangtags 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.