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 defaultwithastro/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