JavaScriptレスの静的サイト生成エンジンであるastroで、ブログサイトを作成する方法について紹介します。
astroのインストールと設定、使い方について紹介していきます。

Github:

🚀🧑‍🚀 Keep your eyes to the skies, astronauts
withastro/astro: 🚀🧑‍🚀 Keep your eyes to the skies, astronauts

astroとは (Githubより):

• Webサイト構築のための新鮮で親しみやすいアプローチ
• コンポーネント指向時代におけるDXの改良
• 好きなJavaScriptフレームワークを使用し、必要最低限のJavaScriptを自動的に(デフォルトで)提供

fresh but familiar approach to building websites
the DX improvements of the component-oriented era
Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default

withastro/astro: 🚀🧑‍🚀 Keep your eyes to the skies, astronauts

インストール

以下にastroのインストール手順を紹介します。

node.jsをインストール

chocolateyを使ってnvm(node.jsのバージョン管理システム)のインストールを行います。
これにより、node.jsの任意のバージョンを後のステップでインストールできるようにします。

choco install nvm -y
refreshenv

なお、chocolateyとは何かについての概要とインストール方法については以下で紹介しています。

Windows 11にchocolateyをインストールする

インストールされたnvmを使用し、以下のコマンドでnode.jsのバージョン14.13.1をインストールします。
astroではnode.jsのバージョンは特に指定されていないようですが、無難なところでnode.jsのバージョンv14で試したところ動作が確認できたため、このバージョンをインストールに指定して進めていきます。

nvm install 14.13.1 

node.jsがインストールされたことを確認します。

> C:\ProgramData\nvm\v14.13.1\node64.exe -v
v14.13.1

任意のディレクトリを作成し、移動します。
npm initコマンドでnode.jsプロジェクトを初期化しpackage.jsonファイルを作成します。

cd C:\pg\node\_win_v14.13.1_dev\
C:\ProgramData\nvm\v14.13.1\npm.cmd init 

astroをインストール

上記Githubのドキュメントでは、npm installでastroのパッケージをインストールするよりも、
npm init astroコマンドを実行することで設定やファイルの生成までを自動的に行うことが推奨されています。

C:\ProgramData\nvm\v14.13.1\npm.cmd npm init astro

# or 

npm init astro

生成するプロジェクトの種類として、スターター(一般的)・ブログ・ドキュメント・ポートフォリオ・最小限、ミニマムなどのオプション選択可能になっています。
ここでは例としてブログを選択して進めてみます。

(npm init astroによるastroのインストール)

(npm init astroによるastroのインストール / プロジェクトの選択: スターター(一般的)・ブログ・ドキュメント・ポートフォリオ・最小限、ミニマム)

これより下記のような構成でプロジェクトのファイルが生成されます。

.
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   ├── favicon.ico
│   ├── social.jpg
│   └── social.png
├── sandbox.config.json
├── src
│   ├── components
│   ├── layouts
│   ├── pages
│   └── styles
└── tsconfig.json

初期状態の./src/layouts/BlogPost.astroファイルおよび./src/pages/posts/index.mdファイルは以下のようになっています

上記画像の”next steps”に見られるように、現在の状態ではpackage.jsonのnode/npmパッケージがインストールされていない状態なので、インストールを行います。

npm install

astroを実行

開発環境サーバーの起動は以下コマンドで行います

npm run dev

# or 

astro dev

サーバーが起動し、localhostをアドレスを開くことでサイトを見ることができます。

Github pagesへのpushやサーバーへのデプロイのために、静的ページをビルド・生成するには以下のコマンドを使用します。

npm run build

# or 

astro build