VuePressからの移行

VuePressは、Vueをベースにしたオープンソースの静的サイトジェネレーターです。

VuePressとAstroの主な共通点

VuePressとAstroには、移行時に役立ついくつかの共通点があります。

VuePressとAstroはどちらもモダンなJavaScript製の静的サイトジェネレーターであり、似たようなプロジェクト構成を持ちます。どちらもファイルベースのルーティング用の特別なsrc/pages/フォルダーを使用します。ページの作成や管理の方法は親しみやすいはずです。
AstroとVuePressはどちらもコンテンツ駆動型のWebサイトに適しており、Markdownファイルの優れたサポートを提供します。Markdownでの執筆は馴染みがあり、既存コンテンツをそのまま利用できます。
AstroにはVueコンポーネントを使用するための公式インテグレーション (EN)があり、Vue関連のNPMパッケージのインストールもサポートしています。Vueで書いたUIコンポーネントの一部またはすべてを再利用できる可能性があります。

VuePressとAstroの主な違い

VuePressサイトをAstroで再構築する際には、いくつかの重要な違いに気付くはずです。

VuePressはVueベースのシングルページアプリケーション（SPA）です。Astroサイトは.astroコンポーネントを用いたマルチページアプリケーション（MPA）ですが、React、Preact、Vue、Svelte、Solid、AlpineJSなどのフレームワークにも対応しています。
レイアウトテンプレート：VuePressではMarkdown（.md）とHTMLテンプレートを使ってページを構成します。Astroはコンポーネントベースであり、HTMLテンプレートとして使えるAstroコンポーネントを通じて、ページ・レイアウト・UI要素を組み立てます。AstroではMarkdownおよびMDXファイルからページを生成できます。
VuePressはMarkdown中心のコンテンツ重視のドキュメントサイトを構築するために設計されており、組み込みのドキュメント機能が多数あります。Astroではそのような機能を公式ドキュメントテーマ（Starlight）で補完できます。Starlightはこのサイトが元になっており、現在も使われています。コミュニティによるドキュメントテーマも多数用意されています。

VuePressからAstroへの移行方法

VuePressのドキュメントサイトをAstroへ移行するには、公式のStarlightドキュメントテーマスターターを使うか、コミュニティ製ドキュメントテーマ一覧からテーマを選びましょう。

create astroコマンドに --template オプションを付けてスターターテンプレートから新しいAstroプロジェクトを開始できます。または、既存Astroリポジトリからプロジェクトを作成することも可能です。

npm create astro@latest -- --template starlight

pnpm create astro@latest --template starlight

yarn create astro --template starlight

既存のMarkdownコンテンツファイルをMarkdownページとして追加できます。VuePressのdocsディレクトリにあるドキュメントをAstroのsrc/pages/に移動すれば、ファイルベースルーティングの利点を活かせます。既存のURL構造を維持したい場合は、同じ構成でフォルダを作成してください。

VuePressやそのテーマは、レイアウトやメタデータの処理を多く担っていた可能性があります。Markdown用ラッパーレイアウトの作成方法を参照して、Astroでテンプレートや<head>の管理方法を確認しましょう。

astro.newでは、Astroの公式ドキュメントスターターやその他テンプレートが見つかります。各プロジェクトのGitHubリポジトリのリンクや、IDX、StackBlitz、CodeSandbox、Gitpodといったオンライン開発環境ですぐに試せるリンクも用意されています。