Track changes in your site

Your static site has a secret superpower: you can compare it with previous versions of your site!

site.ori

// Simple blog site
{
  posts/ = Tree.map(markdown, Origami.mdHtml)
  index.html = index.ori.html(posts)
  feed.json = feed.ori(posts)
}

$ npm run build
$ cp -r build baseline
$

Start by copying a build to a “baseline” folder.

If you add a new post, comparing a build against the baseline now shows changes: a new post, and updated indexes.

post4.md

---
title: Reading
date: 2025-07-13
---

When I moved to the pond, I knew I wanted to make reading a big part of my daily routine.

$ npm run build
$ ori changes baseline, build
posts:
  post4.html: added
index.html: changed
feed.json: changed
$

If you change a template, you should only see changes in pages that use that template.

index.ori.html

<h1>My blog</h1>

${ Tree.map(_, (post, key) => Tree.indent`
  <li>
    <a href="${ key }">
      ${ post }
    </a>
  </li>
`)}

$ npm run build
$ ori changes baseline, build
index.html: changed
$

No changes means there’s no need to check the browser: the entire site is exactly the same as before!

index.ori.html

<h1>My blog</h1>

${
  // Refactor the template for a post fragment into its own file
  Tree.map(_, postFragment.ori.html)
}

$ npm run build
$ ori changes baseline, build
$

A perfect technique for refactoring!