Eleventyからの移行

Eleventyは複数のテンプレート言語で動作するオープンソースの静的サイトジェネレーターです。

EleventyとAstroの類似点

Eleventyは多彩なテンプレート言語をサポートしますが、AstroはAstroコンポーネントを中心に、React・Svelte・Vue・Solidなどのフレームワークコンポーネントをオプションで組み込みます。
Astroはサイトメタデータも含むすべてのファイルをsrc/ディレクトリに置き、src/pages/でファイルベースルーティングを行います。
静的アセットはpublic/フォルダに配置し、ビルド時に変換されません。
EleventyではCSSやJavaScriptのバンドルを手動設定しますが、Astroは標準でバンドリングを自動処理します。

Eleventyブログを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※オプション)ファイルをMarkdown/MDXページとして追加し、移行を開始します。

Eleventyでは複数テンプレート言語で構築できましたが、Astroでは主にAstroコンポーネントをテンプレートとして使用します。UI要素・レイアウト・ページをAstroのコンポーネント構文で記述する方法を確認してください。

ポートフォリオやドキュメントサイトなど他タイプのサイトを移行する場合は、astro.newにある他のスターターテンプレートも参照すると便利です。各テンプレートのGitHubリポジトリやIDX、StackBlitz、CodeSandbox、Gitpodで開くリンクが用意されています。

This Site Is Now Built with Astro EleventyからAstroへ移行した理由。