RobotnixAcademy

Unit 03 · lesson

Build the First Layout

Now perform the refactor for real.

The target is not "make it look the same."

The target is:

remove duplicated document structure while preserving the generated result.

Baseline first

Before refactoring, capture:

  • Home page screenshot;
  • About page screenshot;
  • generated HTML from each page;
  • current source tree.

That gives you something to compare against.

Refactor sequence

  1. Create _layouts/default.html.
  2. Move shared document-shell markup into it.
  3. Add {{ content }} where page content belongs.
  4. Give each page front matter selecting the layout.
  5. Remove duplicated shell markup from individual pages.
  6. Build.
  7. Compare output.

Expected invariant

The source structure changes dramatically.

The visible page may change very little.

That is okay.

Refactoring often improves internal structure while preserving behavior.

Inspect the diff mentally

Before:

index = full HTML shell + Home content
about = full HTML shell + About content

After:

default layout = shared HTML shell
index = Home content + metadata
about = About content + metadata

Jekyll performs the composition.

Failure analysis

If both pages suddenly lose the <head> metadata, what shared file becomes your first suspect?

The layout.

If only About loses its title, what becomes more likely?

Page-specific front matter or content.

Shared abstractions change the shape of failures.

That is not bad. It means one responsibility now has one owner.

Evidence checkpoint

Save:

Files edited before refactor:
Files edited after refactor:
Shared responsibility moved to:
Generated behavior preserved? yes/no
Evidence: