コンテンツにスキップ

Docusaurusからの移行

DocusaurusはReact製の人気ドキュメントサイトビルダーです。

DocusaurusとAstroの類似点

セクションタイトル： DocusaurusとAstroの類似点

DocusaurusとAstroには、プロジェクト移行を容易にするいくつかの共通点があります。

  • どちらもJavaScriptベースのモダンなサイトビルダー（Jamstack）であり、コンテンツ駆動なウェブサイト―とくにドキュメントサイト―を構築するために最適化されています。
  • 両者ともMDXページをサポートしています。既存の.mdxファイルをAstroに持ち込んでそのまま使用できます。
  • どちらもsrc/pages内に置いたMDXファイルに対してファイルベースルーティングを行い、自動でページルートを生成します。既存コンテンツや新規ページをAstroのディレクトリ構造に配置しても違和感は少ないでしょう。
  • AstroにはReactコンポーネントを利用する公式インテグレーションがあります。AstroではReactファイルの拡張子を.jsxまたは.tsxにする必要があります。
  • AstroはNPMパッケージのインストールをサポートしており、多くのReact用パッケージもそのまま利用できます。既存のReactコンポーネントや依存関係をそのまま移行できる可能性もあります。
  • AstroのJSXライクな構文はReactに慣れていればすぐ理解できます。

DocusaurusとAstroの主な相違点

セクションタイトル： DocusaurusとAstroの主な相違点

DocusaurusサイトをAstroで再構築すると、次のような違いに気付くでしょう。

  • DocusaurusはReactベースのシングルページアプリ(SPA)ですが、Astroサイトは.astroコンポーネントで構成されたマルチページアプリです。必要に応じてReact、Preact、Vue.js、Svelte、SolidJS、AlpineJSを併用できるほか、生のHTMLテンプレートもサポートされます。
  • Docusaurusにはドキュメントサイト向けの機能が組み込まれています。Astroではこれらを自前で実装するか、公式ドキュメントテーマStarlightやコミュニティ製ドキュメントテーマを利用します。なお、Starlightは当サイト（Astro本家サイト）を元に開発されており、現在この公式サイトもStarlightを使って動作しています。
  • DocusaurusはコンテンツをMDXで管理しますが、StarlightはデフォルトでMarkdown(.md)を使い、MDXはオプションです。必要であればAstroのMDXインテグレーション (EN)を追加して.mdxを併用できます。（Starlightには標準で含まれています。）

DocusaurusサイトをAstroに変換する

セクションタイトル： DocusaurusサイトをAstroに変換する

DocusaurusドキュメントサイトをAstroへ移行するには、まずStarlight公式スターターテンプレートを使用するか、テーマショーケースでコミュニティ製ドキュメントテーマを探索してください。

create astroコマンドに--templateを渡すと、公式スターターで新しいAstroプロジェクトを作成できます。また、GitHub上の既存Astroリポジトリから新規プロジェクトを開始することも可能です。

ターミナルウィンドウ
npm create astro@latest -- --template starlight

AstroのMDXインテグレーションはデフォルトで含まれているため、既存のコンテンツファイルを直ちに追加できます。

公式スターターおよび他のテンプレートはastro.newで確認できます。各プロジェクトのGitHubリポジトリ、IDX・StackBlitz・CodeSandbox・Gitpodで開くワンクリックリンクも用意されています。

コミュニティリソース

セクションタイトル： コミュニティリソース
ドキュメントを10倍高速化 (Russian)

その他のマイグレーションガイド

貢献する コミュニティ スポンサー