Mastering the _includes Folder: Reusable Snippets for Cleaner Templates

By -

If you have already worked with the _layouts folder in Jekyll, you may have noticed that layouts can sometimes get cluttered with repeated code. Navigation menus, footers, social sharing buttons, or call-to-action banners often appear across multiple pages. Writing the same markup over and over makes your site harder to maintain. That is where the _includes directory comes in. This folder is designed to store reusable snippets of code that you can inject into layouts or even directly into posts and pages.

Main Questions Answered in This Guide

What are includes in Jekyll

Includes are small reusable code snippets stored in the _includes folder. Instead of writing the same piece of HTML in multiple places, you can put it in one file and then reference it wherever needed. For example, if you create a file called header.html inside _includes, you can include it in a layout with:

{% raw %}{% include header.html %}{% endraw %}

This makes your layouts cleaner and easier to manage. If you ever want to update your site’s header, you only need to edit header.html once, and the changes will apply everywhere it is included.

When should you use the _includes folder

Use the _includes folder when:

  • You have repeated code across multiple layouts (e.g., footers, navigation bars).
  • You want to keep your layout files short and focused.
  • You need flexible components that can change based on parameters.
  • You are building modular designs where different parts of the site share the same elements.

In short, includes are for anything you expect to reuse often. They help you avoid redundancy and reduce maintenance headaches.

How to include a file in layouts or posts

The syntax for including a file is simple:

{% raw %}{% include filename.html %}{% endraw %}

Make sure the file is placed in the _includes folder. If the file is in a subfolder, reference it with the path:

{% raw %}{% include navigation/menu.html %}{% endraw %}

This command works inside layouts, posts, and even standalone pages. It gives you complete flexibility in how you build your templates.

How to pass parameters into includes

Includes become even more powerful when you pass parameters. For example, you can make a button component reusable across different sections of your site:

{% raw %}{% include button.html text="Read More" url="/about" %}{% endraw %}

Inside button.html, you can access the parameters like this:

<a href="{{ include.url }}" class="btn">{{ include.text }}</a>

This allows you to create flexible components without hardcoding values. You can change the button text and link on the fly while using the same snippet everywhere.

Examples of common includes you can create

Here are some useful snippets you might want to place in your _includes folder:

  • header.html – Contains your site’s logo, navigation menu, and search bar.
  • footer.html – Includes copyright text, social media links, and site credits.
  • analytics.html – Stores tracking scripts (Google Analytics, Plausible, etc.).
  • related-posts.html – A reusable block that shows related posts at the end of articles.
  • call-to-action.html – A reusable CTA banner to encourage subscriptions or downloads.

Each of these can be updated in one place and reused across your entire Jekyll site.

How includes help avoid code repetition

One of the biggest challenges when building static sites is keeping the codebase clean. Without includes, every layout might need its own copy of a navigation menu or footer. If you change a link, you would have to update it everywhere. With includes, you update the file once and Jekyll automatically injects it wherever it is referenced. This is especially useful for blogs with dozens or even hundreds of posts, where manually updating shared elements would be impossible.

Common errors and how to fix them

Beginners sometimes run into issues like:

  • Placing include files outside the _includes folder (Jekyll will not find them).
  • Misspelling file names in the {% raw %}{% include %}{% endraw %} tag.
  • Forgetting to close Liquid tags inside the include file, causing build errors.
  • Passing parameters incorrectly (make sure they are written as key="value" pairs).

Fortunately, Jekyll’s error messages usually point out where the problem is, so you can fix it quickly.

SEO and performance benefits of using includes

While includes are primarily about clean code, they also have indirect SEO and performance benefits. A consistent header and footer improve site structure, which search engines appreciate. Having analytics or metadata in a single include file ensures that every page is correctly tracked. Finally, using modular code makes your site easier to optimize and update, which means fewer broken elements over time.

What to explore after mastering includes

Once you are comfortable with _includes, the natural next step is to learn about the _data folder. While includes give you reusable templates, the data directory allows you to manage structured content like navigation menus, team members, or product lists. The combination of includes and data files will take your Jekyll site to a new level of flexibility and maintainability.

Final Thoughts

The _includes folder is one of Jekyll’s most powerful features for keeping your site clean, modular, and easy to maintain. By learning how to use includes effectively, you not only save time but also reduce the chances of making errors across your templates. With parameters and reusable snippets, you can build flexible components that adapt to different needs. Mastering includes is a key step toward building professional GitHub Pages sites that scale gracefully as your content grows.

What Should You Do Next

Create a new file in your _includes folder—start small, maybe with a footer.html. Include it in your default layout and watch how easy it becomes to make changes across your site. Once you are confident, experiment with parameterized includes like buttons or banners. Then, move forward to the _data directory to learn how to manage dynamic content sources. This progression will help you become not just a Jekyll user, but a Jekyll power builder.