How I Built This Site

· updated

I think this is the 4th or 5th iteration of my website.

Goals

  1. Able to write the website in markdown, within Obsidian.
  2. Being able to push updates simply/automatically from Linux.
    1. Include auto-generated index pages.
    2. Alternative links for lots of pages, so they sit at a slash-page (like /intake, /feed, /links, etc)
  3. Small / lightweight user interface. Ref:
    1. https://macwright.com/2016/05/03/the-featherweight-website
    2. https://tinyprojects.dev/posts/tiny_websites_are_great
    3. SVG for graphics, if needed
    4. Test with https://pagespeed.web.dev/ and https://www.webpagetest.org/
  4. A place to host my small apps

Contents

  • Home
    • Projects
      • Including list of ideas for things I haven’t actually done
    • Blog
      • Individual posts
    • Intake
    • Shelf
    • Nope
    • Resume
    • Apps (not in the header)
      • Perpetual game
      • Fermi game
    • RSS

Plan

Pipeline

Hugo seems to do everything needed, so it will just link directly to an Obsidian subfolder.

Aliases will be handled via Obsidian front-matter:

aliases:
 - /intake
 - /in

Content uses YAML headers also for ‘date’ (created date), with last modified coming from the file system.

Sync:

cd (folder)
hugo --minify
rsync -av --delay-updates --delete [censored stuff]

Use a list.html template to add an index for each folder (projects, blog, maybe shelf)

Site design

To keep the page load under 15 kb, the templates should have:

  • No webfonts.
  • Inline/minimal CSS via a stlye tag in the head
  • js - probably none needed

Templates:

  • shell.html - header, navigation, footer, css, js (if any) - 4kb limit
  • content.html - the body of the page - <11 kb goal (~2000 words)
  • list.html - for the auto-gen folder indexes

Images - Nope. Inline SVG if needed.

Setup Steps

  • Setup hugo
mkdir -p ~/.local/bin
HUGO_VERSION="0.xxx.0" # Lookup latest version manually
wget -qO- "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz" \ 
 | tar xz -C ~/.local/bin hugo
hugo version
  • Build templates above. Ended up with:
    • hugo.toml - Config file. Site setup, menu list, also configs RSS
    • baseof.html - base page
    • single.html - filters so ‘updated’ date only shows if modified since created
    • list.html - every index.md gets an auto-generated chronological index
    • index.html - Shows most recent edits
  • Point content/ at Obsidian folder
  • setup hugo.toml to generate the RSS
  • write a 3-line rsync script for Hugo
    • Extra lines to copy app folders as-is

To fix

  • md links - does jwbatey.com need them? If not, filter out the Obsidian style links. Might need a build step.
  • Switch the website to a Things style dark color scheme, assuming low enough kb. ✅ 2026-03-11
  • Figure out if the triple-single-quote is working because of Firefox themes or what ✅ 2026-03-11 (Working due to Hugo)
  • Fix RSS feed to use modifed date if created is blank. Right now it seems to default to 0001-01-01 - for now I just set dates on my pages ✅ 2026-03-15
  • Setup some photo database?
  • Allow use of LaTeX, using KaTex js probably - https://gohugo.io/content-management/mathematics/
  • Add a copy button (if space allows) to the triple-single-quote ✅ 2026-03-11
  • Setup aliases in nginx ✅ 2026-03-14

2026-08-22 Improvements

  • [-] Consider moving blog to Astro - https://blog.ricardof.dev/why-i-rewrote-this-blog-5-times/ - not many advantages over Hugo. The Obdisian style link handling was the big one. 📅 2026-08-26 ❌ 2026-08-27
  • [-] Remark42 comments - https://remark42.com/ - CANCEL - I’d prefer the site remain static flat. Looking at js alternatives. ❌ 2026-08-27
  • Figure out a way to share obsidian vault files where possible; needs heavy PII filtering 🔽
  • Add /favicon.ico (on NetNewsWire, my RSS feed doesn’t show the favicon) ✅ 2026-08-27
  • Fix cancelled todo “- [-] Todo” to show up as cancelled on the website too
  • add pagefind- https://pagefind.app/
  • Look at supporting comments. Options: https://github.com/PlaidWeb/webmention.js and https://fed.brid.gy/ ✅ 2026-08-27
    • Implement the IndieWeb markup + Webmention.io + webmention.js ✅ 2026-08-27
      • Sign up jwbatey.com with Webmention.io.
      • Add <link rel="webmention" ...>; Webmention.io then receives mentions for the static site and exposes them through its browser-accessible JF2 API.
      • Add a representative h-card on the homepage.
      • Add h-entry, p-name, e-content, u-url, dt-published, etc. to posts.
      • Add the self-hosted webmention.js.
      • Style replies versus likes/reposts.
    • Test Webmention.io without Bridgy Fed ✅ 2026-08-27
      • Send one ordinary test Webmention to a test article.
      • Verify: receiver → Webmention.io API → webmention.js → displayed response.
      • This separates any Webmention/HTML mistakes from Bridgy Fed problems.
    • Lemmy URL-discussion lookup ✅ 2026-08-27
    • Bluesky URL-discussion lookup ✅ 2026-08-27
    • Connect Bridgy Fed ✅ 2026-08-27
      • Bridgy Fed accepts either discoverable RSS/Atom or Microformats + Webmentions, but Microformats are required if you want explicit Webmention-triggered publishing.
      • If you want the nicer domain-native Fediverse identity, add the nginx /.well-known/host-meta and /.well-known/webfinger redirects Bridgy Fed documents. The basic bridge can work without that cosmetic custom-domain setup.
      • There is also an /.well-known/atproto-did option if you later want a custom-domain Bluesky handle.
    • Send one test publication to Bridgy Fed ✅ 2026-08-27
      • Use a new disposable/test post marked up as an h-entry.
      • Include the u-bridgy-fed link to https://fed.brid.gy/.
      • Send a Webmention from that URL to Bridgy Fed.
      • Confirm the post appears correctly on both sides. Bridgy Fed generally bridges new material going forward rather than backfilling everything.
    • Test the full round trip ✅ 2026-08-27
      • Reply on Bluesky.
      • Reply from a Fediverse account.
      • Like/repost.
      • Confirm Bridgy Fed turns those interactions into Webmentions, Webmention.io receives them, and webmention.js displays them on the original article. Bridgy Fed explicitly supports translating those interactions back into Webmentions.
  • Move to separate home server instead of cloud based servers (see same item in Media Handler for more info)