コンテンツにスキップ

はじめに

Astroとは?

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。

主な特長

  • コンポーネントアイランド: 高速なウェブサイトを構築するための新しいウェブアーキテクチャー。
  • サーバーファーストのAPI設計: ユーザーのデバイスから高コストのハイドレーションをなくします。
  • デフォルトでゼロJS: サイトを遅くするJavaScriptランタイムオーバーヘッドはありません。
  • エッジ対応: DenoやCloudflareのようなグローバルなエッジを含め、どこでもデプロイできます。
  • カスタマイズ可能: Tailwind、MDX、その他100以上のインテグレーションから選択可能です。
  • 特定のUIに依存しない: React、Preact、Svelte、Vue、Solid、Litなどをサポートします。

Astroの特徴については、Astroを選ぶ理由の詳細な説明をご覧ください。✨

ブラウザでAstroを試す

astro.newにアクセスし、さまざまなテンプレートから選んで始めましょう。ブラウザでAstroの完全版を使って遊んでみてください。

最初のプロジェクトを始める

便利なcreate astroCLIウィザードを使って、新しいAstroプロジェクトをローカルに立ち上げて実行しましょう!

Terminal window
# npmで新しいプロジェクトを作成する
npm create astro@latest

インストールガイドには、CLIウィザードによるAstroのインストール、既存のAstro GitHubリポジトリからの新しいプロジェクトの作成、Astroの手動インストールについて、完全な手順が記載されています。

Astroを学ぶ

Astroサイトの主要なコンセプトとパターンの例をご覧ください。

📚 サイトに最初のページを追加する

📚 ディレクトリ構成についてもっと読む。

📚 Astroのファイルベースのルーティングについて詳しく学ぶ。

……完全なAPIドキュメントはリファレンスタブの下にあります。

Astroを拡張する

🧰 新しいプロジェクトを既成のテーマを使って始める。

🧰 公式やコミュニティのプラグインとコンポーネントを使ってサイトをカスタマイズする。

🧰 サイトショーケースを見て、インスピレーションを得る。

……インテグレーションの使い方ガイドをご覧ください。

コミュニティに参加する

活発でフレンドリーなコミュニティ、Astro Discordにぜひ参加してください。コミュニティと情報共有したり、コミュニティから力を借りられます!

💬 #general チャンネルで挨拶する。

💬 サポートチームに #support チャンネルで質問する。

💬 #showcase チャンネルであなたの作ったものをシェアする。

新着情報

Astroブログ

Astro更新履歴

翻訳する

このドキュメントの翻訳は、以下の素晴らしい方々によって提供されています。翻訳に参加しましょう!

貢献する

このドキュメントは、多くの方々の協力によって提供されています。GitHubで参加しましょう!