【AstroPaperでブログを作る】第1回：Node.jsの準備からローカル開発スタートまで

こんにちは、ＩＫＫＯＨです！

新連載として、モダンなWebフロントエンドフレームワーク「Astro」の超人気ブログテンプレート 「AstroPaper」 を使い、自分だけの爆速ブログを立ち上げるチュートリアルをお届けします。

第1回目となる今回は、「パソコンでの環境構築から、ローカル環境でブログを表示・編集するまで」のステップを解説します。初心者の方でも迷わず進められるよう、実際のコマンドや画面キャプチャを交えてお届けしますので、ぜひ一緒に手を動かしてみてください！

🛠️ 今回のゴール

Node.jsをインストールする
AstroPaperのプロジェクトを立ち上げる
パソコン上でブログを表示し、基本設定を書き換える

ステップ1：前提となる「Node.js」のインストール

Astroを動かすには、Node.jsという実行環境がパソコンに入っている必要があります。

まずは以下の公式サイトからインストーラーをダウンロードします。

👉 Node.js 公式サイト https://nodejs.org/

Tip

画面に「LTS（推奨版）」と「Current（最新版）」が表示されますが、基本的には安定している「LTS」を選べば間違いありません。ダウンロードしたファイルを開き、基本的にはすべて「次へ（Next）」で進めていくだけで簡単にインストールが完了します。

正しくインストールできたか確認するため、ターミナル（Mac）やコマンドプロンプト（Windows）を開き、以下のコマンドを実行してみます。

node -v

バージョン番号（例: v22.xx.x など）が表示されれば準備完了です！

ステップ2：AstroPaperプロジェクトの作成

Node.jsが準備できたら、いよいよAstroPaperを使ってブログの土台を作ります。

任意の作業用フォルダでターミナルを開き、以下のコマンドを実行します。今回はプロジェクト名を astro-paper-blog としています。

npm create astro@latest astro-paper-blog -- --template satnaing/astro-paper --no-install --git

Note

AstroPaperはサードパーティー製のテンプレートであることから自動インストールだとエラーが表示されるため、 --no-install オプションを付けています。 --git オプションについては次回解説するGitHub連携で使うため付けています。

AstroPaperプロジェクト作成

プロジェクト名で作成されたフォルダ内に移動し、続けてAstroPaperの依存パッケージのインストールを行います。

cd ./astro-paper-blog
npm install

AstroPaper依存パッケージインストール

インストールスクリプトを持つパッケージ sharp, esbuild が未許可という警告が表示されました。許可してインストールするには、以下のコマンドを実行します。

npm install-scripts approve sharp
npm install-scripts approve esbuild
npm install

ステップ3：ローカル環境での起動確認

次はさっそくローカル環境での動作確認をしてみます。

npm run dev

AstroPaper起動

ブラウザで http://localhost:4321 にアクセスすると、以下のデモ画面が表示されます。

AstroPaper起動２

ステップ4：ブログの基本設定を編集

このブログを「自分仕様」にするための最初の一歩として、サイト名の情報を書き換えてみます。

プロジェクト直下にある astro-paper.config.ts をエディタで開くと冒頭に以下のような記述がありますので、titleを書き換えてみます。

import { defineAstroPaperConfig } from "./src/types/config";

export default defineAstroPaperConfig({
  site: {
    url: "https://astro-paper.pages.dev/",
    title: "AstroPaper",
    description: "A minimal, responsive and SEO-friendly Astro blog theme.",
    author: "Sat Naing",
    profile: "https://satna.ing",
    ogImage: "default-og.jpg",
    lang: "en",
    timezone: "Asia/Bangkok",
    dir: "ltr",
  },
  // 省略
});

title の値をデフォルトの “AstroPaper” から “ＩＫＫＯＨ” に書き換えてみます。

保存した瞬間、ブラウザの画面（localhost:4321）が自動でリフレッシュされ、書き換えた内容が反映されました。

AstroPaper起動３

停止するにはコマンドを実行したターミナルで、Ctrl + C を入力します。「バッチジョブを終了しますか (Y/N)?」と聞かれるので、Y を入力して Enter を押します。

ステップ5：ビルドコマンドの実行

次は以下コマンドでビルドが正常に完了することを確認します。（※先ほど作成した astro-paper-blog フォルダの中で実行します）

npm run build

AstroPaperビルド

エラーが発生してしまいました。

動作確認時にターミナルに表示されていたメッセージが原因です。

AstroPaper起動

１つ目のメッセージは、インストールしたAstroよりも新しいバージョンがリリースされているという通知ですが、当記事執筆時点のAstroPaperは、そのバージョンに未対応のため、無視して問題ありません。

Info

当記事執筆時点では、AstroPaperのバージョンは v6.1.0 であり、このバージョンのAstroPaperが使用するAstroのバージョンは v6.4.8 となっています。

２つ目のメッセージは、npm install でインストールされた Vite のバージョン v8.1.3 と、Astroが使用すべきバージョン v7.0.0 が異なるという警告です。

これが原因でビルドがエラーとなっています。ビルドエラーを解消するために、以下のコマンドを実行して、インストールする Vite のバージョンを指定します。

npm pkg set overrides.vite="^7.0.0"
npm install

再度ビルドコマンドを実行してみます。

npm run build

Finished in 1.289 seconds のようなメッセージが表示されれば正常終了です。お疲れさまでした。

次回は、インターネット上にこのブログを公開する方法を解説する予定です。少なくともローカル環境ではビルドが通ることを確認しておくことで、スムーズに公開することができます。