Nested Layouts for Clean Architecture

Why Layout Architecture Matters in Static Sites As your Jekyll site grows in complexity—adding blog posts, documentation, landing pages, and custom sections—your layout files can become bloated. Nested layouts allow you to separate concerns, improve reuse, and scale your HTML templates with a modular approach. The Concept of Layout Inheritance Jekyll allows layouts to inherit from other layouts using the layout key in the front matter of a layout file. This means you can define a base layout that handles your global HTML scaffolding, and then child layouts that insert their own structure or components. Example: Building a Modular Layout Hierarchy Imagine a site that has: A universal base layout with the doctype, head, and body wrapper A page layout for general pages A blog layout for articles with metadata and timestamps A docs layout that adds a sidebar and TOC Step 1: Create a Base Layout <!DOCTYPE html> <html lang="en"> <hea...

Reusable Partials for Faster Builds

Understanding Partials in Jekyll

Partials are modular chunks of HTML used in Jekyll to simplify layout structure and promote code reuse. Defined inside the _includes directory, partials can be inserted anywhere in layouts, pages, or posts using the {% include %} tag.

By building your site using partials, you can significantly reduce redundancy, improve rendering performance, and make future changes much easier to manage.

Why Partials Matter for Performance

When Jekyll processes your site, it compiles every layout, include, and content page into final HTML. Repeating similar HTML structures in multiple templates leads to unnecessary parsing and rendering. Reusable partials solve this by consolidating those structures in one place.

Creating Your First Partial

Let’s start with something simple: the site’s navigation bar.

Step 1: Create an Include File



<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="/docs/">Docs</a></li>
  </ul>
</nav>

Step 2: Include in Layout



...
<body>
  {% include nav.html %}
  <main>
    {{ content }}
  </main>
</body>
...

Now, the navigation only needs to be edited in one file, and changes reflect site-wide instantly.

Partial Use Cases That Improve Performance

1. Headers and Footers

These are standard includes that appear on every page. Moving them into partials avoids repeating them in multiple layouts.

2. Post Metadata

Use a partial to display post info like date, author, tags, and categories consistently across posts.



<div class="post-meta">
  <p>Published on {{ page.date | date: "%B %d, %Y" }}</p>
  <p>Author: {{ page.author }}</p>
</div>

3. Call to Action Sections

Buttons, newsletters, and site-wide CTAs often repeat on many pages. Create a flexible partial with parameters.



<div class="cta">
  <p>{{ include.message }}</p>
  <a href="{{ include.link }}" class="btn">{{ include.label }}</a>
</div>


{% include cta.html message="Join our newsletter" link="/subscribe/" label="Subscribe Now" %}

Passing Variables to Partials

Jekyll allows you to pass values when including partials. This makes your components dynamic without duplicating code.

Example: Dynamic Sidebar


{% include sidebar.html active="blog" %}



<ul class="sidebar-nav">
  <li class="{% if include.active == 'home' %}active{% endif %}"><a href="/">Home</a></li>
  <li class="{% if include.active == 'blog' %}active{% endif %}"><a href="/blog/">Blog</a></li>
</ul>

This approach gives you fully reusable navigation components tailored per page without repeated code blocks.

Organizing the _includes Directory

For larger projects, the _includes directory can grow quickly. Use subfolders for structure:

  • _includes/nav/ for navigation components
  • _includes/posts/ for post-related components
  • _includes/sections/ for modular sections like testimonials or footers

This modular system also makes collaboration easier in multi-contributor projects.

Case Study: Modularizing a Blog Theme

Project Setup

A blog hosted on GitHub Pages used a single layout file with 600+ lines of HTML. Updates to navigation or footer required edits in multiple spots.

Action Taken

  • Split layout into base + post + page
  • Moved header, footer, sidebar, and CTAs to partials
  • Used conditional includes for sidebar visibility

Results

  • Time to build dropped by ~30%
  • Codebase shrank by 25%
  • Editing structure became 3x faster

Tips for Building Effective Partials

Keep Logic Minimal

Includes should be mostly presentational. Avoid complex Liquid logic inside them unless necessary.

Use Naming Conventions

Prefix your includes with purpose: nav-, post-, section-, etc.

Document Parameters

If you pass many variables, document them in a README or comment inside the include for clarity.

Testing Partials Efficiently

Partials can be tested in isolated HTML files. Create a temp layout or test page that includes the partial and feeds it different data to ensure it works as expected.


---
layout: base
title: "Partial Test"
---

{% include cta.html message="Test CTA" link="#" label="Click Me" %}

When Not to Use Partials

  • For tiny one-liner HTML elements
  • When duplication happens only once
  • When it introduces more cognitive overhead than benefit

Balance reuse with simplicity. Over-modularization can become harder to maintain in small sites.

Conclusion

Reusable partials are one of the core performance and productivity boosters in Jekyll. They reduce redundancy, improve build performance, and provide centralized control over your site structure. With consistent usage of partials, your GitHub Pages site becomes leaner, faster, and easier to maintain.

Next in the Series

In the next article, we’ll dive deeper into how to minimize template repetition by combining partials with layout inheritance for ultimate DRY (Don't Repeat Yourself) efficiency.


Archives / All Content

© NetBuzzCraft🕒😃😃😃 . All rights reserved.