継続は力なり

タイトル通り定期的な更新を心掛けるブログです。

静的サイトジェネレーターの『Astro』で Hello,World! のページを生成してみた

タダです.

先日下記の記事を見て,そこで初めて Astro 知って気になったので,まずは Getting Started な内容を触ってみることにしました.この記事ではまずは Hello, World! の最低限のページを表示することをやっていきます.

blog.riywo.com

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>

なお,VSCodeAstro拡張機能もあり,使うと以下の画像のように見やすくなります.

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

参考情報

docs.astro.build

まとめ

Astro が気になったので,Hello, World! のページを生成する時にやったことを備忘録として残しました.