2024-02-07

Docusaurusを使ってドキュメントサイトを作る。

Docusaurus

今年の目標を基礎から体系的に勉強すると考えたので何かこの際に新しい技術を利用して何か作ってみようと思った。

その時に前から気になっていたDocusaurusを触れてみたいと思っていた。

また使い慣れているSSGジェネレーターであるAstroに戻したい場合は簡単に変更できそうなので試してみたいと考えた。

参考資料

Migrate to Docusaurus

https://docs.astro.build/ja/guides/migrate-to-astro/from-docusaurus/

Docusaurus　公式サイト

https://docusaurus.io/

MDX 公式サイト

https://mdxjs.com/

Astro View Transitions

https://docs.astro.build/en/guides/view-transitions/

概要

Docusaurusはドキュメントの作成やブログなどに特化しておりMDファイルから簡単にドキュメンテーションとして公開することができる。

また、reactをサポートしておりMDXも利用することが可能。

最近、AstroやHugoなどで様々なMDファイルを利用してデプロイすることで簡単にブログを構築することができるが、その類いのものだと考えている。

またローカルサーバー立ち上げの時点からダークモードや多言語サポート、Algoliaを利用した検索までも網羅しておりほとんど個人でやるには事足りると思う。

自分でライブラリなどを作成した場合などのドキュメンテーションとしてとてもいい選択肢の一つになると考えている。

MDX

MarkdownとJSXを組み合わせたファイルフォーマット。

特にReactベースのプロジェクトや静的サイトジェネレーターなどで利用可能。

JSXらしいコンポーネントの再利用性やMarkdownファイル以上の複雑なレイアウトの作成などができる。

環境構築

npx create-docusaurus@latest

---
What should we name this site? … docusaurus-demo
✔ Select a template below... › classic (recommended)
✔ This template is available in TypeScript. Do you want to use the TS variant? › yes

このコマンド一つでCLIとの対話形式で環境構築を行うことができる。

テンプレートの作成とTypescriptの有無を選択して速攻進めることができる。

その後にこのコマンドで

npm start

で実際にローカル環境を見てほしい。

そこにはよく見るようなとても素晴らしいレイアウトのテンプレートサイトが表示されていると思う。

これを自由に編集することができるので様々なテンプレートの作成などが利用できる。

技術選定

冒頭で述べた今年のインプットをまとめるツールの一つの選択肢として考えようと思っている。

今年の目標としてインプットの機会を増やして自分の様々な観点から開発レベルの向上を図りたいと考えるため、Docusaurusのような今の自分に必要な機能がすでに備わりつつ、インプットに集中できるような環境を簡単に作り出すことができるのは個人的にすごく魅力的である。

また、現在このブログなどは逆に学習のポートフォリオとして作成している点もあるので、引き続き自分なりにレイアウトの作成や機能の追加などを進めていければいいかなと思っている。

まとめ

簡単に必要な機能を簡単に構築できることに感動した。

もう少し早く知っていればすでに乗り換えていたかもしれないが、現状ではいつかこんなテンプレートが作れるように精進していきたい。

またブログの方もTransitionsAPIを試せてないので時間ある時にやってみたい。