The Problem It Solves
Every page on Light School has the same navigation bar. The same footer. The same set of meta tags in the head. If those pieces lived as copied-and-pasted HTML in every file, changing the navigation would mean editing dozens of pages by hand.
That is a recipe for mistakes. One page gets missed. One link is slightly different. Things drift apart.
How It Works
Instead of copying the navigation HTML into every page, we write a single line:
<!-- INCLUDE partials/nav.html -->That is it. When the build script processes a page, it finds that line and replaces it with the entire contents of the nav.html file. The comment disappears. The navigation HTML takes its place.
What the Build Script Does
The logic is straightforward. The build script reads each HTML file as a string of text. It looks for any line that matches the pattern INCLUDE followed by a file path. When it finds one, it reads the referenced file and swaps it in.
This is text replacement. Not a template engine with special syntax. Not a component system with props and state. Just: find this marker, replace it with that file's contents.
The Partials We Use
Light School has five shared partials:
head.html contains the meta tags, tracking code, CSS link, and the opening body tag.
sacred-geo.html adds the background geometric decorations.
nav.html is the navigation bar at the top of every page.
footer.html is the footer at the bottom with links and legal information.
scripts.html loads the JavaScript and closes the body and html tags.
Why Simple Wins
Frameworks like React solve this same problem with components. Those components can do much more, like accept inputs and manage changing data. But for a content site that just needs the same header on every page, a find-and-replace approach does the job perfectly.
I edit nav.html once, run the build, and every page on the site is updated. That is all we need.
