Includes as Smaller Reusable Pieces

Layouts solve repeated page shells.

But a layout can still become enormous.

Jekyll includes let you move reusable fragments into _includes.

Create navigation as an include

Add:

_includes/navigation.html

with simple navigation markup.

Then call it from the layout:

{% include navigation.html %}

Jekyll reads the include file and inserts its content during rendering.

The browser never requests _includes/navigation.html as a client-side component.

This is build-time composition.

Why use an include?

Good reasons:

• navigation repeats;
• footer repeats;
• a complex reusable block needs one owner;
• moving the fragment makes the layout easier to read.

Weak reason:

I can put every <div> in its own file.

Too many tiny includes can make a site harder to trace and can add build work.

Guided refactor

1. Capture current generated navigation.
2. Move its source into _includes/navigation.html.
3. Replace the old markup with the include tag.
4. Build.
5. Compare generated output.

The generated HTML should remain structurally equivalent.

Failure scenario

Rename the include file but forget to update the tag.

Read the build error.

The failure is at template composition, not in browser navigation behavior.

Checkpoint

Explain when you would use:

• a layout;
• an include;
• page content.

Give one portfolio example for each.