Markdownで作るSvelte 5ブログシステム

このブログシステムは、Markdownファイルを使って記事を管理する、開発者にとって理想的なブログプラットフォームです。

特徴

📝 Markdownベースの記事管理

すべての記事はMarkdownファイルとして管理されます。Front-matterを使ってメタデータを定義し、本文はMarkdown記法で記述します。

---
title: 記事のタイトル
description: 記事の説明
date: 2025-01-08
author: 著者名
tags: [タグ1, タグ2]
published: true
featured: false
---

記事の本文...

🔍 全文検索機能

MiniSearchライブラリを使用した高速な全文検索を実装しています。タイトル、説明、本文、タグすべてを対象に検索できます。

// 検索インデックスの作成
const searchIndex = createSearchIndex(articles);

// 検索の実行
const results = searchArticles(searchIndex, query);

🏷️ タグシステム

記事にタグを付けることで、カテゴリ別に記事を整理できます。タグクラウドやタグによるフィルタリングも可能です。

⚡ 高速なビルド

Viteのglob importを使用して、ビルド時にすべてのMarkdownファイルを自動的に読み込みます。

const markdownFiles = import.meta.glob('/content/posts/*.md', { 
  query: '?raw',
  import: 'default',
  eager: true 
});

技術スタック

• Svelte 5: 最新のRunesシステムを活用
• SvelteKit: ファイルベースルーティング
• TypeScript: 型安全な開発
• Marked: Markdownのパース
• MiniSearch: 全文検索エンジン
• Prism.js: シンタックスハイライト

ディレクトリ構造

content/
  posts/
    2025-01-08-markdown-powered-blog.md
    2025-01-07-svelte5-features.md
src/
  lib/
    utils/
      markdown.ts  # Markdown処理
      search.ts    # 検索エンジン
    data/
      articles.ts  # 記事データ管理

まとめ

このMarkdownベースのブログシステムは、開発者にとって理想的な記事管理方法を提供します。 GitHubでバージョン管理でき、VSCodeで快適に執筆できる、まさに開発者のためのブログシステムです。