Zenn
✒️

Frontmatterとかいう拡張が, Markdown管理に使いやすい

2024/10/09に公開
VS Code
ブログ
Markdown
Docusaurus
frontmatter
tech

Frontmatter はVSCode上で、MarkdownをCMSとして管理することができる拡張です。カード形式でプレビューされ、検索・スニペット管理・画像管理も同時にできるため、HugoやAstro Starlight, Docusaurusなどとも親和性が高いです。

さらに、プレビューOG画像の自動生成や、閲覧数の確認、等の機能をカスタマイズしてボタンやフォームとして追加できます。

競合相手としては、Git-base CMSのDecap CMSやContentrain、Wordpressなどになるでしょう。比較して、こちらにはVSCode上で完結するという利点があります。

Frontmatterを使用してみましょう

初期設定では使えない機能がたくさんあるので、まずは原作者のブログをテンプレートとして拝借して、数多く追加されたカスタマイズ機能を体験してみることをおすすめします。

準備

git clone https://github.com/estruyf/blog-content frontmatter-demo
code frontmatter-demo
  • メニューバーに追加された、Frontmatterのアイコンをクリックしてみましょう。
  • 設定が十分に完了するまで、ダッシュボードの代わりにウェルカムスクリーンが表示されます。
  • エクスプローラビューの項目を右クリックして、記事を管理するフォルダ (例:/contents)を設定しましょう。

手順: FrontmatterのUIを活用した、ブログ投稿の例

今回はHugoを使います（動的要素を埋め込めるフレームワーク、Astro, Docsaurus, 等出現して、いまさらHugo？と感じるかもしれません。しかし、手軽さという観点では未だにHugoが優勢です。）

原作者の記事コンテンツは削除しておきましょう。

  • 対象箇所：
set paths contents/ 
rm -r $paths
  • Hugoを用いて、ひな形を生成しましょう。
hugo init
hugo new contents/first-post-demo.md
  • コンテンツを作成してみましょう。
    • 自動でFrontmatterが生成されます。
    ---
name: xxx
---
# Demo
  • メニューバーアイコンをクリックして、Frontmatter ダッシュボード画面を開きます。

これで、Frontmatter GUI上に、今回作成した記事が表示されていることを確認することができました。

  • 記事を公開してみましょう。Git関連のボタンが活用できます。
    • Commit messageを入力
    • Fetchボタンを選択
    • Sync ボタンを選択

これで、Frontmatter GUIを使用して、GitへのPushが行われました。

スクリプトによるカスタマイズ

FrontmatterのUIをカスタマイズするには、以下を行います。

手順: ブログ記事のOG画像を自動生成して、フロントマターに追加する例

次の原作者の記事より、OG画像生成用スクリプトが取得できます。

  1. $NODE_PATHを自身の環境変数の値に変更しましょう: "NODE_PATH" をCtrl+Shift+Hで検索・置換
  2. scriptsの追加:
./scripts/social-img.mjs
  1. scriptsの有効化:
  • 依存構成
npm i date-fns uuid node-html-to-image @frontmatter/extensibility -D

scriptsが正常動作しているか確認しましょう。

  • Generate social image ボタンが表示されているか確認する

以上でチュートリアルは終了です。

Frontmatter、便利なのですが、使いたい機能のカスタマイズの設定が地味に面倒です。まだ過渡期で、これからデフォルトでいろいろ有効になっていくのかもしれません。

See also

Discussion