VitePressではじめる技術ブログ

2026/03/17に公開

VitePressVue.js

このブログはVitePressで構築しています。VitePressはドキュメントを生成によく用いられますが、本サイトのようにブログを生成することもできます。 本記事ではVitePressを利用した技術ブログを構築する方法について述べます。

VitePressとは何か

VitePressは、技術ドキュメント向けの静的サイトジェネレーターです。VuePressの精神的後継として位置付けられています。 Markdownを書けばそのままページになり、ビルド後は軽量な静的サイトとして配信できます。 以下のような特徴があります。

• 記事本文をMarkdownで管理できる
• 既定テーマの完成度が高い
• 必要になったらVueコンポーネントやCSSで段階的に拡張できる

WordPressのように管理画面中心ではなく、ファイルベースで運用するのでGitで履歴を管理しやすいです。

このブログでの構成

このブログでは、記事を docs/articles/ に置き、VitePressの標準構成に寄せながら必要な部分だけを拡張しています。

• サイト設定は docs/.vitepress/config.mts
• テーマ拡張は docs/.vitepress/theme/
• 記事本文は docs/articles/*.md

既定テーマをどうカスタマイズするか

VitePressは既定テーマのままでも使えますが、テーマをカスタマイズして自由にデザインを変更することができます。 このブログでは、次のようなカスタマイズを入れています。

1. ブランドに合わせた見た目の調整

style.css で配色、背景、カード、タイポグラフィを調整しています。

2. ブログ用の小さなコンポーネントを足す

このブログでは、記事一覧や記事メタ情報のために独自コンポーネントを追加しています。

• ArticleList.vue
• ArticleArchive.vue
• ArticleMeta.vue
• TagArchive.vue
• TagPills.vue

タグ機能の実装をどう組むか

このブログで特に大きなカスタマイズはタグ機能です。このタグ機能は以下のようにして実現しています。

1. 記事の frontmatter でタグを持つ
2. 記事データローダーでタグ配列を読み込む
3. タグリンクとタグ一覧ページで絞り込み表示する

1. YAML frontmatter でタグを定義する

各記事は YAML frontmatter に tags を持っています。

---
title: VitePressではじめる技術ブログ設計
date: 2026-03-17
tags:
  - VitePress
  - Vue.js
description: このブログを題材に、VitePressの基本と技術ブログ向けのカスタマイズポイントを整理します。
---

2. 記事データローダーでタグを配列化する

docs/articles.data.mts で全記事を読み込み、一覧ページやタグページで再利用できる形に整えています。

import { createContentLoader } from 'vitepress'
import { formatDate, getDateValue } from './.vitepress/theme/utils/date'

export default createContentLoader('articles/*.md', {
  transform(rawData) {
    return rawData
      .filter((page) => page.url !== '/articles/')
      .map((page) => ({
        title: String(page.frontmatter.title ?? ''),
        url: page.url,
        date: formatDate(page.frontmatter.date),
        description: String(page.frontmatter.description ?? ''),
        tags: Array.isArray(page.frontmatter.tags)
          ? page.frontmatter.tags.map((tag) => String(tag))
          : [],
        sortDate: getDateValue(page.frontmatter.date)
      }))
      .sort((a, b) => b.sortDate - a.sortDate)
  }
})

コンポーネント側で毎回 frontmatter を読むよりもここでデータ形を揃えておく方が扱いやすくなります。

3. 記事ページではタグリンクだけを出す

記事本文の下では、ArticleMeta.vue から TagPills.vue を呼んでいます。

<script setup lang="ts">
import { computed } from 'vue'
import { useData } from 'vitepress'

const { frontmatter } = useData()

const tags = computed(() =>
  Array.isArray(frontmatter.value.tags)
    ? frontmatter.value.tags.map((tag) => String(tag))
    : []
)
</script>

<template>
  <TagPills :tags="tags" />
</template>

TagPills.vue では、タグ名を /tags/?tag=... に変換してリンク化しています。

<script setup lang="ts">
import { withBase } from 'vitepress'

function tagHref(tag: string) {
  return withBase(`/tags/?tag=${encodeURIComponent(tag)}`)
}
</script>

<template>
  <div
    v-if="tags.length"
    class="post-tags"
  >
    <a
      v-for="tag in tags"
      :key="tag"
      :href="tagHref(tag)"
      class="post-tag"
    >
      {{ tag }}
    </a>
  </div>
</template>

ここで encodeURIComponent を使っているのは、日本語タグや空白を含むタグでもURLとして壊れないようにするためです。

4. タグページでURLクエリを読んで絞り込む

タグページ本体は docs/tags/index.md で TagArchive を呼ぶだけにしてあります。

---
aside: false
pageClass: page-wide
---

<TagArchive />

5. この実装はスケールするのか

このタグ機能の実装は小規模から中規模の技術ブログであれば十分に実用的です。 記事数が数十本から数百本程度であれば、全記事を読み込み、クライアント側でタグ絞り込みを行う構成でもパフォーマンス上大きな問題にはなりにくいです。

しかし、大規模なブログでは問題にある可能性が高いです。 記事数やタグ数が増えるほど、全件読み込みとフロントエンド側の絞り込みはパフォーマンス上不利になります。 大規模なブログで高速にタグ機能を実装したい場合は、バックエンド側でタグごとの記事集合を返す構成の方が望ましいです。 たとえば、タグ別インデックスを事前生成する、検索APIやCMS側でタグ検索結果を返す、あるいは /tags/vitepress/ のようなタグ別静的ページをビルド時に生成する、といった方法が候補になります。

まとめ

VitePressは技術ブログを小さく始めるための優秀なツールです。素晴らしいデザインを持つ高速なWebページを簡単に構築できます。 ユースケースに合う場合はぜひ試してみてください。