webpack製の静的サイトでmarkdownを使う

数ページの静的サイトをwebpackで作成するときに面倒なのがやたら長い文章。

まぁ、動的でないサイトなんで、こういう用件が多いのはしょうがない。とういうことで、今回は、「webpack製の静的サイトでmarkdownを使う」をメモっときます。

使うのは、pugです。個人的にpugはオススメです。マークアップが簡単になることももちろんですが、変数が使えたり、部品を共通化できたりするので、超便利です。あと、技術的にいい意味で枯れているので、めまぐるしくかわるフロントエンドの世界では安心できるヤツです。

まだ、webpackで静的サイトを作ったことがないひとはこちらの記事を参考にしください。pugで作ってます。

markdownが使えるようにする

pugのFiltersという機能を使います。

1
% npm install --save jstransformer-markdown-it

インストールしたら、pugファイルに以下のように書けばいいだけ。こうすることで、pugがマークダウンファイルを読み込んで、コンパイルしてくれる。マークダウンだったら長い文章も全然平気！

1
include:markdown-it text.md