I had a jekyll website where I share my publications and write blog. Initially, I set it up to be in Turkish only. However after some time, I learned some English (as you can see, I’m still not fluent) I wanted to make the website available in both Turkish and English.

I searched the web for guides on how to add multiple languages to a Jekyll website, but none of the solutions I found worked for me. Finally, with the help of Cloude 3 Haiku, I discovered a way to achieve this without using folders or plugins.

Now let me explain step by step what I did:

Make copy of pages

I have three pages,

- index.md
- blog.md
- publish.md

I made copy of them and named them as

- index.tr.md
- blog.tr.md
- publish.tr.md

There is default.html under _layouts and header.html under _includes. I made copy of them. I used them as you see below.

For English Pages For Turkish Pages For Index Page
default.html defaulttr.html defindex.html
header.html headertr.html headerin.html

Modify the new files

In defaulttr.html I changed

{%- include header.html -%}

to

{%- include headertr.html -%}

In headertr.html I changed

{%- assign page_paths = site.header_pages | default: default_paths -%}

to

{%- assign page_paths = site.headertr_pages | default: default_paths -%}

📌 I changed the same rows in defindex.html and headerin.html as necessary.

I added YAML front matter to each .md pages as needed.

---
title: Title of page
layout: defindex (for Turkish pages defaulttr, for English pages default,)
lang: en (for index.tr.html and other Turkish pages tr)
---

❗ Don’t forget to add lang to front matter of every blog posts.

Modifying config.yml

I added this to config.yml

languages:
 - en
 - tr

and modified header_pages as shown below in config.yml

header_pages:
 - blog.md
 - publish.md
headertr_pages:
  - blog.tr.md
  - publish.tr.md

Language Switcher

After taking those steps, when I run the website, the first page displayed was the English index page. I then needed to add a language switcher.

I tried various code solutions, but realized it was not possible to change all pages using the same code. After two days of trying different approacher, I finally found a solution that worked for me.

I added this row in headertr.html below {%- endfor -%} above </div>

<a href="{{ page.url | replace:'.tr.html','.html' }}">🇬🇧</a>

This in header.html

<a href="{{ page.url | replace:'.html','.tr.html' }}">🇹🇷</a>

With these changes, I was able to navigate between the Turkish and English versions of my blog and publish pages.

However for the index pages, I needed a different solution. I noticed that when I opened the website, the URL did not include “index.html”. This meant the language switcher was not working correctly on the first page. To adress this, I realized I just needed a direct link, so I added the following code to my defindex.html

<a href="/index.tr.html">🇹🇷</a>

Appropriate page according to browser language

Although my website was now working as I wanted, there was still a problem. My first page was always in English, even if the user’s browser default language was different.

I needed to find a way to detect the user’s browser default language and then open the appropriate index page. Just as Claude 3 Haiku had helped me with the language switcher functionality before, it also assisted me in finding a solution for this issue.

I added this code to defindex.html below {%- include head.html -%} above <body>

  <script> 
  var userLang = navigator.language || navigator.userLanguage; 
  if (userLang.startsWith('tr') && window.location.href.indexOf('index.html') === -1) 
  { window.location.href = '/index.tr.html'; } 
  </script>

This javascript code would work only if there is no index.html in adress bar. So that, by using the language switcher to go to the English index, when default language of browser is Turkish, the code would not work and it would not redirect me back to Turkish index.

Solution of back to home page problem

I use the Minima theme on my Jekyll website. My name is shown at the top left of all pages. When I clicked on it, I went back to the home page, but not to the index.html, rather to the root (/) page.

When the default language of the browser was Turkish, clicking on my name took me to the root (/) page and then javascript code redirected me to the Turkish index pages.

This was a problem when I clicked on my name while I was on an English blog or publish page.

As a solution of this problem, I modified the following rows in all three header pages:

<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>

in header.html and headerin.html I changed "/" to "/index.html" in headertr.html changed it to "/index.tr.html

This ensured that when I clicked on my name in the header, it would take me to the appropriate index page, index.html for the English version, and index.tr.html for the Turkish verison, instead of root (/) page which was causing the redirection issue.

Blog posts

Since Jekyll generates blog post automatically, handling blog posts in both languages would not work the same as other pages. However I found this approach to be easier to manage.

A I mentioned before, I made a copy of blog.md and named it blog.tr.md. Rather than translating all the same blog posts into another language, I’ll write different content in both languages that I don’t want to translate.

To ensure that blog.md and blog.tr.md display the appropriate posts for each language, I added the following code rows:

In blog.md

{% if post.lang == 'en' %}

In blog.tr.md

{% if post.lang == 'tr' %}

below {% for post in site.posts %}

As I mention before, blog posts are more complicated. There were three conditions in blog posts.

  • Turkish posts
  • English posts
  • Not translated posts

For handle this situation, I took the following steps:

  • The blog posts layout came from post.html. It took its format from default.html
  • default.html took its header, which contains page links and language switcher, from header.html.

For the three conditions I mentioned above,

  • I made copies of post.html and named them posttr.html and posten.html
  • For layout of these three files I made copies of default.html and named them
defpost.html
defposttr.html
defopsten.html
  • I connected defposttr‘to headertr, which contains language switcher from Turkish to English.
  • I connected defposten‘to header, which contains language switcher from English to Turkish.
  • I connected defpost to headpost.html which I created for blog posts that are not translated, and I deleted language switcher from it.

After these steps, my blog posts that I add the right front matter to their YAML would behave according to three conditions.

By taking these steps, finally I was able to create a multilingual Jekyll website. I’m excited to continue developing and improving my website in the future.

If you have any question, please feel free to reach out to me at my e-mail.