·5 min· PV

Colophon

How this site is made: writing workflow, design principles, typography and color, and the build-and-deploy stack.

The word colophon comes from publishing tradition, where it referred to a passage in a book recording production details — typeface, paper, printing method, binding shop, edition number, and so on. Carried over to the Web, it has evolved into the colophon slash page, a record of “how the site is made” — a common form of self-introduction in IndieWeb circles.

I first noticed this kind of page on the personal site of Steph Ango, CEO of Obsidian[1]; recently I came across it again on slash pages.

Previously, for convenience, I’d piled all of this onto the ABOUT page. I later realized the material was no longer just a supplement to a personal introduction — it was more like a production note for the site — so I split it into its own page.

Writing

Devices

Words have to be typed on some machine in the end, so hardware counts as part of this colophon too.

Most of the time I type on a MacBook Air, with the occasional touch-up on my phone via Obsidian. I don’t have a place of my own yet, so voice input hasn’t really come into play; once I graduate and rent my own apartment, I’ll probably mix in a voice IME from time to time.

Tools

Posts for this site, my personal wiki, drafts, and clippings all live in the same Obsidian vault. Obsidian’s wiki links[2] are good for connecting notes to each other; Bases[3] are good for organizing posts and reference material by frontmatter[4] fields.

I occasionally switch to VS Code or Neovim, mostly to work with custom components. Both editors have snippets configured so I can quickly emit HTML templates for <image-carousel>, <text-image-section>, and the like. When adjusting content afterward, vim’s text objects[5] come in handy too — for example, dit (delete inside tag) clears everything inside a tag.

Format

All posts are written in Markdown, with metadata (title, date, tags, excerpt, etc.) declared in frontmatter.

Wherever Markdown’s native syntax falls short, I fill the gap with custom Web Components — for example, image carousels <image-carousel> and text-with-image layouts <text-image-section>.

Images

  • Format and delivery: Everything is encoded as webp / avif, stored on Bitiful S3, and served via the EdgeOne CDN. For performance details — responsive loading, ThumbHash[6] placeholders, and so on — see blog_performance_optimization.
  • Sources: A mix of web finds, personal photos, screenshots, and drawings. Quite a few web assets aren’t credited yet; I’ll fill those in over time.
  • Icons: Custom SVGs, plus the lucide and mingcute icon packs imported through iconify-icon.

Reading experience

Design principles

Pages follow three principles:

  • Simple: No extra noise. The homepage shows only the title, excerpt, date, reading time, and tags.
  • Responsive: Mobile reflows around touch habits — navigation becomes a burger menu and the TOC moves to the bottom of the screen, within thumb reach.
  • Keyboard-friendly: Common actions have shortcuts: ⌘ + T toggles the TOC, ⌘ + P switches theme, ⌘ + K opens site-wide search, and ESC closes overlays.

Typography

Four font families ship with the site. You can switch family from the post’s meta bar, and freely adjust weight, line height, and size — or even bring in a custom Web Font.

  • Serif
  • Sans Serif
  • Monospace
  • Handwriting

Color

Several themes ship with the site: Catppuccin, Nord, Tokyo Night, Rosé Pine, and Song Ci, which I designed myself. Press ⌘ + P to switch, or use the picker below.

For implementation details — CSS custom properties decoupled with :where, Shiki theme switching, FOUC[7] handling — see web_theme.

Build and deploy

  • Page Hosting: GitHub (23.7) · Cloudflare Pages (24.9-now) · EdgeOne Pages (25.9-now)
  • OSS: Bitiful · Cloudflare R2
  • CDN: Bitiful · EdgeOne
  • DNS: DNSPod
  • Domain Name: Namesilo · Tencent Cloud
  • Analytics: Google Analytics · Microsoft Clarity
  • Search Engine: Google Search Console · Bing Webmaster

  1. A free, flexible personal note-taking app: Obsidian — Sharpen your thinking. ↩︎

  2. Obsidian’s bidirectional link syntax [[Page Title]], which creates references that can be navigated in both directions — the basic building block of a personal wiki. ↩︎

  3. An Obsidian feature that aggregates notes matching a query (by frontmatter fields) into a filterable, sortable, groupable database view — similar to a Notion Database. ↩︎

  4. The term frontmatter comes from publishing, where it referred to the “front matter” of a book — title page, copyright page, table of contents, preface, and so on. Markdown borrows the term for the metadata block at the top of a file; in Hexo this is typically written as YAML. ↩︎

  5. A class of vim grammar that describes text structure — iw (inner word), it (inner tag), i" (inner string), and so on. Combined with operators like d / c / y, it lets you edit text in semantic units. ↩︎

  6. A compact image-placeholder algorithm that compresses an image into a few dozen bytes, used as a blurred preview before the real image loads, to avoid layout jitter. See thumbhash.com. ↩︎

  7. Flash of Unstyled Content — the visual flicker that happens when the browser first renders a page with default styles, then swaps to the correct styles after CSS finishes loading. ↩︎

CompactRelaxed
Normal1.70
Author
AuthorGnixAij
Title
TitleColophon
URL
URLhttps://vluv.space/en/colophon/
Translation
TranslationLLM · unreviewed
Markdown source
Markdown source/en/colophon/index.md
Created time
Created2026-05-04 00:00
Updated time
Updated2026-05-24 22:55