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.