---
title: Colophon
date: 2026-05-04
tags:
  - Blog
excerpt: "How this site is made: writing workflow, design principles, typography and color, and the build-and-deploy stack."
lang: en
i18n:
  cn: /colophon
  translation: 2
updated: 2026-05-24 22:55:16
---

<script data-swup-reload-script type="module" src="/js/components/text-image-section.js"></script>
<text-image-section image="https://assets.vluv.space/colophon.avif" alt="Specimen Book — Colophon Photo by André Mora on flickr" width="350px">

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](https://indieweb.org/colophon), 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](https://stephango.com/about#colophon) of Steph Ango, CEO of Obsidian[^1]; recently I came across it again on [slash pages](https://slashpages.net/).

Previously, for convenience, I'd piled all of this onto the [ABOUT](/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.

</text-image-section>

## 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.

<script data-swup-reload-script type="module" src="/js/components/device-carousel.js"></script>

<device-carousel></device-carousel>

### Tools

Posts for this site, my [personal wiki](https://wiki.vluv.space), 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. [[vscode_snippets|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, <kbd>dit</kbd> (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 [[test_components|custom Web Components]] — for example, image carousels `{html} <image-carousel>` and text-with-image layouts `{html} <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: <kbd>⌘ + T</kbd> toggles the TOC, <kbd>⌘ + P</kbd> switches theme, <kbd>⌘ + K</kbd> opens site-wide search, and <kbd>ESC</kbd> closes overlays.

### Typography

<text-image-section image="https://assets.vluv.space/piclist-clipboard-images-20260503223120840.avif" alt="Custom Font" width="500px">

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**

</text-image-section>

### Color

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

<script data-swup-reload-script type="module" src="/js/components/theme-stacked.js"></script>

<theme-stacked></theme-stacked>

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

## Build and deploy

<script type="module" data-swup-reload-script src="/js/components/accordion.js"></script>

<x-accordion>
  <accordion-item title="Building">

  - **CMS**: Hexo
  - **Markdown Renderer**: [Markdown-Exit](https://github.com/serkodev/markdown-exit) with the following plugins:
    * [Efterklang/hexo-renderer-markdown-exit](https://github.com/Efterklang/hexo-renderer-markdown-exit)
    * [Efterklang/markdown-exit-shiki](https://github.com/Efterklang/markdown-exit-shiki)
    * [Efterklang/markdown-exit-mermaid](https://github.com/Efterklang/markdown-exit-mermaid)
    * [Efterklang/markdown-exit-s3-image](https://github.com/Efterklang/markdown-exit-s3-image)
    * Some plugins included in this repo 👉 [mdit-plugins/mdit-plugins](https://github.com/mdit-plugins/mdit-plugins)
  - **Syntax Highlighting**: Shiki
  - **Comment**: Twikoo
  - **Build Tool**: ESBuild · [Minify-HTML](https://github.com/wilsonzlin/minify-html)
  - **CI/CD**: Cloudflare · EdgeOne

  </accordion-item>
  <accordion-item title="Delivery">

  - **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

  </accordion-item>
  <accordion-item title="Observability">

  - **Analytics**: Google Analytics · Microsoft Clarity
  - **Search Engine**: Google Search Console · Bing Webmaster

  </accordion-item>
</x-accordion>

[^1]: A free, flexible personal note-taking app: [Obsidian — Sharpen your thinking](https://obsidian.md).
[^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](https://evanw.github.io/thumbhash/).
[^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.