Unit 03 · lesson

Header and Footer Refactor

Now finish the shared page shell.

Your default layout should become readable enough that another student can see the page architecture without scrolling through every repeated detail.

Suggested responsibility split

_layouts/default.html
  document shell
  include header
  include navigation
  main/content boundary
  include footer

Potential files:

_includes/header.html
_includes/navigation.html
_includes/footer.html

Do not create all three if your current site is tiny and a combined header/navigation include is clearer.

The principle is ownership, not folder count.

Use semantic structure

A clean generated shell might contain:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Jekyll helps you reuse the source, but you still control whether the HTML is meaningful.

Refactor with invariants

Before changing source, define what must remain true:

  • site title still appears;
  • navigation still works;
  • page content remains inside main content;
  • footer appears once;
  • page title remains correct.

Refactor.

Build.

Verify each invariant.

Failure scenario

If the footer appears twice on every page, inspect the shared composition chain.

Maybe both the default layout and a nested layout include it.

The fact that every page fails the same way is evidence pointing toward shared structure.

Checkpoint

Draw the source composition of one page:

PAGE

PROJECT LAYOUT? (if used)

DEFAULT LAYOUT
 ↙        ↓        ↘
HEADER    CONTENT   FOOTER

Use your real files.