---
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."
updated: 2026-05-08 22:10:51
---

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

Colophon 一词来自出版传统，原指书中记录出版与制作信息的一段文字，例如字体、纸张、印刷方式、装订厂、版次等。挪到 Web 上，它演变成了 [colophon slash page](https://indieweb.org/colophon)，记录「网站是怎么做出来的」，IndieWeb 圈子里常见的一种自我介绍。

我第一次注意到这种页面是在 Obsidian[^1] CEO Steph Ango 的[个人站](https://stephango.com/about#colophon)上；近日在 [slash pages](https://slashpages.net/) 又见到一次。

之前为图方便，这些内容统统堆在 [ABOUT](/about) 页面里；后来发现它们已经不只是个人介绍的补充，而更像是这个站点的制作说明，于是单独整理成这一页。

</text-image-section>

## 写作

### 设备

文字最终总要从某台机器上敲出来，所以硬件也算这份 colophon 的一部分。

目前主要在 Macbook Air 上敲键盘，偶尔在手机上用 Obsidian 做些小修小补。现阶段不具备独居条件，语音输入暂时还没派上用场；等毕业租房之后，应该会穿插用一用语音输入法。

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

<device-carousel></device-carousel>

### 工具

本站文章、[个人 wiki](https://wiki.vluv.space)、草稿和网摘都放在同一个 Obsidian Vault 里。Obsidian 的 wiki link[^2] 适合在笔记之间建立连接，Bases[^3] 则适合按 frontmatter[^4]字段整理文章和资料。

偶尔也会切到 VSCode 或 Neovim，主要是为了处理自定义组件。[[vscode_snippets|两个编辑器里都配了 snippet]]，可以迅速输出 `<image-carousel>`、`<text-image-section>` 等组件的 HTML 模板；之后调整内容时，vim 的 text object[^5] 也很顺手，例如输入 <kbd>dit</kbd>（delete inside tag）就能清空标签内的内容。

### 格式

文章统一用 Markdown 写，元信息（标题、日期、标签、摘要等）放在 frontmatter里。

Markdown 原生语法不够用的地方，用[[test_components|自定义 Web 组件]]补足，例如图片轮播 `{html} <image-carousel>`、文字配图 `{html} <text-image-section>` 等。

### 图片

- **图片格式与分发**：统一使用 webp / avif 编码，存储在 Bitiful S3，由 EdgeOne CDN 分发；响应式加载、ThumbHash[^6] 占位等性能细节见 [[blog_performance_optimization]]。
- **图片来源**：包括网络、个人拍摄、截图与绘制；不少网络素材没标明出处，后续会逐步补上。
- **图标**：自定义 SVG，以及通过 iconify-icon 引入的 lucide、mingcute 图标包。

## 阅读体验

### 设计原则

页面遵循三条原则：

- **简洁**：不加多余的噪声。首页只展示标题、摘要、日期、阅读时长和 tags 几项。
- **响应式**：手机端按移动设备的使用习惯重新排布，导航换成 burger menu，TOC 放在手指容易触及的底部。
- **键盘友好**：常用操作都给了快捷键，<kbd>⌘ + T</kbd> 切 TOC、<kbd>⌘ + P</kbd> 切主题、<kbd>⌘ + K</kbd> 全站搜索、<kbd>ESC</kbd> 关弹层。

### 字体

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

页面内置四类字体族，可以在文章 meta bar 中切换字体类型，也能自由调整字重、行高、字号，甚至引入 Web Font。

- **Serif**
- **Sans Serif**
- **Monospace**
- **Handwriting**

</text-image-section>

### 配色

站内内置了多套主题：Catppuccin、Nord、Tokyo Night、Rosé Pine，以及我自行设计的 Song Ci。按 <kbd>⌘ + P</kbd> 切换，或用下面这个 picker。

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

<theme-stacked></theme-stacked>

实现细节（CSS 变量 + `:where` 解耦、Shiki 主题切换、FOUC[^7] 处理）见 [[web_theme]]。

## 构建与发布

<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]: 一款免费且灵活的私人笔记应用，[Obsidian - 磨砺你的思维](https://obsidian.md)。
[^2]: Obsidian 的双链语法 `[[页面标题]]`，在笔记之间建立可双向跳转的引用，是 personal wiki 的基础写法。
[^3]: Obsidian 的 Bases 功能，可以按 frontmatter 字段把符合条件的笔记聚合成可筛选、排序、分组的数据库视图，类似 Notion Database。
[^4]: Frontmatter 一词来自出版业，原指正文之前的标题页、版权页、目录、前言等“正文前材料”。Markdown 借用这个说法，用来指文章开头的元数据区；在 Hexo 中通常使用 YAML 书写。
[^5]: vim 描述文本结构的一类语法，如 `iw`（inner word）、`it`（inner tag）、`i"`（inner string），配合 `d` / `c` / `y` 等操作符可以以语义为单位编辑文本。
[^6]: 一种紧凑的图像占位算法，把图片压缩成几十字节的字符串，作为加载完成前的模糊预览，避免布局抖动；详见 [thumbhash.com](https://evanw.github.io/thumbhash/)。
[^7]: Flash of Unstyled Content，浏览器在 CSS 完全应用之前先按默认样式渲染页面、然后又切换到正确样式造成的视觉闪烁。