Astroを手動でインストール

このガイドでは、新しいAstroプロジェクトを手動でインストールおよび設定する手順を説明します。

前提条件

Node.js - v18.14.1 またはそれ以上。
テキストエディタ - VS Codeと公式Astro拡張機能を推奨します。
ターミナル - Astroは、コマンドラインインターフェイス（CLI）からアクセスします。

インストール

自動CLIツール create astro を使用しない場合は、以下の案内にしたがってプロジェクトを自分でセットアップできます。

1. ディレクトリの作成

プロジェクト名で空のディレクトリを作成し、その中に移動します。

mkdir my-astro-project
cd my-astro-project

新しいディレクトリに移動したら、プロジェクトの package.json ファイルを作成します。これはAstroを含むプロジェクトの依存関係を管理する方法です。このファイル形式に馴染みがない場合は、以下のコマンドを実行して作成してください。

npm init --yes

pnpm init

yarn init --yes

2. Astroのインストール

まず、Astroプロジェクトの依存関係をプロジェクト内にインストールします。

npm install astro

pnpm add astro

yarn add astro

次に、package.json のプレースホルダー “scripts” セクションを、以下のように置き換えます。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },

これらのスクリプトは、後ほどAstroの起動や各種コマンドの実行に使用します。

3. 最初のページを作成

テキストエディタで、ディレクトリ内のsrc/pages/index.astroに新しいファイルを作成します。これがプロジェクトにおける最初のAstroのページとなります。

このガイドでは、次のコードスニペット（---のダッシュを含む）を新しいファイルにコピー＆ペーストします。

---
// Astroへようこそ！この3つのダッシュで囲まれた部分のコードが、
// 「コンポーネントフロントマター」です。ブラウザで実行されることはありません。
console.log('これはブラウザではなく、ターミナルで実行されます！');
---
<!-- 以下は「コンポーネントテンプレート」です。これは単なるHTMLですが
     しかし、優れたテンプレートを作成するための魔法がいくつか散りばめられています。 -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

4. 最初の静的アセットを作成

静的アセットを格納するために、public/ ディレクトリも作成する必要があります。Astroはこれらのアセットを常に最終ビルドに含めますので、コンポーネントテンプレートの内部から安全に参照できます。

テキストエディタで、ディレクトリ内の public/robots.txt に新しいファイルを作成します。robots.txt は、ほとんどのサイトがGoogleなどの検索ボットにあなたのサイトをどのように扱うかを伝えるために含める簡単なファイルです。

このガイドでは、次のコードスニペットを新しいファイルにコピー＆ペーストしてください。

# 例: すべてのボットにサイトのスキャンとインデックスを許可する。
# 完全な構文: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

5. `astro.config.mjs` の作成

Astroの設定は、astro.config.mjs を使用します。このファイルは、Astroの設定が必要ない場合は任意ですが、今すぐ作成することをお勧めします。

プロジェクトのルートに astro.config.mjs を作成し、その中に以下のコードをコピーします。

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});

ReactやSvelteなどのUIフレームワークコンポーネントや、TailwindやPartytownなどのツールをプロジェクトに組み込む場合は、ここで手動でインテグレーションを取り込んで設定します。

詳しくはAstroのAPI設定リファレンスを参照してください。

6. TypeScriptのサポートを追加

TypeScriptはtsconfig.jsonを使って設定します。TypeScriptのコードを書かない場合でも、AstroやVS Codeなどのツールがプロジェクトを理解するために、このファイルは重要です。いくつかの機能（npmパッケージのインポートなど）は、tsconfig.jsonファイルがないとエディタで完全にサポートされません。

TypeScriptのコードを書く予定がある場合は、Astroのstrictまたはstrictestテンプレートを使うことを推奨します。3つのテンプレートの構成は、astro/tsconfigs/で確認・比較できます。

プロジェクトのルートにtsconfig.jsonを作成し、その中に以下のコードをコピーします。（TypeScriptのテンプレートには、base、strict、strictestのいずれかを使用できます）

{
  "extends": "astro/tsconfigs/base"
}

最後に、src/env.d.tsを作成し、Astroプロジェクトで利用できる型をTypeScriptに知らせます。

/// <reference types="astro/client" />

詳しくはAstroのTypeScriptセットアップガイドをお読みください。

7. 次のステップ

上記の手順を踏んだ場合、プロジェクトディレクトリは以下のようになっているはずです。

ディレクトリnode_modules/
- …
ディレクトリpublic/
- robots.txt
ディレクトリsrc/
- ディレクトリpages/
  - index.astro
- env.d.ts
astro.config.mjs
package-lock.json またはyarn.lock、pnpm-lock.yamlなど。
package.json
tsconfig.json

おめでとうございます！これでAstroを使うための設定は完了です。

このガイドにすべてしたがった場合は、ステップ2: Astroをスタートするに直接ジャンプして、Astroをはじめて実行する方法を続けて学べます。

ページを編集 Translate

Contribute

Community

Astroを手動でインストール

前提条件

インストール

1. ディレクトリの作成

2. Astroのインストール

3. 最初のページを作成

4. 最初の静的アセットを作成

5. `astro.config.mjs` の作成

6. TypeScriptのサポートを追加

7. 次のステップ

どんなことを？

GitHub Issueを作成

フィードバックを送信

フィードバックを送信

Astroを手動でインストール

前提条件

インストール

1. ディレクトリの作成

2. Astroのインストール

3. 最初のページを作成

4. 最初の静的アセットを作成

5. astro.config.mjs の作成

6. TypeScriptのサポートを追加

7. 次のステップ

5. `astro.config.mjs` の作成