Hugoからの移行

Hugoは、Goで構築されたオープンソースの静的サイトジェネレーターです。

HugoとAstroの類似点

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

HugoもAstroも、静的サイトジェネレーターであり、コンテンツ駆動なウェブサイト―とくにドキュメントサイト―を構築するために最適化されています。
どちらもMarkdownでコンテンツを作成できます。HugoではYAML、TOML、JSONのいずれかでフロントマターを記述できます。AstroではYAMLとTOMLに対応しており、既存のMarkdownファイルやHugoのフロントマターの値をそのまま利用できます（ただしAstro側ではそれらに「特別な」意味は持たせていません）。
HugoとAstroはいずれも、多様なインテグレーションや外部パッケージを組み込んで拡張できます。

HugoとAstroの主な相違点

HugoはページテンプレートにGoテンプレートを使用しますが、AstroはJSX風のHTML構文を使います。
Astroは標準のMarkdownで動的コンテンツ向けにショートコードを使用しませんが、MDXインテグレーション (EN)を追加すれば、JSXやコンポーネントのインポートが可能になります。
Hugoでは”パーシャル”でレイアウトの再利用を行いますが、Astroは完全にコンポーネントベースです。.astroファイルはコンポーネント、レイアウト、ページのいずれとしても使用可能で、他のAstroコンポーネントやUIフレームワークのコンポーネント、MarkdownやMDXファイルのメタデータやコンテンツも読み込めます。

HugoサイトをAstroに変換する

Hugoブログを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ページとして再利用できます。AstroはYAMLとTOMLのフロントマターをサポートしていますが、JSONのフロントマターを使用している場合は変換が必要です。

Markdownファイル内で変数や表現、UIコンポーネントなど動的コンテンツを使用するには、AstroのMDXインテグレーションを追加してMDXページへ変換してください。MDXはYAMLとTOMLのフロントマターをサポートしており、ショートコード構文はMDX構文に置き換える必要があります（JSX表現やコンポーネントのインポートなど）。

ポートフォリオサイトやドキュメントサイトなど別のタイプのサイトを移行したい場合は、astro.newで他の公式スターターテンプレートを参照してください。GitHubリポジトリへのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodで開発環境をすぐに立ち上げるためのリンクも用意されています。