設定ファイル

サイトのメタデータやコンテンツソースから、各機能の設定ガイドへのリンクまで、blume.config.ts のすべてのオプション。

Blume はプロジェクトルートの blume.config.ts を読み込みます。設定を defineConfig でラップすると、オートコンプリートと型チェックが有効になります。すべてのフィールドは任意で、適切なデフォルト値が用意されています。

import { defineConfig } from "blume";

export default defineConfig({
  title: "My Docs",
  description: "Documentation for my project.",
});

完全な例

最もよく使われるオプションを一通り含んだ、より広範な例です（残りは各機能のガイドを参照してください）:

import sitemap from "@astrojs/sitemap";
import { defineConfig } from "blume";

export default defineConfig({
  // Site
  title: "My Docs",
  description: "Documentation for my project.",
  logo: "/logo.svg",

  // Astro integrations — installed and versioned by this site
  integrations: [sitemap()],

  // Content
  content: {
    root: "docs",
  },

  // Theme — see the Theming guide
  theme: {
    accent: "teal",
    radius: "md",
    mode: "system",
  },

  // Search — see the Search guide
  search: {
    provider: "orama",
  },

  // Markdown features
  markdown: {
    imageZoom: true,
    code: {
      icons: true, // language icon in the code-block header
      wrap: false, // wrap long lines instead of scrolling
    },
    codeBlocks: {
      theme: {
        light: "github-light", // bundled name or custom Shiki theme object
        dark: "github-dark",
      },
    },
  },

  // AI — see the AI guide
  ai: {
    llmsTxt: true,
    // MCP server (needs server output)
    mcp: {
      enabled: false,
      route: "/mcp",
    },
  },

  // SEO — OG images, feeds, sitemap, structured data; see the SEO guide
  seo: {
    og: { enabled: true },
    rss: { enabled: true, types: ["blog", "changelog"] },
    sitemap: true,
    robots: true,
    structuredData: true,
  },

  // Deployment — see the Deployment guide
  deployment: {
    output: "static",
    site: "https://docs.example.com",
  },
});

サイト

ロゴ

logo に SVG を指定すると Blume がインライン展開するため、currentColor を使ったロゴはライトテーマとダークテーマに自動で追従します:

logo: "/logo.svg",

SVG はプロジェクトルートまたは public/ に配置できます。ブランドはマーク（image）とワードマーク（text）で構成され、オブジェクト形式ならそれぞれを個別に設定できます:

logo: {
  image: "/logo.svg", // string, or { light, dark, alt } for themed raster art
  text: "Acme",       // wordmark beside the mark
  href: "/",          // overrides the brand link (defaults to "/")
},

image は省略形と同じ値を取ります。単一のパス、またはライト/ダークで別々のアートワークを使う場合は { light, dark, alt } です（ラスター画像は public/ に配置する必要があります）。

text はマークとは独立してワードマークを制御します:

• text を省略すると、ブランドにはサイトの title が使われます（デフォルト）。
• text: "" を設定するとマークのみを表示します。ロゴ画像にすでにワードマークが含まれている場合に便利です。
• image なしで text を設定すると、テキストのみのロゴになります。

ファビコン

ファビコンのオプションはありません。Blume は Next.js と同じようにファイル名から自動検出します。icon または favicon というファイル（.svg、.png、.ico）をプロジェクトルートまたは public/ ディレクトリに置くと、ブラウザのタブアイコンになります:

my-docs/
├─ blume.config.ts
├─ icon.png          ← picked up automatically
└─ docs/

複数存在する場合は SVG が PNG より、PNG が ICO より優先され、ルート直下のファイルよりも public/ 内のファイルが優先されます。アイコンが見つからない場合、Blume は自身のマークにフォールバックします。

Apple タッチアイコン

サイトをホーム画面に追加したときに iOS が使うアイコンも、同じ方法で検出されます。apple-icon というファイル（.png、.jpg、.jpeg）— あるいは、多くのファビコン生成ツールが出力する名前である apple-touch-icon.png — をプロジェクトルートまたは public/ ディレクトリに置くと、Blume が <link rel="apple-touch-icon"> を設定します。デフォルトはありません。ファイルが見つからない場合、タグは出力されません。

my-docs/
├─ blume.config.ts
├─ apple-icon.png     ← picked up automatically
└─ docs/

このファイルはプロジェクトルートではなく public/ に置いてください。ルート直下のアイコンに対して Blume が使うインラインのデータ URI は iOS では無視されるため、public/ に置いたファイル（/apple-icon.png で配信されます）だけが確実にホーム画面に反映されます。

バナー

ヘッダーの上にサイト全体のお知らせバーを表示します。文字列を渡すか、リンクと閉じるボタンを含むオブジェクトを渡します:

banner: "Docs are in beta — expect changes.",

banner: {
  content: "Blume v1 is here!",
  link: { text: "Read more", href: "/blog/v1" },
  dismissible: true,
  id: "v1",
},

dismissible を有効にすると、バーに閉じるボタンが表示され、それ以降その訪問者には非表示のままになります。閉じた状態を記録するキーはデフォルトで本文テキストになるため、メッセージを編集するとバナーが再び表示されます。編集後も閉じたままにするには、安定した id を設定してください。

コンテンツ

コンテンツの置き場所と、Blume がそれをどう検出するかです。ファイルがどのようにルートになるかは ページ を参照してください。

content: {
  root: "docs",
}

静的アセットは public/ に置きます。public/logo.png にあるファイルは /logo.png で配信されるため、![](/images/create.png) のような参照は public/images/create.png に解決されます。相対パスで参照される画像（![](./diagram.png)）はコンテンツの隣に配置し、ビルド時に最適化されます。

画像

相対パスで参照されるローカル画像は、ビルド時に自動的に最適化されます。圧縮され、WebP に変換され、読み込み中にレイアウトがずれないよう本来の width/height 属性が付与されます。設定は不要です。執筆時のガイダンスは リンクと画像 を参照してください。

リモート画像はデフォルトでは手を加えずに配信されます。Blume にビルド時のダウンロードと最適化も行わせるには、そのホストを許可してください:

image: {
  domains: ["cdn.example.com"],
  remotePatterns: [{ protocol: "https", hostname: "**.example.com" }],
}

フロントマター

ページのフロントマターは厳格に検証され、未知のキーがあるとビルドが失敗するため、タイプミスを早期に発見できます。プロジェクト固有のメタデータ（担当者、レビュー日など）を持たせるには、追加のキーを frontmatter.extend の下に宣言し、それぞれに用意したスキーマを対応付けます:

import { defineConfig } from "blume";
import { z } from "zod";

export default defineConfig({
  frontmatter: {
    extend: {
      owner: z.string(),
      reviewedAt: z.coerce.date().optional(),
    },
  },
});

任意の Standard Schema ライブラリが利用できます — Zod（プロジェクトがインストールしているバージョンを問わず）、Valibot、ArkType など。拡張の外側のキーは引き続き厳格に検証されるため、タイプミスの検出はこれまでどおりです。検証のセマンティクスについては カスタムキー を参照してください。

extend の下のキーはサイト全体に適用されます。特定のコンテンツタイプのページにだけキーを必須にしたい場合 — RFC の status、ランブックの service など — は、代わりに content.types の下でタイプごとに宣言してください:

import { defineConfig } from "blume";
import { z } from "zod";

export default defineConfig({
  content: {
    types: {
      rfc: {
        facets: ["domain", "status"],
        frontmatter: {
          domain: z.string(),
          status: z.enum(["draft", "review", "enforced"]),
        },
      },
    },
  },
});

1 つのキーはサイト全体かタイプごとのどちらかで宣言でき、両方はできません。スコープがどう解決されるかは タイプごとのキー を参照してください。

facets は、その値がフィルタ可能なメタデータになるカスタムキーを指定します。これらは検索ドキュメント（blume-search.json と MCP インデックス）に付随し、MCP ツール はそれらに対して照合を行う filters 入力を受け付けます。そのため、エージェントは例えば architecture ドメインの enforced な RFC だけを取得できます。各ファセットは宣言済みのカスタムキー（タイプごと、またはサイト全体）である必要があり、ファセットになるのは文字列（あるいは文字列化された数値・真偽値）の値のみです。

GitHub

github で Blume にリポジトリを指定します。これはヘッダーの リポジトリリンク と、Edit on GitHub および Give feedback の ページアクション を有効にします:

github: {
  owner: "acme",
  repo: "docs",
}

最終更新日

各ページの下部に「Last updated on …」の行を表示します。デフォルトは無効です。lastModified を true に設定すると、各ページの日付が git 履歴から算出されます:

lastModified: true,

git ソースは各ファイルに触れた最新のコミットを読み取るため、モノレポを含むあらゆる git リポジトリで機能し、ビルド時にリポジトリの履歴が必要です（CI では --depth 1 のシャローチェックアウトを避けてください）。ページ自身の lastModified フロントマターが常に優先されるので、日付を固定したい場合や、まだコミットされていないファイルに便利です:

---
title: My page
lastModified: 2026-06-20
---

有効にすると、この日付はページの構造化データに schema.org の dateModified としても出力されます。

日付フォーマット

「Last updated」のスタンプと チェンジログ のタイムラインは、どちらも同じ dateFormat を通して日付を描画するため、表記が揃います。日付は常にサイトのロケールで描画され、dateFormat は形式を制御します。デフォルトは長い形式です（July 21, 2026、2026年7月21日）:

dateFormat: { dateStyle: "long" },

dateFormat は Intl.DateTimeFormat のオプションへのパススルーです。長さを指定するには dateStyle のプリセットを使います:

dateFormat: { dateStyle: "medium" },

あるいは、2026/07/21 のような数値中心のハウススタイルにするには、個別のコンポーネントフィールドを使います:

dateFormat: { year: "numeric", month: "2-digit", day: "2-digit" },

SEO

Open Graph 画像、RSS フィード、JSON-LD 構造化データを seo にまとめています。メタデータ、フロントマターによる上書き、完全なリファレンスは SEO ガイド を参照してください。

seo: {
  og: { enabled: true },
  rss: { enabled: true, types: ["blog", "changelog"] },
  sitemap: true,
  robots: true,
  structuredData: true,
}

これらは、完全な URL を得るために絶対パスの deployment.site と組み合わせると最も効果的です。

目次

このページの見出し一覧はデフォルトで有効になっており、H2〜H3 の見出しを掲載します。toc で無効にしたり、見出しの範囲を変更したりできます:

export default defineConfig({
  toc: false, // hide it everywhere
});

あるいは、見出しの範囲を絞り込みます:

export default defineConfig({
  toc: { minHeadingLevel: 2, maxHeadingLevel: 4 },
});

機能ごとのオプション

以下にはそれぞれ専用のガイドがあります。設定フィールドがその入口です:

優先順位

設定は優先度の低いものから高いものへと解決されるため、必要な部分だけを上書きすれば済みます: