Colophon
How this site is made, with what tools, supporting what technologies, etc.
Site and Webhost
The site is built with Astro and deployed on Cloudflare Pages from a public GitHub repository, totally free. Paying for my domain every year is literally the only cost I incur for this website; it was around $18/year through Namecheap, but transferring to Cloudflare dropped the cost to just under $10/year.
And thanks to a few readers that Bought Me A Coffeethe bill for 2025 was covered and I have a few bucks leftover towards 2026’s renewal, so thanks!
Astro, Integrations and Packages
Blog posts and Wiki articles are all written in Markdown with YAML frontmatter and managed via Astro’s Content Collections. Links and Lifestream are also done through Content Collection and exist as YAML files.
I use several packages to help with building the site and writing posts.
- astrojs/rss: Astro integration to add an RSS feed, in my case the feed is blog posts only.
- astrojs/sitemap: Astro integration that automatically generates a
sitemap.xml. - playform/compress: Astro integration that compresses and optimizes files (HTML, CSS, images, etc.) at build time.
- astro-social-share: Used for the “share on social” buttons at the bottom of blog posts.
- reading-time + mdast-util-to-string: Used to calculate and display how many minutes it takes to read individual blog posts.
- remark-directive + remark-directive-sugar: Used to add new Markdown syntax for images, video embeds, etc.
- rehype-external-links: Used to automatically add the little arrow next to external links throughout the site.
- astro-embed for embedding YouTube videos, Bluesky posts, etc.
- isotope.js for grid layout in Lifestream.
Third-Party Services
- Pagefind: Dead simple fully static search library for static websites, used here to search blog posts. Doesn’t even require adding it to your dependencies.
- Giscus: Alternative to Discus for comments in blog posts using GitHub Discussions, rather than Issues, as the backend.
- Webmention.io + Webmention.app: Webmention is an open protocol used by websites to be notified when they link to each other. Webmention.app is a free service to automate outgoing webmentions with a simple API. (Might switch to Bridgy though.)
WTF is a Colophon anyway?
[quote] colophon noun (col·o·phon ˈkä-lə-fən -ˌfän)
1: an inscription at the end of a book or manuscript usually with facts about its production.
Or in a modern context…
[quote] A colophon is a page or section (typically in a footer) of a site that describes how the site is made, with what tools, supporting what technologies, and often published on personal sites at a top level
/colophonpage.