Unit 03 · lesson
The Cost of Copy-Paste HTML
Open two pages in your portfolio.
If both contain the same <head>, navigation, footer, and wrapper markup, you have already created a maintenance problem.
Copy-paste feels fast when there are two pages.
It feels terrible when there are twenty.
The repeated-change test
Imagine you need to add one stylesheet link to every page.
If each page owns a full HTML shell, you must edit every page.
Now imagine the same site uses one shared layout.
You edit one file.
Jekyll rebuilds every page that uses it.
That is the architectural reason layouts exist.
Find repetition in your project
Compare index.html and about.md or equivalent pages.
Mark repeated responsibility:
- document shell;
<head>metadata;- site navigation;
- page wrapper;
- footer;
- shared scripts/styles.
Do not remove it yet.
First measure it.
Duplication is more than repeated text
Two pages can be duplicated even if one says "Home" and one says "About."
The structure may be the same while the content changes.
That suggests a template boundary:
REUSABLE STRUCTURE
+ PAGE-SPECIFIC CONTENT
= GENERATED PAGEFailure scenario
Suppose you update navigation on four of five pages.
The site builds successfully.
The browser shows valid pages.
But one page has stale navigation.
Nothing crashed.
This is a maintainability failure caused by duplicated structure.
Portfolio action
Create a duplication inventory:
| Repeated structure | Files containing it | Candidate shared responsibility |
|---|---|---|
| document shell | Home + About | layout |
| navigation | Home + About | include/layout |
| footer | ... | include/layout |
Checkpoint
Answer:
What kind of change would force you to edit multiple files in the current portfolio?
That is the pressure that will drive the layout refactor.