OverClock Audioのホームページを一新しました。
かなりリンク切れの状態で放置してしまっていたので、心機一転作り直しました。
Docusaurus
ホームページを作るにあたり、更新が簡単にできるようにしたかったので、今回はDocusaurusというサービスを使用してホームページを作成しました。
Build optimized websites quickly, focus on your content | Docusaurus
An optimized site generator in React. Docusaurus helps you to move fast and write content. Build documentation websites, blogs, marketing pages, and more.
Docusaurusは以下のような特徴があります
- ドキュメントサイトの構築に特化
- ドキュメントや記事をMarkdownで記載可能
- 検索機能
- ブログ機能
- 多言語対応
- バージョニング
- SEOフレンドリー
基本的にはフレームワークやサービス、製品のドキュメントを作成するためのフレームワークですが、ブログ機能もありホームページとしても利用できると考えました。
改良点
Docusaurusを使用するにあたって、足りなかった点を自分で追加しました。
リンクカード対応
Docusaurusはドキュメントやブログ内でリンクを添付しても、ZennやQiitaのようにカードで表示できません。
ただ、単にリンクを貼ってもリンク先のイメージがわかりにくいので、リンクカードに対応するようにしました。
具体的には、remarkというMarkdownからHTMLに変換する際に適用できる機能を使用して、Markdown内にURLが記載されている場合、カード表示のHTMLに変更するプラグインを作成しました。
後は、変換したHTMLのタグやクラスに応じたCSSを記述してスタイリン グします。
カードの表示に必要な情報であるサイトタイトルや画像は、OGPという規格を使用します。 URL先のOGP情報を取得し、その情報をもとにカードを作成します。
Docusaurusはサイトをサーバーにデプロイする際（正確にはビルドする際）に、MarkdownをHTMLに変換するので、サイトを訪れたユーザーは変換に待たされるのではなく、最初からリンクカードに変換された状態で表示されます。
結果的にMarkdown内にURLを記述するだけで、上記のDocusaurusのリンクカードのような表示をすることができます。
ダークモード固定
Docusaurusはデフォルトでライトモードとダークモードを切り替えるボタンが設置されています。
個人的にダークモードの表示だけで充分なので、ボタンを非表示にして表示をダークモードのみに設定しました。