コンテンツにスキップ

Astroを手動でインストール

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

前提条件

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

インストール

セクションタイトル： インストール

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

1. ディレクトリの作成

セクションタイトル： 1. ディレクトリの作成

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

Terminal window
mkdir my-astro-project
cd my-astro-project

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

Terminal window
npm init --yes

2. Astroのインストール

セクションタイトル： 2. Astroのインストール

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

Terminal window
npm install astro

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

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

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

3. 最初のページを作成

セクションタイトル： 3. 最初のページを作成

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

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

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

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

セクションタイトル： 4. 最初の静的アセットを作成

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

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

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

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

5. astro.config.mjs の作成

セクションタイトル： 5. astro.config.mjs の作成

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

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

astro.config.mjs
import { defineConfig } from 'astro/config';


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

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

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

6. TypeScriptのサポートを追加

セクションタイトル： 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のいずれかを使用できます）

tsconfig.json
{
  "extends": "astro/tsconfigs/base"
}

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

src/env.d.ts
/// <reference types="astro/client" />
詳しくはAstroのTypeScriptセットアップガイドをお読みください。

7. 次のステップ

セクションタイトル： 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をはじめて実行する方法を続けて学べます。