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...

Speed Up Layouts with Nested Structures

Why Layout Structure Matters in Jekyll

In Jekyll, layouts define the skeleton of your pages. A smart layout structure can drastically reduce rendering time, especially on large projects. Rather than repeating code across templates, using nested layouts ensures consistency, modularity, and efficiency in rendering and maintenance.

The Problem with Flat Layouts

In many beginner Jekyll sites, a single layout contains all HTML: header, footer, navigation, and content. This approach can cause:

  • Code duplication across multiple layouts
  • Slower build performance due to repeated parsing
  • Maintenance issues when structural changes are needed

Nested layouts solve these by splitting layouts into reusable blocks and reducing the amount of work Liquid has to do per page.

How Nested Layouts Work

Nested layouts allow one layout to extend another using the layout attribute. This way, you can create a base layout, and other layouts can build upon it.

Example: Creating a Base Layout



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ page.title }}</title>
</head>
<body>
  {% include header.html %}
  <main>
    {{ content }}
  </main>
  {% include footer.html %}
</body>
</html>

This layout includes the header and footer from the _includes directory and provides a {{ content }} block for inner layouts.

Extending the Base Layout

Now, create a secondary layout that uses the base:



---
layout: base
---

<div class="blog-post">
  {{ content }}
</div>

All pages that use the blog layout will automatically inherit the structure from base and wrap their content in a <div> with class blog-post.

Case Study: Applying Nested Layouts to a Blog

Let’s assume you're building a blog on GitHub Pages with multiple content types: blog posts, documentation pages, and landing pages. Each content type can have a specific layout built on a shared base.

1. Base Layout

Handles core structure: head tags, site header, footer, analytics scripts.

2. Blog Layout

Adds blog-specific styling and structure such as post metadata, categories, etc.

3. Docs Layout

Adds a sidebar and breadcrumb navigation, still inheriting from base.

Benefits Observed

  • Decreased page build times by up to 20% on large sites
  • Cleaner templates and improved code readability
  • Less repetition and more centralized control

Using Nested Includes Inside Layouts

Layouts can also use includes to further modularize their structure. For example:



{% include header.html %}
{% include navigation.html %}
<main>{{ content }}</main>
{% include footer.html %}

This way, layout changes only happen in one place, and include updates apply globally. You also improve build performance since Jekyll processes less repeated HTML.

Performance Benchmarks

Scenario

A sample site with:

  • 50+ blog posts
  • 10 custom pages
  • Multiple layout types

Switching from flat layouts to nested and included templates yielded:

  • 20–25% faster local builds
  • Better memory usage on large includes
  • More maintainable structure

Best Practices for Layout Nesting

Keep It Shallow

Avoid deeply nested layouts (3+ levels). It adds cognitive overhead and makes debugging harder.

Name Clearly

Use descriptive names like base.html, blog.html, docs.html, and landing.html.

Don’t Overuse Includes

Use includes for actual reusable content, not just for every small div. Too many includes can slightly hurt build time.

Migration Strategy

1. Identify Repeating Blocks

Audit your layouts to find repeated structures (e.g., headers, footers, nav).

2. Create Base Layout

Extract common elements into a new base.html layout.

3. Refactor Other Layouts

Point all existing layouts to use layout: base.

4. Move Shared Components to Includes

Files like header, footer, and menus should go into the _includes folder.

Real-World Example

One GitHub Pages project moved from three flat layouts to a base+sub layout model. After restructuring:

  • They cut their theme size by 40%
  • Builds dropped from 7.4s to 5.2s
  • They made 1 change to the base, and 6 layouts were updated instantly

Conclusion

Nested layouts in Jekyll are not just about code cleanliness. They also have a direct impact on performance, build time, and maintainability—especially for static sites hosted on GitHub Pages. Whether you’re running a personal blog or a documentation-heavy project, using base layouts and structural nesting will streamline both development and deployment.

Next in the Series

In the next article, we’ll look at how to build reusable partials using include files to further reduce redundancy and speed up rendering.


Archives / All Content

© NetBuzzCraft🕒😃😃😃 . All rights reserved.