今まではHexoで実装していたブログをDocusaurusに変えてみた。
Docusaurus とは#
Docusaurus は、Facebook がリリースしているソフトウェアやライブラリのランディングページ用静的サイトジェネレータだ。 React ベースで実装されていて、デフォルトのテーマが結構いい感じなのでリファレンスやマニュアルをホストするサイトでは使い易いと話題になることが多いので使ってみたくなった。 例えば、React NativeやJestはDocusaurusでランディングページが実装されている。
Eleventyも少し試してみたが、機能性がプリミティブ過ぎて辛いので早々に諦めた。サイトのデザインを細部までこだわるなら Eleventy の方が良いだろう。
良くなったこと#
Table Of Contents が見やすくなった#
右側のサイドメニューに見やすい形で TOC が表示されるようになったのには非常に満足している。 特に現在読んでいる部分の色が変わっていくのが特に気に入っている。
今までは、markdown ファイルの一部として TOC を書いていたので、一番先頭に TOC があるのみである程度スクロールしてしまうと TOC が見えなくなっていた。 モバイルで見ると TOC は表示されなくなってしまったが、そこはデメリットとして受け入れることにした。
Progressive Web Apps に対応した#
Docusaurusでは公式な PWA プラグインがリリースされているので非常に簡単に対応できた。
Code ブロックにコピペ機能が付いた#
Code ブロックを書くだけで、そのコードのコピペができるようになったのは凄く便利だと感じている。
Code ブロックの上にマウスカーソルをホバーすると右上のあたりにコピーというボタンが表示されるので、押すとクリップボードにコードがコピーされる。
console.log("Hello, World");失われたこと#
AMP 対応#
Hexoにはhexo-generator-ampがあるので簡単に AMP 対応できたが、Docusaurusにはそういう仕組みが無いので簡単には対応できない。
関連エントリの表示機能#
Hexoにはhexo-related-popular-postsがあるので簡単に関連エントリを出せたが、Docusaurusにはそういう仕組みが無いので簡単には対応できない。
Docusaurus に対する不満#
Infima が扱いづらい#
Docusaurusが使っているInfimaという CSS Framework は、正直かなり奇妙な動作をする。
例えば、Spacing の css として以下のようなものが定義されている。
.margin-top--none { margin-top: 0 !important;}
.margin-left--xs { margin-left: 0.25rem !important;}
.padding-vert--md { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;}
.padding--lg { padding: 2rem !important;}詳細な仕様は Spacing を確認して欲しいが、正直言って私には奇妙に感じる。
モバイル対応でパフォーマンスが悪い#
React のランタイムがゴソっとダウンロードされるのでファーストページビューにかかる時間が非常に大きい。
単なる静的コンテンツを並べているだけのサイトで 600ms とかかかるのはやり過ぎ感は否めない。
検証に使ったツール#
新しくサイト構築をしたら最新のベストプラクティスに従った作りになっているかを検証するツールを使う。
今回は、この三つのツールを使ってみた。基本的には PageSpeed Insights だけ使えば良いと思う。
WebPageTest には CSP ヘッダがねぇぞって怒られるんだけども対応は諦めた。 Google Analytics を使ってる状態でちゃんと CSP ヘッダを使おうとすると nonce を付けないといけないが、そのためのサーバを用意したくなかった。
来世では頑張っていくという気持ちはある。
まとめ#
ブログを書きたいなら、自前でブログサイトを実装するのではなく SaaS を何か使いましょう。
例えば、はてなブログとか、Medium とか、世の中色々ある。
自前でブログサイトを実装するのは手段が目的になるタイプの人間だけにおすすめしたい。