Vault Blog Core が実際に行うことは、主に
.mdファイルの収集と解析- 各記事のHTMLを生成
です。
1. .md ファイルの収集と解析
プロジェクトルートでコマンド sh scripts/run-update-posts.sh を実行することで、以下の処理を行います。
- 指定したディレクトリにある
.mdファイルをプロジェクト内にコピーする - フロントマターや本文を解析し、
- 各ページのメタデータを構築する
- 依存している画像・音声・動画ファイルをプロジェクト内にコピーする
収集元ディレクトリの場所は任意であり、これにより、Obsidian などの外部ツールで管理している .md ファイルを扱うことが出来ます。
フロントマターについてはVault Blog Core の投稿記事用フロントマターについてを参考にしてください。
2. Markdown から HTMLを生成
pnpm run build 時に、1で用意した .md ファイルの Markdown を解析して HTML に変換します。
現在行っている変換は、
- markdown-it による全体の変換
- Obsidian Auto Card Link によるカードリンク構文の変換
- Callout の変換
形式の Youtube 動画 URL を<iframe>で埋め込み- Wikiリンク
[[title]]を、リンク先が存在すればそのリンクに、無ければtitleに変換
です。
下記ページではそれらの具体例が確認できます。
また、GitHubリポジトリ にて、このサイトにある全記事の変換前の Markdown ファイルを見ることができます。
まとめ
Vault Blog Core は、Markdown ファイルをもとに静的ブログを生成するためのツールであり、主に以下の2つの処理を行います。
-
.mdファイルの収集と解析- 外部ツール等で管理している Markdown を取り込み、フロントマターや本文を解析
- 依存する画像・音声・動画もプロジェクト内にコピー
-
各記事の HTML を生成
- Markdown を HTML に変換
- カードリンクや Callout、動画埋め込み、Wikiリンクの変換を行う
これにより、Obsidian などで管理している Markdown を効率的にブログ記事として公開できる環境を提供します。
興味を持ってくれた方は、是非Vault Blog Core の導入手順を見ながら実際に動かしてみてください！
