Working with Jekyll Layouts and Includes

Learn how to use Jekyll layouts and includes to create reusable website components and streamline your site development process.

Introduction

Jekyll’s layouts and includes are powerful tools that allow you to abstract common website elements and reuse them across your site. This not only makes your site more consistent but also significantly speeds up development and maintenance.

Understanding Layouts

Layouts are templates that wrap around your content. They’re used to define a common structure for your pages or posts.

Creating a Layout

1. Layouts are stored in the _layouts directory.
2. To create a layout, simply create a new HTML file in this directory. For example, default.html.

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

In this example, {{ page.title }} dynamically inserts the title of the page or post using it, and {{ content }} is where Jekyll inserts the content from your Markdown file.

Using a Layout

In your Markdown file’s front matter, specify the layout you want to use:

---
layout: default
title: My First Post
---

Working with Includes

Includes allow you to insert snippets of code into your layouts or content. They’re perfect for reusable components like headers, footers, and navigation bars.

Creating an Include

1. Includes are stored in the _includes directory.
2. To create an include, add a new file in this directory. For example, header.html.

<header>
    <nav>
        <ul>
            <li><a href="{{ site.baseurl }}/about">About</a></li>
            <li><a href="{{ site.baseurl }}/contact">Contact</a></li>
        </ul>
    </nav>
</header>

Using an Include

To use an include in a layout or another include, use the include tag:

{% include header.html %}

Practice Exercise

1. Create a default layout that includes a basic HTML structure.
2. Design a header.html and footer.html include for navigation and footer content, respectively.
3. Create a new page that uses your default layout and includes your header and footer. Make sure this page contains some basic content to demonstrate the layout and includes in action.

Additional Resources

• Jekyll Layouts Documentation
• Jekyll Includes Documentation

< Previous Next >

You can use the arrows  ← → on your keyboard to navigate between lessons.