Auto-generating a History page for a static personal website

Published: <2023-10-30 Mon>

I was recently inspired by the 2003 "Patterns for Personal Websites" collection of posts, which details (as the name implies) common elements of personal websites. I have a personal website, so I figured, hey, why not try implementing one of the described patterns?

My personal website is extremely small and doesn't have any long-form writing, so I was particularly drawn to the idea of a "history page." The general idea is to have a page dedicated to documenting changes you make to your website, so viewers who return after a period of time can check to see what's new and also find explanations for content they might think is now missing.

I version-control my website in Git, so I figured, hey, why not try to generate a history page from my git commit history? Of course, I don't have a server backend for my statically-hosted personal site, so anything which relied on API tokens was right out. But, I host on git.sr.ht, which has you deploy to its static hosting service via a two-liner build command. Of course that means that I could expand that build command to be arbitrarily complex. So I thought, why not generate the history page at build time?

Here's the command I eventually came up with, which I run directly in the build.yml:

#!/bin/sh

cat << EOF > history.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>History</title>
  <link rel="stylesheet" href="history.css">
</head>
<body>
<h1>Website History</h2>
This is just a summary of recent changes.
$(git log --pretty=format:'<div class="entry"><div class="date">%ar</div><div class="commit">%B</div></div>')
</body>
</html>
EOF

Really, that's it! The magic here, of course, is that git lets you pass a semi-generic format string, and you can just write HTML in that format string and concatenate it into an HTML file and be done!

I have 8 lines of CSS which make the page look like the rest of my website, but this script is the bulk of it. Of course, with the entry, date, and commit classes in this example it's easy to make the page look however you like.

If you're curious, here's the result on my website: https://ericlondr.es/history.html