Explore More Passive Income Ideas

creating a custom 404 page in jekyll that converts

Rethinking the 404 Page in Static Sites When users hit a dead-end on your website, their experience doesn't have to end in frustration. A well-designed 404 page can guide lost visitors back on track, or even convert them into subscribers or customers. In Jekyll, crafting a custom 404 page offers both technical control and creative potential. Why Default 404 Pages Don’t Work The typical 404 page is bland, offers no direction, and causes users to bounce. Search engines also pick up on poor navigation. A custom solution not only improves SEO but also keeps your audience engaged. Creating a 404 Page in Jekyll To create a custom 404 page in Jekyll, all you need is a new file at your site root: 404.html Use your layout or a standalone HTML structure. Example: {% raw %} --- layout: default title: "Page Not Found" permalink: /404.html --- <div class="not-found"> <h2>Oops, this page doesn't exist</h2> <p>But don’t worry, her...

multilingual support in jekyll sites without plugins

Why Multilingual Support Matters for Static Blogs

Expanding your blog’s reach to non-English speakers or supporting multiple languages can greatly improve accessibility and user experience. However, traditional methods often rely on Ruby plugins or dynamic backends, which are not compatible with GitHub Pages or fully static deployments. This guide explains how to build multilingual Jekyll sites without plugins or JavaScript, using only native features.

Approach Overview

We’ll use a folder-based approach where each language gets its own root-level directory. For example:

/_index.html
/en/index.html
/fr/index.html
/id/index.html
_layouts/
/_includes/
/_posts/en/
/_posts/fr/

This method is fully static and works flawlessly on GitHub Pages. It allows full control over routing, SEO metadata, and localized content presentation.

Step-by-Step Setup

Step 1: Define Your Languages

Start by deciding which languages you want to support. For example: English (en), French (fr), and Indonesian (id). You’ll create separate folders for each and route content accordingly.

Step 2: Organize the Directory Structure

Create a folder per language with its own index.html and subpages. You can also separate blog posts by language by creating language-specific collections or post folders.

/en/index.html
/en/about.html
/fr/index.html
/fr/a-propos.html
/id/index.html
/id/tentang.html

Step 3: Set Up Navigation

In your navigation bar or header include language switcher links:

<nav>
  <a href="/en/">English</a>
  <a href="/fr/">Français</a>
  <a href="/id/">Bahasa</a>
</nav>

Step 4: Use Includes for Translatable Layouts

Put your layout logic in _includes and inject translated text from front matter or data files.

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

Step 5: Create a Translations Data File

Use _data/translations.yml to store translated strings:

en:
  welcome: "Welcome to my blog"
fr:
  welcome: "Bienvenue sur mon blog"
id:
  welcome: "Selamat datang di blog saya"

Step 6: Add Language Metadata

Each page or post should include the language code in its front matter for indexing and translation logic:

---
layout: default
title: "Tentang Saya"
lang: id
permalink: /id/tentang/
---

Managing SEO for Multilingual Pages

To help search engines identify content languages, add hreflang tags in the <head> section:

<link rel="alternate" hreflang="en" href="/en/" />
<link rel="alternate" hreflang="fr" href="/fr/" />
<link rel="alternate" hreflang="id" href="/id/" />

Also consider localized metadata like descriptions and titles in each page’s front matter for better indexing in local search engines.

Case Study: A Travel Blog With Three Languages

A travel blogger maintaining a static site on GitHub Pages wanted to cater to English, French, and Indonesian readers. Instead of relying on any plugin, they created a subfolder structure for each language and used data files to manage translations. As a result, their bounce rate decreased by 30% in non-English regions and they saw increased traffic from local Google search variations.

Handling Posts Per Language

You can use a folder naming convention like:

/_posts/en/2024-06-01-best-spots-london.md
/posts/fr/2024-06-01-meilleurs-endroits-paris.md

Then load these using custom collections per language or by filtering via the path in Liquid.

Performance and Accessibility

  • Fully static approach ensures blazing fast page loads
  • Does not require JavaScript, making it accessible for screen readers
  • Works out-of-the-box with GitHub Pages and Netlify
  • Optimized for search engines in each language

Drawbacks and Considerations

Managing content in multiple languages manually can be time-consuming, especially if your blog has frequent updates. For larger sites, a headless CMS or automated localization workflow might eventually be needed.

Conclusion

Jekyll is fully capable of serving multilingual content without requiring any plugins. By leveraging directory structures, data files, and basic Liquid templating, you can create a powerful, SEO-friendly multilingual site that’s fast, accessible, and suitable for free hosting platforms like GitHub Pages.


Archives / All Content

© ShiftPathNet . All rights reserved.