Svelte 5 Markdown Blog（発展版）

Svelte 5 と SvelteKit で、Markdown ファイルを記事ソースとした本格的なブログシステムを構築するサンプルです。 Vite の glob import、Front-matter、全文検索（MiniSearch）、タグクラウド、シンタックスハイライトを実装しています。

本リポジトリは TypeScriptで学ぶ Svelte 5/SvelteKit 学習ガイド の教材サンプルです。 コードの解説は学習サイト側に集約されています。本リポジトリは「動くコード」と「解説との対応表」を提供します。

• 📖 学習サイト記事: Markdownベースのブログシステム
• 🌐 デモサイト: https://shuji-bonji.github.io/svelte5-blog-markdown/
• 🗺️ 対応表（記事 ⇔ ファイル）: docs/learning-map.md

このサンプルの位置付け

svelte5-blog-example（基礎版） を読み終えた次のステップとして、実運用に近いブログを構築するためのサンプルです。基礎版との差分に学習ポイントを集中させています。

学べること

• ✅ Vite の import.meta.glob による Markdown ファイルの一括読み込み（ビルド時）
• ✅ Front-matter（front-matter パッケージ）によるメタデータ管理
• ✅ marked + marked-highlight + Prism.js によるシンタックスハイライト
• ✅ MiniSearch を使ったクライアントサイド全文検索
• ✅ タグクラウドと動的フィルタリング
• ✅ SSG（prerender）での制約（url.searchParams が使えない等）と回避策
• ✅ デバウンス処理による UX 改善
• ✅ 読了時間の自動計算

基礎版との差分

基礎的なルーティング・レイアウト・Load 関数の理解は基礎版で済ませてから本サンプルに来ることを推奨します。

学べないこと（＝他サンプルの担当範囲）

技術スタック

セットアップ

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

# 型チェック
npm run check

# ビルド（SSG）
npm run build

# ビルド成果物のプレビュー
npm run preview

Node.js 20.x LTS 以上を推奨します。

記事の追加

content/posts/ ディレクトリに Markdown ファイルを追加するだけで、ビルド時に自動で記事一覧・検索インデックス・タグクラウドに反映されます。

ファイル名の命名規則

YYYY-MM-DD-slug-name.md

例: 2025-01-08-markdown-powered-blog.md

Front-matter の書式

---
title: 記事のタイトル
description: 記事の概要説明（検索対象）
date: 2025-01-08
author: 著者名
tags: [Svelte 5, TypeScript, Markdown]
published: true
featured: false
---

記事の本文（Markdown）...

published: false にするとビルド対象から除外されます。

プロジェクト構成

svelte5-blog-markdown/
├── content/
│   └── posts/                    # Markdown 記事（glob import 対象）
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── ArticleCard.svelte
│   │   │   ├── SearchBox.svelte  # デバウンス付き検索入力
│   │   │   └── TagCloud.svelte   # タグクラウド
│   │   ├── data/
│   │   │   └── articles.ts       # glob import + 公開フィルタ
│   │   ├── utils/
│   │   │   ├── markdown.ts       # Front-matter + marked
│   │   │   └── search.ts         # MiniSearch インデックス
│   │   └── types/
│   │       └── blog.ts           # 型定義（Article / Frontmatter / Searchable）
│   └── routes/
│       ├── +layout.svelte        # 全体レイアウト
│       ├── +layout.ts            # prerender = true
│       ├── +page.svelte          # ホームページ
│       ├── about/
│       │   └── +page.svelte
│       └── blog/
│           ├── +page.svelte      # 記事一覧（検索・タグ統合）
│           └── [slug]/
│               ├── +page.svelte  # 個別記事
│               └── +page.ts      # 動的ルートの Load
└── static/
    └── favicon.svg

各ファイルが学習サイトのどの章に対応するかは docs/learning-map.md を参照してください。

学習の進め方（推奨）

1. 基礎版 svelte5-blog-example を先に読む
2. 学習サイトの Markdownベースのブログシステム を読む
3. docs/learning-map.md で記事の章と本リポジトリのファイルを突き合わせる
4. npm run dev で動かしながらコードを読む
5. content/posts/ に自分の記事を追加して挙動を確認する

静的サイト生成（SSG）の注意点

本サンプルは adapter-static による完全な SSG です。以下の制約があります。

• url.searchParams はビルド時に評価できないため、タグフィルタなどはクライアントサイドの $state で管理
• 個別記事ページは entries() によるエントリー列挙、または動的ルートのプリレンダリングで全記事を静的生成

デプロイ

adapter-static による静的サイト生成で、GitHub Pages に自動デプロイされます。main ブランチへの push でビルド・公開されます。

関連リンク

• TypeScriptで学ぶ Svelte 5/SvelteKit 学習ガイド
• Svelte 公式ドキュメント
• SvelteKit 公式ドキュメント
• MiniSearch
• marked
• Prism.js

ライセンス

MIT