ブログを作る② - ブログ機能の実装

まずはウェブサイトとしての体裁を整えたかったので、ブログのコア機能となる「記事投稿」「記事一覧」「記事詳細」を実装し、インターネットに公開することを目標に進めていった。

ドメイン

インターネットに住まう人間たるもの、ドメインの一つや二つは持っておかなきゃね！という内なる声に押され、
Google Domainsでkawamt.comを購入した。

ビルド・ホスティング

Vercelでホスティングしている。
静的サイトジェネレーターにはNext.jsを採用した。
課金も辞さない構えでVercelを選択したが、今のところ一銭もかかっていない。すごい時代になったものだ。

記事公開までの流れ

各記事はMarkdownで書いている。
CMSは使っておらず、このウェブサイトのソースコードがあるgithubリポジトリの記事置き場にMarkdownファイルをcommitするだけでいい。
commitすると自動でVercelのbuildが走り、記事として公開される。

MarkdownをHTMLに変換

当初はMDXで実装を進めてたが、よく考えたら記事内で特にJSXを展開する機会はないな、と思い直してやめた。
それに、なるべく記事ソースにはMarkdownのみで記述したデータのみを残すようにしておきたい。
ジェネレータに依存するような特殊記法があった場合、将来的に実装を移し替える際にコストがかかってしまうからだ。

最終的にはRemarkベースでパースして、rehypeReactでJSXに吐き出し、後はNext.jsでよしなにやっていく形に落ち着いた。

「続きを読む」の実装

ブログサービスではお馴染みの機能で、ざっくり言うと
「"続きを読む"のリンクを踏むと記事詳細ページに飛び、一覧では隠れていた記事の本文が表示される」
というもの。

前文と本文を分ける記号を決める

まず、元は前後分かれてない一つの記事ファイルなので、記事一覧で表示する前文とそれ以外を分ける改ページ記号を定義する必要がある。
ただ、前述の通り、なるべく特殊記法の定義は避けたい。
悩んだ末、Markdownの水平線を示す記法を改ページ用の記号として扱う作戦で行くことにした。

Markdownには水平線を示す記法が複数あるので、普通に水平線を引きたい場合は---を使い、改ページをする場合は***を使えばいい。

本文を省いた記事一覧ページ

splitで前文と本文に分け、前者を渡してビルドにかければ、簡単に前文だけが表示される記事一覧を作ることができる。

// `***`を分岐点に前文と本文を分け、前文だけをRemarkの変換にかけて記事一覧へ出力する
const [introduction, body] = content.split("***");
const introductionSource = await markdownToHtml(introduction);

// "続きを読む"のリンクを表示するかどうかのフラグに使う
const isShort = !body

また、改ページ記号がなければ、introductionに全文が入ることになり、"続きを読む"がない、短い記事が生成される。

前文と本文の両方が載っている記事詳細ページ

記事詳細ページへ移ったら、改ページの記号として使った***はそのまま水平線として描写される。
これはこれで前文と本文の境目が分かりやすくなって都合が良い。