コンテンツにスキップ

コンテンツの執筆

Astroは、コンテンツ重視のサイト(ブログ、マーケティングサイト、ポートフォリオなど)に最適です。

Astroは、コンテンツの執筆と公開に役立ちます。Markdown/MDXを使ってAstroで直接ブログ記事を書いたり、ヘッドレスCMSからコンテンツを取得できます。Astroは、ページにレイアウトを追加したり、記事のインデックスを作成したり、RSSフィードを設定して読者に購読してもらえたり、コンテンツを中心にサイトを構築できます。

Astroでは、さまざまな方法でコンテンツを執筆できます。:

  • Markdownファイル(.mdまたは代替拡張子)を使って、リッチテキストのコンテンツを簡単に記述できます。
  • MDXファイル(.mdx)を使って、コンポーネントと動的な式をドキュメントに含めます。
  • サードパーティのコンテンツマネジメントシステム(CMS)を使用して、コンテンツを.astroページに取り込めます。
  • その他のオプション(コンテンツの多い場合あまり使われない)として、.astroファイル.htmlファイルもあります。

Markdownは、基本的なフォーマットとヘッダー、リストや画像などの一般的な要素でリッチテキストを書くために便利な構文です。Astroには、プロジェクト内のMarkdownファイルをサポートする機能が組み込まれています。

コードエディタで新しい.mdファイルを作成して書いたり、お気に入りのMarkdownエディタで書かれた既存のファイルを取り込めます。StackEditDillingerなどのオンラインMarkdownエディタでは、GitHubに保存されているAstroリポジトリと編集・同期できます。

📚 AstroでMarkdownコンテンツを書くについてもっと学ぶ。

MDXインテグレーションをプロジェクトに追加すると、.mdxファイルを使用してコンテンツを記述できます。このファイル形式では、静的なAstroコンポーネントとインタラクティブなフレームワークコンポーネントの両方を含むカスタムコンポーネントやJavaScriptの式をMarkdownに含むことができます。バナーやインタラクティブなカルーセルなどのUI要素をテキスト内に追加して、コンテンツを本格的なウェブページにできます。

プロジェクトファイルと一緒に、コードエディタで.mdxファイルを直接、作成・編集することができます。

📚 AstroでMDXを使うについてもっと学ぶ。

Storyblok、WordPress、Contentfulなど、既存のコンテンツ管理システム(CMS)でブログ記事を書けます。Storyblokなど一部のCMSは、公式のAstroインテグレーションを提供しています。また、Astro pagesがリモートコンテンツの取得に使用できるJavaScript SDKを提供しているものもあります。

src/pagesディレクトリにあるMarkdownとMDXファイルは、Astroのファイルベースルーティングを使って、記事ファイルのパスに対応するURLにページを自動生成します。

また、MarkdownやMDXファイルをsrc/pagesディレクトリの外に置き、代わりにその内容を.astroページにインポートできます。

CMSでコンテンツを書いている場合、記事を取得して動的ルーティングを使用すると、1つの.astroファイルを使って、各記事のルートを生成できます。Astroのデフォルトの静的モードでは、これらのルートはビルド時に生成されます。SSRモードでは、実行時にリクエストに応答し、必要に応じてコンテンツを取得します。

ブログのアーカイブやブログのタグごとのページなど、コンテンツを整理して表示するための共通機能を構築するために、AstroではMarkdownやMDXのfrontmatterからファイル名とメタデータを取得し、これらを利用してページコンテンツやルートを生成できます。

公式の@astrojs/mdxインテグレーションに加えて、Astroプロジェクトでコンテンツを扱うためのサードパーティによるコミュニティインテグレーションが複数あります。