Posts

Showing posts with the label p11

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:

  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.

How Do You Build a Plugin-Friendly Workflow After Cloning a Jekyll Theme?

Ready to Unlock the Full Power of Jekyll Plugins?

Once you clone a Jekyll theme and break free from GitHub Pages restrictions, you gain access to the entire ecosystem of Ruby gems and custom plugins. But many users don’t take full advantage of this newfound freedom.

This article walks you through building a flexible, plugin-friendly workflow after you've converted from a fork to an independent Jekyll project.

Why You Couldn't Use All Plugins Before

GitHub Pages imposes strict limitations on what plugins you can use for security and performance reasons. Only a few "whitelisted" plugins are allowed, and anything outside that list will be ignored unless you build the site locally or externally.

Now that you're using a cloned repo — and ideally deploying with a custom build step — you can enable plugins freely.

Step 1: Create a Clean Gemfile

If your project doesn't already have a Gemfile, create one to manage plugins using Bundler.

source "https://rubygems.org"

gem "jekyll", "~> 4.3"

# Core Plugins
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-feed"

# Optional Plugins
gem "jekyll-redirect-from"
gem "jekyll-archives"
gem "jekyll-paginate-v2"
gem "jekyll-include-cache"

# Your Custom Plugin (if any)
# gem "your-plugin-name"

Then run:

bundle install

Step 2: Enable Plugins in Your _config.yml

Add the plugins you want to activate in your main config file:

plugins:
  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-feed
  - jekyll-redirect-from
  - jekyll-paginate-v2

Some themes may use the deprecated gems: key — replace it with plugins:.

Step 3: Use Bundle to Build and Serve

Replace old Jekyll commands with Bundler equivalents to ensure plugin compatibility:

bundle exec jekyll serve
bundle exec jekyll build

This guarantees that your project uses the exact versions specified in the Gemfile.lock.

Step 4: Move Your Build Process Off GitHub Pages

If you're still letting GitHub Pages build your site, you're stuck in restricted mode. To unlock plugins, you need to build the site yourself and push the generated _site folder to the deployment platform.

Recommended Hosting Options

  • Netlify: Runs bundle exec jekyll build automatically and supports custom plugins
  • Cloudflare Pages: Works with custom build commands
  • GitHub Actions: Automate builds before pushing to gh-pages branch

Step 5: Explore Advanced Plugins for Real Use Cases

1. SEO and Performance

  • jekyll-seo-tag — adds meta tags, Open Graph, and JSON-LD
  • jekyll-sitemap — auto-generates your sitemap.xml
  • jekyll-minifier — compresses HTML output (third-party)

2. Content Management

  • jekyll-paginate-v2 — flexible pagination for blogs, categories, tags
  • jekyll-archives — auto-creates yearly/monthly archive pages
  • jekyll-include-cache — improves performance with cached includes

3. Navigation and UX

  • jekyll-redirect-from — setup redirects from old URLs
  • jekyll-toc — automatic table of contents per page
  • jekyll-multiple-languages-plugin — multilingual content

Step 6: Split Config Files for Different Environments

For large projects, separate your dev and production configs:

_config.yml
_config.dev.yml
_config.prod.yml

Build with:

bundle exec jekyll build --config _config.yml,_config.prod.yml

Step 7: Version Control Your Dependencies

Keep both Gemfile and Gemfile.lock in your repo. This locks exact plugin versions and avoids build inconsistencies.

Common Mistakes to Avoid

  • Missing Bundler: Always use bundle exec when running Jekyll
  • Relying on GitHub Pages for plugin builds: It won’t work — use external builds
  • Forgetting to declare plugins in _config.yml
  • Installing plugins globally: Prefer project-local installation via Gemfile

Conclusion: Cloning Sets You Free — Now Take Control with Plugins

Forking is fast, but limiting. Once you clone a Jekyll project, you're finally in full control. Use that opportunity to build a real development workflow that scales — with SEO tools, custom layouts, redirects, multilingual support, and optimized performance.

You’ve broken the fork. Now unlock Jekyll’s full ecosystem and build something your way.