Jekyllからの移行

Jekyllは、Rubyで構築された静的サイトジェネレーターです。

JekyllとAstroの類似点

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

どちらも静的サイトジェネレーターであり、ブログ構築によく使われています。
JekyllとAstroはいずれも、MarkdownとHTMLでコンテンツを記述できます。どちらもYAML形式のフロントマターでレイアウト指定や下書き管理などを行えます。既存のMarkdownファイルはそのままAstroで利用できます。
JekyllとAstroはいずれもファイルベースのルーティングを採用しています。Astroのsrc/pages/ディレクトリと、Jekyllの_posts/ディレクトリは似た役割を持ちます。新しい投稿の作成手順は直感的に理解できるはずです。

Jekyllはブログ機能に特化しており、タグやカテゴリなどの機能が組み込まれています。Astroではこれらを自分で構築するか、ブログスターターテーマを使用する必要があります。ミニマルなAstroプロジェクトにはこれらの機能は含まれていません。
JekyllはLiquidテンプレートを使用してレイアウトや再利用可能なパーツを構築しますが、AstroはJSX風構文の.astroファイルを使ったテンプレートで構成されます。.astroファイルは、ページ・レイアウト・コンポーネントのどれとしても利用でき、他のAstroコンポーネントやUIフレームワークコンポーネント、MarkdownやMDXファイルのデータもインポートできます。

Jekyllブログを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ファイルをそのままAstroに移行し、Liquidテンプレートの代わりに、AstroのMarkdownレイアウトを使用してMarkdownページを作成してください。

既存のHTMLページコンテンツの多くはAstroページへ変換できます。また、HTMLテンプレート内に直接変数、JSX風の式、コンポーネントのインポートを利用できます。

AstroにはJekyllのようなpermalinkプロパティは存在せず、プレースホルダーも利用できません。既存のURL構造を維持したい場合は、Astroのルーティングガイドを確認するか、Netlifyなどのホスティングサービスでリダイレクトを設定してください。

ポートフォリオサイトやドキュメントサイトを移行したい場合は、astro.newのスターターテンプレートをご覧ください。GitHubリポジトリへのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodでの起動リンクも用意されています。