AIに聞きながら、Astroでブログを作り始めた日 ― 最初の画面が表示されるまで

前の記事で、日々の学習を形に残すためにブログを始めることを書きました。

始めると決めたら、次はブログを書く場所が必要です。

今回は、Astroでプロジェクトを作り、ブラウザに最初の画面が表示されるまでを書いてみます。

Astroのプロジェクトを作る

Astroを使うのは初めてでした。

ただ、ReactやFlutterなどでプロジェクトを作った経験はあります。ターミナルでコマンドを実行して、必要なファイルをまとめて作る、という流れ自体には慣れていました。

まず、ターミナルで次のコマンドを実行します。

npm create astro@latest

Astroには、プロジェクト作成を案内してくれるセットアップ用の画面があります。コマンドを実行すると、プロジェクトを作る場所や、最初に使うテンプレートなどを順番に聞かれました。

全部を自分で用意するのではなく、質問に答えていくと必要なファイルが作られます。

選択肢の意味が分からない

操作そのものには迷いませんでした。ただ、Astroは初めてです。

画面に選択肢が出ても、その選択によって何が変わるのかが分からないところがありました。

そんなときは、画面のスクリーンショットを撮って、AIにそのまま送りました。

「これは何を選ぶ画面なのか」「どちらを選ぶと何が変わるのか」を聞き、意味を確認してから進みます。

今回はブログを作りたいので、テンプレートにはブログを選びました。

最初の画面を表示する

セットアップが終わったら、作られたプロジェクトのフォルダへ移動します。

cd my-blog

開発用のサーバーを起動します。

npm run dev

ターミナルに表示されたURLをブラウザで開くと、ブログのひな形が表示されました。

思ったより簡単だった。

これが、最初の感想でした。

まだ自分の記事もなければ、色も名前も今とは違います。それでも、コマンドを1つ実行して質問に答えただけで、ブラウザにブログの形が出ています。

何もないところから全部作ると思っていたので、最初の画面が表示されるところまでは、驚くほどすんなり進みました。

日本語で伝えながら、自分好みにしていく

ここから先は、AIに自分のことや好きなものを伝えながら、少しずつ変えていきました。

「もう少し落ち着いた雰囲気にしたい」

「文房具が好きだと伝わるようにしたい」

「ここが気になるので、こうしてほしい」

コードの指示ではなく、普段使っている日本語で伝えます。変更された画面を見て、気になるところをまた伝える。その繰り返しでした。

ブログの名前も、デザインも、最初から決まっていたわけではありません。

元数学教諭で、今はQAエンジニアをしていること。万年筆やノート、コーヒーが好きなこと。白いペキニーズと暮らしていること。そして、学習したことを残せる、自分の書斎のような場所がほしいこと。

そうした話をAIに送りながら作っていくうちに、少しずつ今の形が見えてきました。

作りながら、BUNBOUになっていった

最初に表示されたのは、Astroが用意してくれたブログのひな形でした。

そこに、自分の好きなものや、落ち着く色、書きたいことを少しずつ足していく。そうしてできてきたのが、今の BUNBOU です。

プロジェクトを作るところまでは、思ったより簡単でした。でも、自分の場所にしていくところには終わりがありません。

それも含めて、ブログを育てていくということなのだと思います。

次の記事では、そもそもなぜnoteやWordPressではなく、AstroとAWSでブログを作ることにしたのかを書いています。