GlowAdHive🕒😀😃😀

Why Simpler Related Posts Matter For new Jekyll users, especially those hosting on GitHub Pages, setting up a JavaScript-based related post engine like FlexSearch or Lunr can feel overwhelming. But Jekyll is already powerful enough to create related post sections using just Liquid and front matter. This is ideal for: Small blogs or documentation sites Content with well-defined categories or tags Users who want zero dependencies or JavaScript Basic Concept of Related Posts in Jekyll Jekyll processes your Markdown and YAML front matter into a full site at build time. This means you can use logic in your templates to filter, match, and display posts related to the current page by shared metadata like: categories tags layout custom front matter fields Step-by-Step: Related Posts Without JavaScript Step 1: Tag Your Posts Edit your posts and assign tags in the front matter like this: --- title: "Understanding Liquid Filters" tags: [liqui...

The Role of Client-Side Search in Static Blogs For Jekyll sites hosted on GitHub Pages, client-side JavaScript libraries like Lunr and FlexSearch fill the gap left by the absence of server-side processing. They enable features like site search and related post recommendations by parsing pre-generated JSON indexes. Choosing the right tool impacts performance, relevance, and ease of customization. Why Compare Lunr and FlexSearch Both are popular for static site search implementation Both support indexing multiple fields like title, content, tags Both run entirely in the browser, ideal for GitHub Pages They offer different trade-offs in speed, flexibility, and result quality Setup Comparison Lunr Setup Lightweight and minimal Indexing is synchronous No native support for storing additional fields in search results FlexSearch Setup More complex initial config with more options Supports async indexing and searching Full control over stored...

Why FlexSearch for Related Posts While Lunr.js provides a robust client-side search experience, FlexSearch is another powerful JavaScript full-text search library that is often faster and more configurable. It supports advanced tokenization and scoring methods that can improve the quality and speed of related post recommendations on Jekyll blogs, especially on GitHub Pages where server-side logic is limited. Advantages of FlexSearch Higher performance and lower memory footprint compared to Lunr Support for async indexing and searching Multiple search modes (e.g., "match", "score", "strict") for fine-tuned control Better support for complex language processing and custom tokenization Step 1: Generating JSON Data for FlexSearch The JSON structure is similar to Lunr’s, but you can include additional fields or customize as needed: --- layout: null permalink: /flexsearch-posts.json --- [ {% for post in site.posts %} { ...

Why Use Lunr for Related Posts Standard related post systems rely on matching tags or categories, which work for well-structured blogs but fall short for freeform writing. By integrating Lunr.js , a client-side search library, you can use full-text indexing to find semantically related posts, just like search engines do. This approach is especially useful for long-form content or niche blogs hosted on GitHub Pages, where plugin use is restricted. 1. What Is Lunr and Why It Works on Jekyll Lunr.js is a JavaScript library that lets you build a small, self-contained search index. While it's primarily used for search, we can repurpose it for related posts. Here's why it's a great fit: Client-side only – no need for plugins or server logic Customizable index fields (title, content, tags) Ranked results based on relevance Open source and compact Building a Lunr Index for Related Posts Step 1: Create posts.json for Lunr First, we’ll generate a JSON fi...

For larger Jekyll sites or when you want fuzzy matching (e.g., shared keywords in titles or content), Liquid has limitations. This is where a JavaScript-based related post system becomes powerful. It loads a pre-built posts.json file and runs similarity matching in the browser, offering great flexibility without plugins or server-side logic. 1. Export Your Posts into a JSON File Create a file like related.json or all-posts.json inside your _site directory using a custom layout that Jekyll will render. Here's how: # _pages/posts.json --- layout: null permalink: /posts.json --- [ {% for post in site.posts %} { "title": {{ post.title | jsonify }}, "url": "{{ post.url }}", "tags": {{ post.tags | jsonify }}, "categories": {{ post.categories | jsonify }}, "excerpt": {{ post.excerpt | strip_html | truncate: 150 | jsonify }}, "content": {{ post.content | strip_html...

Why Related Posts Matter Related posts are crucial for content discovery, engagement, and SEO. They encourage visitors to explore more articles, reduce bounce rate, and improve internal link structure. But Jekyll on GitHub Pages doesn't support plugins like jekyll-related-posts , so we must rely on smart Liquid logic instead. Basic Strategy: Tag or Category Matching The most straightforward method is matching tags or categories. Here's how to build that manually using Liquid, fully compatible with GitHub Pages. 1. Ensure Posts Have Tags and Categories --- title: "How to Improve Blog SEO" tags: [seo, blogging, optimization] categories: [guides] --- Jekyll automatically makes these available as arrays: page.tags and page.categories . 2. Add Related Posts Section Inside your post layout (e.g., _layouts/post.html ), add this code where you want the related posts to appear: {% raw %} Related Posts {% assign related = site.posts | where_exp: "...