VitePressはブログサイトの構築にも使えますか？

はい、個人ブログや技術ブログの構築にも十分活用できます。VitePressの公式ブログテーマやビルド時データローディング（*.data.ts）機能を利用することで、記事一覧の動的生成、タグ別ページ、ページネーションなどを簡単に実装できます。

VuePressとVitePressの違いは何ですか？移行すべきですか？

VitePressはVuePressの後継・軽量版として設計されています。VuePressはWebpackをベースにしており、VitePressはViteを採用したことで開発サーバー起動やビルドが圧倒的に高速化されています。新規で立ち上げる場合はVitePressの選択を強く推奨します。

日本語のドキュメント検索は外部サービスなしで本当に実用になりますか？

はい、標準のビルトイン検索（provider: 'local'）で十分快適に動作します。軽量検索ライブラリMinisearchをベースにしており、日本語を含む数十〜数百ページ規模のサイトであれば、外部サービスなしで瞬時に目的のテキストを検索できます。

VitePressの使い方完全ガイド｜Vueベースの爆速Markdown静的サイト作成・GitHub Pages公開手順

プロダクトの技術仕様書、APIリファレンス、オープンソースプロジェクトのドキュメント、あるいは個人技術ブログを構築する際、「Markdownで手軽に執筆でき、表示が速く、見た目が最初から整っている静的サイトジェネレーター（SSG）」 を求めるエンジニアが急速に増えています。

その最適解として世界中で注目を集めているのが、Vue.jsの生みの親であるEvan You氏らによって開発された VitePress（バイトプレス） です。

VitePressは、次世代フロントエンドビルドツール「Vite」と「Vue 3」を土台に設計されており、圧倒的な開発サーバー起動速度（HMR） と 無駄を削ぎ落とした軽量・高速な静的HTMLビルド を両立しています。初期状態のままでも、ダークモード切り替えやレスポンシブ表示に対応した洗練されたUIテーマが備わっており、デザインのカスタマイズに膨大な時間を費やす必要がありません。

本記事では、VitePressの基本概念から、npx vitepress init を用いた最短初期セットアップ、実用的な設定ファイル（.vitepress/config.mts）のカスタマイズ、便利なMarkdown独自記法、そして GitHub Actionsを使ったGitHub Pagesへの完全自動デプロイ手順 まで、ステップバイステップで徹底解説します。

【保存版】VitePressクイック早見表（チートシート）

最初に、VitePressで頻出するコマンド・基本設定・必須パスをまとめた早見表を用意しました。制作中の逆引きリファレンスとしてご活用ください。

項目	内容・コマンド / スニペット	概要
動作環境	Node.js 18.0.0 以上	`node -v` でバージョンを確認
インストール	`npm add -D vitepress`	既存・新規プロジェクトへのパッケージ追加
初期化ウィザード	`npx vitepress init`	対話形式で設定ファイルやサンプル文書を一括生成
開発サーバー起動	`npm run docs:dev`	ローカル開発環境の起動（デフォルト: `http://localhost:5173`）
本番ビルド	`npm run docs:build`	静的HTMLアセットの生成（デフォルト出力先: `.vitepress/dist`）
ビルドプレビュー	`npm run docs:preview`	生成された静的ビルド成果物をローカルで動作確認
主要設定ファイル	`docs/.vitepress/config.mts`	ナビゲーション・サイドバー・検索・base等の集中設定
リポジトリ公開設定	`base: '/リポジトリ名>/'`	GitHub Pages等のサブディレクトリ公開でCSS/JSパスを整合
内蔵検索の有効化	`search: { provider: 'local' }`	外部サービス不要の高速クライアント全文検索を即時導入

VitePressとは？高速なMarkdown静的サイトジェネレーターの魅力

VitePressは、Vue.jsおよびViteの公式ドキュメントサイト自体をホスティング・運用するために誕生した、Vueエコシステム公式の静的サイトジェネレーター（Static Site Generator: SSG）です。

従来のドキュメントツールが抱えていた「ページ数が増えるとビルドが極端に遅くなる」「開発サーバーのホットリロード待ちでストレスが溜まる」「デフォルトデザインが野暮ったく、スタイルの初期構築に手間がかかる」といった課題を根本から解決するために設計されました。

Vite駆動による超高速な開発環境（HMR）とビルド性能

VitePressが他のツールと決定的に異なるのは、ビルドエンジンの根幹に Vite を採用している点です。

瞬時の起動と変更反映（HMR: Hot Module Replacement）: 従来のWebpackベースのツールでは、起動時に全ページの依存関係を事前バンドルするため、ドキュメントの規模が大きくなるにつれて起動や再読み込みが重くなっていました。VitePressはネイティブES Modulesを活用するため、ページ数が数百枚規模になっても一瞬で開発サーバーが立ち上がり、Markdownの修正もミリ秒単位でブラウザに反映されます。
Rollupによる最適化された静的ビルド: 本番ビルド時には各Markdownが静的HTMLとしてレンダリングされます。初期ロード時は極めて軽量なHTMLのみを受信し、その後バックグラウンドで最小限のJavaScriptが読み込まれてシングルページアプリケーション（SPA）として水分補給（Hydration）されるため、PageSpeed Insightsでも最高水準のパフォーマンススコア を叩き出します。
初期状態での高い完成度: 美しいタイポグラフィ、自動コードハイライト、ワンクリックのライト/ダークテーマ切り替え、モバイル対応レスポンシブデザインが追加CSSなしで最初から提供されます。

他のSSG（VuePress、Docusaurus、MkDocs）との特徴比較

ドキュメントサイト向けSSGとしてよく比較される「VuePress」「Docusaurus」「MkDocs」との違いを整理しました。

ツール名	主なベース技術	得意な用途・特徴	学習コスト
VitePress	Vite + Vue 3	超高速な動作、洗練されたデフォルトUI、Vueコンポーネントの柔軟な埋め込み	低〜中
VuePress (v1/v2)	Webpack / Vue	VitePressの前身。大規模プラグインエコシステムがあるがビルド速度で劣る	中
Docusaurus	React + Webpack	Meta社製。高度な多言語対応（i18n）、バージョニング、Reactコンポーネント埋め込み	中〜高
MkDocs	Python + Jinja2	Python環境向け。設定がyaml1枚で完結し、Materialテーマが非常に美麗	低

どのツールを選ぶべきか？

Python環境を中心にシンプルにドキュメントを作成したい場合: Pythonのパッケージ管理（pip）と単一の設定ファイル（mkdocs.yml）で素早く構築できる MkDocs が強力な選択肢となります。詳しい構築手順は、当サイトの MkDocsの使い方ガイドを参考にしてください。
Reactエコシステムでの構築や大規模なAPIバージョニングを行いたい場合: Reactコンポーネントとの連携や強力なプラグイン群を活用したい場合は、Docusaurusガイドをおすすめします。
Vue 3や最新のフロントエンド技術を活用し、とにかく爆速でモダンなサイトを作りたい場合: 最軽量で導入も容易な VitePress が現在最もおすすめできる選択肢です。

VitePressのクイックスタート（インストールと初期セットアップ）

ここからは、実際に手元のパソコンでVitePressを立ち上げる手順を具体的に解説します。

前提条件（Node.js環境）

VitePressの動作には、Node.jsのランタイムが必要です。

必須環境: Node.js 18.0.0 以上（LTSバージョンの利用を推奨）

ターミナルを開き、以下のコマンドでインストールされているNode.jsのバージョンを確認してください。

node -v

もしバージョンが18未満である場合や未インストールの場合は、Node.js公式サイトから推奨版をインストールしておきましょう。

npx vitepress init コマンドによるセットアップウィザードの流れ

VitePressには、初心者が迷わずに初期構成を作れる公式対話型セットアップウィザードが用意されています。

まず、新しいプロジェクトを作成したいディレクトリに移動（または新規作成）し、以下のコマンドを実行します。

# プロジェクト用ディレクトリを作成して移動
mkdir my-vitepress-site
cd my-vitepress-site

# 初期化ウィザードを実行
npx vitepress init

実行すると、ターミナル上でいくつかの質問が表示されます。以下の推奨回答を参考に進めてください。

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize?
│  ./docs （※推奨。プロジェクト直下を散らかさず docs フォルダに集約）
│
◇  Site title:
│  My Documentation （※サイトのタイトルを入力）
│
◇  Site description:
│  A VitePress site （※サイトの概要説明を入力）
│
◇  Theme:
│  Default Theme （※標準テーマを選択）
│
◇  Use TypeScript for config and theme files?
│  Yes （※TypeScriptによる型補完が効くため Yes を推奨）
│
◇  Add VitePress npm scripts to package.json?
│  Yes （※package.json に dev / build 等のコマンドを自動追加）
│
└  Done! Now run:

ディレクトリ構成と主要ファイル（docs/, .vitepress/config.mts）の役割

ウィザードが完了すると、以下のようなディレクトリ構成が自動生成されます。

my-vitepress-site/
├── docs/
│   ├── .vitepress/
│   │   └── config.mts      # VitePressの全体設定ファイル
│   ├── api-examples.md    # サンプルのMarkdown記事
│   ├── markdown-examples.md
│   └── index.md           # サイトのトップページ（ランディングページ）
├── package.json           # プロジェクト依存関係とスクリプト定義
└── node_modules/

主要なファイルの役割は次の通りです。

docs/index.md: サイトのトップページです。YAML形式のFrontmatterを使って、ヒーローバナー（キャッチコピーやボタン）や機能一覧カードを簡単にレイアウトできます。
docs/.vitepress/config.mts: サイト名、ヘッダーメニュー、サイドバー、検索機能、公開URLのbaseパスなどを一元管理する中核設定ファイルです。
package.json: プロジェクトを管理する設定ファイルです。ウィザードによって以下のような scripts が自動追加されています。

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}

ローカル開発サーバーの起動とブラウザプレビュー確認

プロジェクトディレクトリ直下で以下のコマンドを実行し、ローカル開発サーバーを起動します。

npm run docs:dev

ターミナルに以下のようなURLが表示されます。

  vitepress v1.x.x

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

ブラウザで http://localhost:5173/ にアクセスしてください。洗練されたダークモード対応のトップページとサンプル記事が表示されれば、初期セットアップは成功です。

Markdownファイルを編集して保存すると、ブラウザをリロードすることなく瞬時に画面が更新される快適さを実感できます。

サイト設定（.vitepress/config.mts）の基本カスタマイズ

VitePressの柔軟な機能は、設定ファイル docs/.vitepress/config.mts を編集することで最大限に引き出せます。TypeScriptファイル（.mts）として記述されているため、VS Codeなどのエディタで入力候補（オートコンプリート）と型チェックが強力に効きます。

実務でそのまま使える、標準的な config.mts の実践コード例を紹介します。

// docs/.vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  // サイト全体の基本メタデータ
  title: "DevDocs Note",
  description: "エンジニアのための実践的技術ドキュメント",
  
  // GitHub Pagesなどのサブディレクトリ公開時に指定（後述）
  // base: '/my-vitepress-site/',

  themeConfig: {
    // サイト左上のロゴやサイト名
    siteTitle: 'DevDocs Note',

    // ヘッダーナビゲーションバーの設定
    nav: [
      { text: 'ホーム', link: '/' },
      { text: 'ガイド', link: '/guide/getting-started' },
      {
        text: 'リファレンス',
        items: [
          { text: '設定一覧', link: '/reference/config' },
          { text: 'Markdown記法', link: '/reference/markdown' }
        ]
      }
    ],

    // サイドバーメニューの設定
    sidebar: {
      '/guide/': [
        {
          text: '入門ガイド',
          collapsed: false,
          items: [
            { text: 'はじめに', link: '/guide/getting-started' },
            { text: '基本操作', link: '/guide/basic-usage' }
          ]
        }
      ],
      '/reference/': [
        {
          text: 'リファレンス',
          items: [
            { text: '設定一覧', link: '/reference/config' },
            { text: 'Markdown拡張', link: '/reference/markdown' }
          ]
        }
      ]
    },

    // ソーシャルリンク（GitHubアイコンなど）
    socialLinks: [
      { icon: 'github', link: 'https://github.com/your-name/your-repo' }
    ],

    // 内蔵ローカル検索の有効化（外部API不要）
    search: {
      provider: 'local'
    },

    // ページの更新日時表示
    lastUpdated: {
      text: '最終更新日',
      formatOptions: {
        dateStyle: 'short',
        timeStyle: 'short'
      }
    },

    // フッター設定
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © DevDocs Team'
    }
  }
})

サイトタイトル・説明文の基本設定

title: ブラウザのタブや検索エンジンのスニペットに表示されるサイト全体のタイトルです。
description: ページのHTMLヘッダー内のに反映されます。SEO上重要な設定です。

ナビゲーションバー（nav）のメニュー階層定義

themeConfig.nav では、ヘッダーに並ぶリンクを設定します。
単一リンク（{ text: '...', link: '...' }）だけでなく、items 配列を持たせることで ドロップダウンメニュー を簡単に作成できます。

サイドバー（sidebar）の階層構造化と複数ディレクトリ対応

サイドバーの設定方法には「配列指定（サイト全体で共通）」と「オブジェクト指定（ディレクトリごとに切り替え）」の2通りがあります。

ドキュメントサイトでは、上記サンプルのように パスごとのオブジェクト指定 が推奨されます。
/guide/ のページを見ているときはガイド専用のサイドバーが表示され、/reference/ のページに移動するとリファレンス専用のサイドバーに自動で切り替わるため、情報が整理されてユーザーが迷いません。

また、各グループに collapsed: false（または true）を指定すると、開閉可能な折りたたみアコーディオンメニューにできます。

ビルトインローカル検索（Minisearch）の有効化設定

従来のドキュメントジェネレーターでは、検索機能を導入するためにAlgoliaなどの外部サービスへのアカウント登録やインデックス同期が必要でした。

VitePressでは、以下の1行を設定に加えるだけで、クライアントサイドで動く 超高速な全文検索機能（Minisearchベース） が即座に有効化されます。

search: {
  provider: 'local'
}

検索モーダル内でのキーボードショートカット（Ctrl+K / Cmd+K）や日本語のインクリメンタル検索にも標準で対応しています。

VitePressで使える強力なMarkdown拡張記法

VitePressは、標準的なCommonMarkやGitHub Flavored Markdown（GFM）に加え、技術文書の作成を強力にサポートする独自の拡張記法を標準装備しています。

コールアウト表示（::: tip, ::: info, ::: warning, ::: danger）

注意喚起や補足情報を目立たせるためのカスタムコンテナ（Callout）です。

::: info
これは情報（Info）を伝える標準的なコールアウトボックスです。
:::

::: tip ヒント
タイトルをカスタムすることも可能です。役立つテクニックを記述する際に活用します。
:::

::: warning 注意事項
設定ミスや非推奨の仕様についてユーザーへ注意を促すボックスです。
:::

::: danger 危険
重大なエラーやデータ損失のリスクがある操作に対して赤色で警告します。
:::

::: details クリックして詳細を表示（折りたたみ）
普段は隠しておきたい長いログや補足コードを格納できます。
:::

これらは追加のCSSやプラグイン不要で、アイコン付きの美しい装飾ボックスとしてレンダリングされます。

コードグループ（::: code-group による言語別タブ切り替え）

複数のパッケージマネージャー（npm, pnpm, yarn, bun）や複数のプログラミング言語での実行例を、タブで切り替えて表示できる機能です。

::: code-group

```bash [npm]
npm install vitepress
```

```bash [pnpm]
pnpm add vitepress
```

```bash [yarn]
yarn add vitepress
```

```bash [bun]
bun add vitepress
```

:::

閲覧者はワンクリックで使い慣れたツールのコマンドを選択・コピーできます。

コードブロックの行ハイライトと行番号表示

コードの一部を強調したい場合や、差分を示したい場合も直感的に指定できます。

```javascript:line-numbers {2,4-5}
// 行番号（:line-numbers）と特定行のハイライト（{2,4-5}）
const siteName = 'VitePress Guide';
const isEnabled = true; // この行がハイライトされます
const version = '1.0.0';
const isDev = false;
```

また、Gitのような行追加・削除の差分表示（Diffハイライト）もサポートされています。

```javascript
function greet() {
  console.log('Old version'); // [!code --]
  console.log('New version'); // [!code ++]
}
```

Markdown内でのVueコンポーネントとリアクティブ変数の使用

VitePressの最大の強みは、Markdownファイル自体がVueの単一ファイルコンポーネント（SFC）としてコンパイルされる ことです。
特別な設定をしなくても、Markdownファイル内に