<p data-line="0" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9fbd9556d16a-20241009.png" loading="lazy" class="md-img"></p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__984af4b6bafec" src="https://embed.zenn.studio/card#zenn-embedded__984af4b6bafec" data-content="https%3A%2F%2Fgithub.com%2Festruyf%2Fvscode-front-matter" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5161861e253b6" src="https://embed.zenn.studio/card#zenn-embedded__5161861e253b6" data-content="https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Deliostruyf.vscode-front-matter" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<p data-line="6" class="code-line">Frontmatter はVSCode上で、MarkdownをCMSとして管理することができる拡張です。カード形式でプレビューされ、検索・スニペット管理・画像管理も同時にできるため、HugoやAstro Starlight, Docusaurusなどとも親和性が高いです。</p>
<p data-line="8" class="code-line">さらに、プレビューOG画像の自動生成や、閲覧数の確認、等の機能をカスタマイズしてボタンやフォームとして追加できます。</p>
<p data-line="10" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/adc9aa9619bc-20241009.png" loading="lazy" class="md-img"></p>
<p data-line="12" class="code-line">競合相手としては、Git-base CMSのDecap CMSやContentrain、Wordpressなどになるでしょう。比較して、こちらにはVSCode上で完結するという利点があります。</p>
<h2 id="frontmatter%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86" data-line="14" class="code-line">
<a class="header-anchor-link" href="#frontmatter%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86" aria-hidden="true"></a> Frontmatterを使用してみましょう</h2>
<p data-line="16" class="code-line">初期設定では使えない機能がたくさんあるので、まずは原作者のブログをテンプレートとして拝借して、数多く追加されたカスタマイズ機能を体験してみることをおすすめします。</p>
<h3 id="%E6%BA%96%E5%82%99" data-line="18" class="code-line">
<a class="header-anchor-link" href="#%E6%BA%96%E5%82%99" aria-hidden="true"></a> 準備</h3>
<ul data-line="19" class="code-line">
<li data-line="19" class="code-line"><a>Frontmatter</a></li>
<li data-line="20" class="code-line">Node.jsの動作環境</li>
<li data-line="21" class="code-line">原作者のブログ<a href="https://github.com/estruyf/blog-content" target="_blank" rel="nofollow noopener noreferrer">GitHub - estruyf/blog-content: Blog content from Elio Struyf</a>をクローンして動かしてみる</li>
</ul>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="23"><span class="token function">git</span> clone https://github.com/estruyf/blog-content frontmatter-demo
code frontmatter-demo
</code></pre></div><ul data-line="27" class="code-line">
<li data-line="27" class="code-line">メニューバーに追加された、Frontmatterのアイコンをクリックしてみましょう。</li>
<li data-line="28" class="code-line">設定が十分に完了するまで、ダッシュボードの代わりにウェルカムスクリーンが表示されます。</li>
<li data-line="29" class="code-line">エクスプローラビューの項目を右クリックして、記事を管理するフォルダ (例:<code>/contents</code>)を設定しましょう。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/7e24187c9683-20241009.png" loading="lazy" class="md-img">
</li>
</ul>
<h3 id="%E6%89%8B%E9%A0%86%3A-frontmatter%E3%81%AEui%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%9F%E3%80%81%E3%83%96%E3%83%AD%E3%82%B0%E6%8A%95%E7%A8%BF%E3%81%AE%E4%BE%8B" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86%3A-frontmatter%E3%81%AEui%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%9F%E3%80%81%E3%83%96%E3%83%AD%E3%82%B0%E6%8A%95%E7%A8%BF%E3%81%AE%E4%BE%8B" aria-hidden="true"></a> 手順: FrontmatterのUIを活用した、ブログ投稿の例</h3>
<p data-line="34" class="code-line">今回はHugoを使います（動的要素を埋め込めるフレームワーク、Astro, Docsaurus, 等出現して、いまさらHugo？と感じるかもしれません。しかし、手軽さという観点では未だにHugoが優勢です。）</p>
<p data-line="36" class="code-line">原作者の記事コンテンツは削除しておきましょう。</p>
<ul data-line="37" class="code-line">
<li data-line="37" class="code-line">対象箇所：</li>
</ul>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="38"><span class="token builtin class-name">set</span> paths contents/ 
<span class="token function">rm</span> <span class="token parameter variable">-r</span> <span class="token variable">$paths</span>
</code></pre></div><ul data-line="43" class="code-line">
<li data-line="43" class="code-line">Hugoを用いて、ひな形を生成しましょう。</li>
</ul>
<div class="code-block-container"><pre><code class="code-line" data-line="44">hugo init
hugo new contents/first-post-demo.md
</code></pre></div><ul data-line="49" class="code-line">
<li data-line="49" class="code-line">コンテンツを作成してみましょう。
<ul data-line="50" class="code-line">
<li data-line="50" class="code-line">自動でFrontmatterが生成されます。</li>
</ul>
<div class="code-block-container"><pre><code class="code-line" data-line="51">---
name: xxx
---
# Demo
</code></pre></div>
</li>
<li data-line="57" class="code-line">メニューバーアイコンをクリックして、Frontmatter ダッシュボード画面を開きます。</li>
</ul>
<p data-line="59" class="code-line">これで、Frontmatter GUI上に、今回作成した記事が表示されていることを確認することができました。</p>
<ul data-line="61" class="code-line">
<li data-line="61" class="code-line">記事を公開してみましょう。Git関連のボタンが活用できます。
<ul data-line="62" class="code-line">
<li data-line="62" class="code-line">
<code>Commit message</code>を入力</li>
<li data-line="63" class="code-line">
<code>Fetch</code>ボタンを選択</li>
<li data-line="64" class="code-line">
<code>Sync</code> ボタンを選択</li>
</ul>
</li>
</ul>
<p data-line="66" class="code-line">これで、Frontmatter GUIを使用して、GitへのPushが行われました。</p>
<h2 id="%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AB%E3%82%88%E3%82%8B%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AB%E3%82%88%E3%82%8B%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" aria-hidden="true"></a> スクリプトによるカスタマイズ</h2>
<p data-line="70" class="code-line">FrontmatterのUIをカスタマイズするには、以下を行います。</p>
<h3 id="%E6%89%8B%E9%A0%86%3A-%E3%83%96%E3%83%AD%E3%82%B0%E8%A8%98%E4%BA%8B%E3%81%AEog%E7%94%BB%E5%83%8F%E3%82%92%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%81%97%E3%81%A6%E3%80%81%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%83%9E%E3%82%BF%E3%83%BC%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E4%BE%8B" data-line="72" class="code-line">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86%3A-%E3%83%96%E3%83%AD%E3%82%B0%E8%A8%98%E4%BA%8B%E3%81%AEog%E7%94%BB%E5%83%8F%E3%82%92%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%81%97%E3%81%A6%E3%80%81%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%83%9E%E3%82%BF%E3%83%BC%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E4%BE%8B" aria-hidden="true"></a> 手順: ブログ記事のOG画像を自動生成して、フロントマターに追加する例</h3>
<p data-line="74" class="code-line">次の原作者の記事より、OG画像生成用スクリプトが取得できます。</p>
<ul data-line="75" class="code-line">
<li data-line="75" class="code-line"><a href="https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/" target="_blank" rel="nofollow noopener noreferrer">Generate open graph preview image in Code with Front Matter · Elio Struyf</a></li>
</ul>
<ol data-line="77" class="code-line">
<li data-line="77" class="code-line">
<code>$NODE_PATH</code>を自身の環境変数の値に変更しましょう: "NODE_PATH" を<code>Ctrl+Shift+H</code>で検索・置換</li>
<li data-line="78" class="code-line">scriptsの追加:</li>
</ol>
<div class="code-block-container"><pre><code class="code-line" data-line="79">./scripts/social-img.mjs
</code></pre></div><ol data-line="82" class="code-line">
<li data-line="82" class="code-line">scriptsの有効化:</li>
</ol>
<ul data-line="83" class="code-line">
<li data-line="83" class="code-line">依存構成</li>
</ul>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="84"><span class="token function">npm</span> i date-fns uuid node-html-to-image @frontmatter/extensibility <span class="token parameter variable">-D</span>
</code></pre></div><p data-line="88" class="code-line">scriptsが正常動作しているか確認しましょう。</p>
<ul data-line="89" class="code-line">
<li data-line="89" class="code-line">
<code>Generate social image</code> ボタンが表示されているか確認する</li>
</ul>
<p data-line="91" class="code-line">以上でチュートリアルは終了です。</p>
<hr data-line="93" class="code-line">
<p data-line="95" class="code-line">Frontmatter、便利なのですが、使いたい機能のカスタマイズの設定が地味に面倒です。まだ過渡期で、これからデフォルトでいろいろ有効になっていくのかもしれません。</p>
<h2 id="see-also" data-line="98" class="code-line">
<a class="header-anchor-link" href="#see-also" aria-hidden="true"></a> See also</h2>
<ul data-line="101" class="code-line">
<li data-line="101" class="code-line"><a href="https://route360.dev/ja/post/frontmatter-cms/" target="_blank" rel="nofollow noopener noreferrer">VS Codeで動く拡張機能ヘッドレスCMS、Front Matter CMSを知って欲しい - Route360</a></li>
<li data-line="102" class="code-line"><a href="https://zenn.dev/naopoyo/articles/front-matter-cms-for-zenn#visual-studio-marketplace" target="_blank">VSCodeのFront Matter CMSでZennの記事を管理しようZennZenn</a></li>
</ul>


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

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

Frontmatterを使用してみましょう

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

Discussion