タダです.
先日下記の記事を見て,そこで初めて Astro
知って気になったので,まずは Getting Started な内容を触ってみることにしました.この記事ではまずは Hello, World! の最低限のページを表示することをやっていきます.
Astro インストール
早速 Astro
をインストールします.コマンドは npm install astro
で完了します.この後の作業に備えてプロジェクトのディレクトリも作成しておきます.
mkdir my-astro-project cd my-astro-project/ npm init --yes npm install astro
Astro で Hello World! のページを生成する
インストールが完了したので,Hello World! なページをドキュメントを見ながら作っていきます.ドキュメントが日本語対応して書いてあってありがたすぎます.
Astro ページ生成
Astro ページを .astro
拡張子で作ります.src/pages/index.astro
を作りました.
--- console.log('これはブラウザではなく、ターミナルで実行されます!'); --- <!-- 以下はコンポーネントテンプレート」です。これは単なるHTMLですが、 しかし、優れたテンプレートを作成するための魔法がいくつか散りばめられています。 --> <html> <body> <h1>Hello, World!</h1> </body> </html> <style> h1 { color: orange; } </style>
なお,VSCode の Astro
の拡張機能もあり,使うと以下の画像のように見やすくなります.
Astro の設定ファイル
Astro
の設定は astro.config.mjs
をプロジェクトルートで作ります.
import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({});
ページの閲覧
ローカルサーバーを起動してページの閲覧をやってみます.オレンジ文字の Hello, World! が表示されているはずです.
npm run dev my-astro-project@1.0.0 dev > astro dev 🚀 astro v1.9.2 started in 22ms ┃ Local http://127.0.0.1:3000/ ┃ Network use --host to expose
参考情報
まとめ
Astro
が気になったので,Hello, World! のページを生成する時にやったことを備忘録として残しました.