経緯
今まで WordPress をブログシステムとして利用していたが、サーバーの管理が煩わしくなってきたのと、サーバーの移行の際に DB の移行がめんどくさくなってしまったこともあって、 Git を中心に据えた Markdown ベースのブログシステムに移行した。
要求
ブログ基盤を移すにあたって、以下の要件をあらかじめ決めておいた。
- サーバー不要、もしくは1つで済むこと
- Markdown で書けること
- シンタックスハイライトが利くこと
- 静的サイト生成ができること
静的サイトの要件を除けば PHP の DokuWiki (Markdown のプラグイン入り) でも充分ことは足りたが、WordPress で作っていた旧ブログの見た目に似せようとするとカスタマイズ量が多くなりそうだったのでやめた。
構成
Typescript を使ったシンプルな CLI ツールを一つ作った。
Markdown を HTML に変換するために marked ライブラリを、シンタックスハイライトのために highlight.js を使用した。また、更新日時やタグ等の処理を実施するために frontmatter を利用しており、その処理のために gray-matter を使用している。
ブログとしての体裁を整えるために ヘッダー/サイドバー/フッター などを付加しており、そのためにテンプレートエンジンを使用したが、自作である。
機能
Markdown 変換機能
中核となる、 Markdown を HTML に変換する機能。
ファイルシステム上から /md ファイルを読み取り、 marked ライブラリを使って HTML に変換する。
シンタックスハイライト機能
marked-highlight および highlight.js の機能を利用し、コードブロックにシンタックスハイライトを適用する機能。
コマンドラインオプションを利用して、適用するテーマを自由に変更できるようにした。
テンプレート
ブログの体裁や見た目をカスタマイズするための、記事をテンプレートに出力する機能。 テンプレートをカスタマイズすることによって、段組みやサイトカラーなどを調整できるようにした。
ページ一覧
記事への導線となる、記事一覧ページ出力機能。 トップページ (全記事), カテゴリ一覧、タグ一覧などでそれぞれページネーションされた記事一覧を出力するようにした。 なお、 FrontMatter を読み取って新しい順で並び替えている。
運用
自動デプロイなども視野に入れてはいるが、そこまで高頻度に更新するわけではないので、当面は手動で出力されたファイルをサーバーにデプロイすることとしている。