Gridsomeからの移行

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

GridsomeとAstroの類似点

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

GridsomeとAstroはどちらもモダンなJavaScript静的サイトジェネレーターで、プロジェクト構成が似ています。
両者ともsrc/ディレクトリとファイルベースルーティングを行うsrc/pages/を使用します。
AstroにはVueコンポーネントを利用する公式インテグレーション (EN)があり、Vue用のNPMパッケージも利用できます。GridsomeのVueコンポーネントや依存関係をそのまま流用できる場合があります。
GridsomeとAstroどちらも、ヘッドレスCMS、API、Markdownファイルからデータを取得できます。既存のコンテンツ執筆フローを維持しやすいです。

GridsomeとAstroの主な相違点

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

GridsomeはVueベースのシングルページアプリ(SPA)ですが、Astroは.astroコンポーネントを使ったマルチページアプリ(MPA)です。AstroではVueの他、React、Svelte、Solidなども併用可能です。
GridsomeはSPAとしてvue-routerとvue-metaを使ってルーティングや<head>の管理を行いますが、Astroでは個別HTMLページとレイアウトコンポーネント内で<head>を直接管理します。
ローカルファイルのデータ取得: GridsomeはGraphQLでファイルをクエリしますが、AstroではESMインポートとimport.meta.glob()を使用します。GraphQLを使いたい場合は手動で追加できますが、標準では含まれません。

GridsomeサイトをAstroに変換する

GridsomeブログをAstroへ移行するには、公式ブログテーマスターターを使うか、テーマショーケースでコミュニティ製ブログテーマを探してください。

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

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

既存のMarkdown（またはMDXファイルはオプションのインテグレーションを使って）ファイルは、AstroのコンテンツとしてMarkdownまたはMDXページを作成できます。

Gridsomeのプロジェクト構成はAstroに似ているため、いくつかのファイルは新しいAstroプロジェクトにそのままコピーできるかもしれません。ただし完全には一致しないため、Astroのプロジェクト構成を事前に確認するのがおすすめです。

また、Gridsomeとは異なり、Astroではファイルの読み込みにimport.meta.glob()を使用するため、ローカルファイルの操作方法も併せて確認してください。

ポートフォリオサイトやドキュメントサイトなど別タイプのサイトに移行したい場合は、astro.newで他の公式スターターテンプレートを確認してください。GitHubリポジトリへのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodで開くためのワンクリックリンクが用意されています。