ドキュメントサイト構築にDocusaurusを使ってみた

オンライン作業部屋のコマンド一覧はこれまでGitHubのMarkdownファイルを用意し、そこをユーザーに直接みてもらうようにしていました。

Gitでのバージョン・ブランチ管理ができるため、そのようにしていました。

しかし最近ふとコマンド一覧を見直してみると、各コマンドごとの詳細の説明をするために何段かインデントを入れたりしていて、Markdownが綺麗に書きづらいなと感じていました。

そこで、Markdown(かそれに類似するもの)でドキュメントを公開する方法を模索した結果、MKDocsだとかJekyllだとかSphinxといった生成ツールがあることを知りました。

その中でも特にモダンで「使ってみたい!」と思えたのがDocusaurusです。 GitHubでのスター数も申し分ないと思いました。

早速既存のコマンド一覧ページをこれで置き換えようということになり、できたページがこちらです https://sorarideblog.github.io/youtube-study-space/

特にいいなと思っているのが、警告や備考などを専用の色付きボックスで表示できることです(Qiitaなどでも同じ記法ができます) 書き方が簡単な上に、見た目もいいです。 GitHubでも同じように警告などボックス表示はできますが、日本語対応してなかったり(そうよね?)、その他の点で機能が貧弱なので...

また、コマンド例を示すときに、これまではただ

  • コマンド

のように書いてましたが、Docusaurusではコードブロックにタイトルがつけられるので、タイトル部分に例の内容を、コード部分に実際のコード例を書くことで、上記の書き方よりも見やすくなったと思います。

ドキュメント用途なので、静的ホスティングができれば十分です。 今回はなんとなくGitHub ActionsとGitHub Pagesで完結したかったので、GitHub Pagesを使用しています。 Docusaurus公式でもデプロイ方法についてさまざまな選択肢を紹介しています。

内容の構成については、既存のMarkdownファイルではコマンド一覧を1つのページで全て記述していましたが、そこそこの量があるため、必須編・基本編・発展編の3つのページに分けることにしました。 ページが複数あると、各ページのコンテンツの終わりに前のページ・次のページへのボタンが自動で設置されます。これもいいですね。image

さらに、これは公開後に気づいたことですが、Google Analyticsにも対応させました。 ただのGitHubのソースファイルでは、GitHub標準のInsightがあるのでそれでページビューなど最低限の分析はできるのですが、やっぱり公開サイトならGoogle Analyticsとかで詳しくデータを取りたいです。 幸いDocusaurusではそのことも見越されているようで、簡単にGoogle Analyticsを導入することができました。 https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-google-gtag

まとめると、「Docusaurusの機能が使えて気持ちいい」でした。 ありがとうございました。

(最後に余計なことを言うと、Docusaurusという名前だけはもっといいのないかなと思います)