STEP4 では、HTML、CSS、JavaScript で作成したサイトを Vercel でインターネット上に公開しました。

今のままでも普通にサイトを表示できますし使えます。しかし、今後ページを増やしていくと、ファイルの数や修正する場所も増え、サイト全体の管理が少しずつ複雑になっていきます。

ページが少ないうちは手動による更新・管理でも何とかなりますが、ページが増えてサイトのボリュームが大きくなるにつれて大変になります。

そこで今回は、ページが増えても管理しやすくするために **Astro（アストロ）**というフレームワークを導入します。

フレームワークとは、Web サイトを作りやすくするための仕組みやルール、便利な機能がまとめられたもの、という理解で大丈夫です。（今はまだ）何かわからないけど、なんか便利になるんだな、くらいに思ってください。

この記事のゴールは、見た目のデザインやボタンなどの機能は可能な限りそのまま残しつつ、Astro 構成への移行、パソコン上での確認、GitHub への push、Vercel での再公開まで進めることです。

前回の記事はこちらです。

【STEP4】Vercel でサイトを無料公開する方法

Astro とは？

Astro は、個人のブログやコーポレートサイト、ポートフォリオサイトなど、文章や画像が中心の Web サイトを高速に作ることを得意とするフレームワークです。

例えば、ページや画像、ヘッダーやフッターなど複数のページで使う共通部分、CSS（サイトの見た目・デザインの指定） などを役割ごとに整理しやすくなっています。

複数のページで使う共通部分に関していえば、Astro でなくとも共通化することは可能です。

しかし、Astro には、そうした共通の処理を「コンポーネント」と呼ばれる部品に分け、複数のページで使い回せる仕組みが用意されています。例えば、ヘッダーを1つの部品として作っておけば、あとからヘッダー内のメニューを変更する場合も、その部品を修正するだけで各ページへ反映できます。

このような共通化の仕組みを自分で用意することなく、 Astro を導入することで簡単に Astro の仕組みをつかって共通化ができます。

さらに、Astro は表示速度の速いサイトを作ることにも適しています。

一般的に、ブラウザが処理する JavaScript が多くなるほど、ページの表示や操作にかかる負担も大きくなります。

Astro では、ページの多くをあらかじめ HTML へ変換し、操作に必要な部分だけに JavaScript を使用できます。そのため、ブラウザへ送る JavaScript を抑え、軽くて高速なサイトを作りやすくなっています。

もちろん、ボタンやフォームなどに必要な JavaScript まで自動的に消えるという意味ではありません。必要な機能は残したまま、不要な JavaScript を増やしにくい仕組みになっています。

サイトの表示速度が遅いと、せっかくユーザーがサイトに来てくれても、ページが表示される前にページを閉じられるということになりますので、表示速度はサイトを作る上で意識すべき重要な点の1つです。

ただし、今のサイトはとりあえず Cursor に作成してもらった超シンプルな最低限のもの、でしかないので、これを Astro にしたからといって表示速度が目に見えて速くなるということはないと思ってもらって差し支えありません。

今回やること

今回の流れは下記の通りです。

Astro を導入するよう Cursor に依頼する
↓
パソコン上で表示と動作を確認する
↓
公開用のファイルを正常に作れるか確認する
↓
GitHub に push する
↓
Vercel で再公開されたサイトを確認する

今回も、難しいファイルの作成や書き換えは Cursor にやってもらいます。

Astro を使うために別のツールが必要になった場合も、基本的には Cursor が必要かどうかを確認し、インストールまで進めてくれます。

自分で事前に細かい設定を調べたり、Astro のファイル構成を覚えてから指示したりする必要はありません。

1. Astro を導入するよう Cursor に依頼する

サイトを作ってもらった時と同様に、Astro を導入するよう Cursor に依頼します。

未コミットがない状態にする

ただし、STEP3（Cursor で作成したサイトを GitHub に反映するまでを徹底解説（コマンドも））で git push して以降、何かしらの変更をサイトに加えている方は、Cursor の Terminal で git status を実行し、commit されていない変更がないか確認してください。。

commit されていない変更があった場合は、下記の記事を再度確認しながら commit してください（push までしても問題ありません） 【STEP3】Cursor で作成したサイトを GitHub に反映するまでを徹底解説（コマンドも）

注意点を確認する

まずはこの注意点を確認してください。

  • 指示文内には、Cursor の作業をできるだけコントロールするような指示を含めています。環境によって、この記事で想定している作り方やインストールするツールが変わる可能性があるためです。

  • ただし、指示文の通りに送ったからと言って、必ず同じ進め方や結果になるとは言い切れません。

  • Cursor が作業を進める中で、あなたの承認を必要とすることがあれば、それを承認するため Run、Allow、Continue といったボタンが表示されることがあります。Node.js（ノード・ジェイエス） と npm（エヌピーエム） に関する承認作業は発生する可能性がありますが、それ以外のツールや作業についての承認依頼がないとも限りません。ボタンが表示されたら必ず内容を確認し、Node.js と npm に関するものでない場合は、承認する前に Cursor へ「これは何をするための許可ですか？」と確認し、説明を踏まえて自分で承認するかどうかを決定してください。

  • Cursor 内でボタンが表示される以外にも、パソコン側からも Node.js をインストールする際に許可画面が出たりパスワード入力を求められることがあります。Cursor 内ボタンと同様、Node.js についてのものでない場合は、詳細を確認した上でその手続きを承認するかキャンセルするか決定してください。

Cursor に指示文を送る

未コミットの変更がない状態で、下にある指示文をコピーして Cursor のチャットに貼り付けて送信します。

指示文内にある Node.js や npm は、Astro の仕組みを動かすためにインストールが必要なツールです。

このページをご覧になられる方の多くは、パソコンにそれらのツールが入っていないと思います。その場合は、Cursor がインストールもしてくれますが、注意点に記載したように Cursor内やパソコン側で承認・許可を求めるボタンや画面が表示されることがあります。

その場合は、Node.js と npm についてのものであることを確認した上で、進めます。

📋 コピーして送信する指示文

このサイトを Astro 構成にしてください。

必要な確認・導入・作業は、できるところまであなたが進めてください。私の操作や許可が必要な場合は、何をするのか、なぜ必要なのかを初心者向けに簡潔に説明してからいったん止めてください。

パッケージの管理には npm を使ってください。pnpm、yarn、bunは使わないでください。

まず Node.js と npm が使えるか確認してください。入っていなければ、Node.js（npm付き）が必要であることを説明し、インストールを進める前に私の許可を待ってください。

Node.js や npm 以外のツール、外部サービス、サーバー、データベースなどを追加する必要がある場合も、追加する前に理由を説明し、私の許可を待ってください。

現在のデザイン、文章、画像、リンク、ボタンなどの機能と、公開中のページ URL はできるだけ変えないでください。

終わったら、何を変更したか、サイトの確認方法、出てきた専門用語を初心者向けに説明してください。

GitHub へ commit、push はしないでください。

指示を送ると、Cursor が現在のファイルやパソコンの環境を確認し、Astro への移行を開始します。

場合によっては、Cursor がインストール用の画面や公式サイトを案内してきて、こちら側で作業が必要なこともあるかもしれません。その場合は、説明に従って操作し、わからなければ聞き、作業完了したら終わったことを伝えます。

作業を進める中では、Terminal にたくさんの英語やファイル名が表示されることがあります。これは必要なツールをインストールしたり、サイトのファイルを Astro の構成へ変更したりしているためです。

2. Astro のファイル構成を確認する

Astro へ移行が完了すると、ファイルやフォルダがたくさん増えています。

急に知らない名前がたくさん増えて戸惑うかもしれませんが、現時点で全てを理解する必要はありません。

新しいページを作りたい、などやりたいことが出てきたときに、「新しいページを作ってほしい。作ったページがどのフォルダにあるのかも教えてほしい」「ページに配置する画像はどこに格納すればいいか」などと Cursor に聞けば教えてくれます。

また、以下に Astro 構成の代表的なファイル・フォルダについて記載しますが、Cursor へ指示する際に覚えておかないといけないものではありません。やりたいことが出てきたり、「このファイルは何だろう」と思ったときに Cursor に確認すれば十分です。徐々に覚えていきます。

Astro は、一般的に下記のような構成になります。

サイトのフォルダ
├─ public
├─ src
│  ├─ components
│  ├─ layouts
│  ├─ pages
│  │  └─ index.astro
│  └─ styles
├─ astro.config.mjs
├─ package.json
├─ package-lock.json
└─ tsconfig.json

サイトの内容によって、フォルダやファイルの数・名前は異なります。

それぞれの主な役割は下記の通りです。

  • src/pages 　サイトの各ページを置く場所です。index.astro がトップページになります。

  • src/components 　ヘッダー、フッター、ボタンなど、複数の場所で使う共通部品を置く場所です。

  • src/layouts 　ページ全体の共通した形（レイアウト、構造）をまとめる場所です。

  • src/styles 　自分で作成した CSS など、サイトのデザインに関するファイルを置く場所です。

  • public 　画像やアイコンなど、Astro で変換せずにそのまま公開するファイルを置く場所です。

  • package.json 　Astro など、このサイトで使用する仕組みや、サイトを動かすためのコマンドが記載されたファイルです。

  • astro.config.mjs 　Astro 全体の設定を記載するファイルです。

  • tsconfig.json 　Astro や Cursor がプロジェクト内のコードを正しく理解するための設定ファイルです。

また、node_modules というフォルダが作成されている場合があります。

これは Astro を動かすために必要な大量のファイルが保存されている場所です。自分で中身を変更する必要はなく、GitHub にも送りません。

3. パソコン上で Astro のサイトを確認する

Astro へ移行したサイトを、自分のパソコン上で表示してみましょう。

Cursor の Terminal で下記を実行してください。

npm run dev

正常に起動すると、Terminal に下記のような URL が表示されます。

http://localhost:4321/

URL の上で Ctrl キーを押しながらクリック（Mac は Command）すると Cursor 内ブラウザでサイトが表示されるかと思います。または、URL をコピーして Chrome や Microsoft Edge などのブラウザで開いてください。

localhost は、自分のパソコンの中だけで確認するための URL です。この時点では、Vercel で公開中のサイトにはまだ反映されていません。

表示されたサイトで、下記を確認します。

  • トップページを開き、文章・画像・デザインが想定どおりに表示されるか
  • 画像が全て表示されているか
  • メニューやページ内のリンクから移動できるか
  • ボタンやフォームなどが動くか
  • 複数のページがある場合、各ページが表示できるか

何かしら問題があった場合は、状況を Cursor に伝えて修正してもらいます。テキストでうまく伝えられない場合、画面のスクリーンショットも一緒に送ると Cursor の理解も深まります。

Astroへ移行したサイトを確認したところ、下記の問題がありました。

（ここに問題の内容を書く）

原因を確認し、現在のデザインや他の機能を変えないように修正してください。
修正後は、何が原因だったのかも初心者向けに説明してください。

確認が終わったら、Terminal 上で Ctrl キーを押しながら C キーを押すと、npm run dev を停止できます。

4. 公開用のファイルを作れるか確認する

パソコン上での確認は終わりました。ただし、Vercel で公開する際には、公開用ファイルへの変換が裏側で行われます。その変換中にエラーが出ることがあります。

したがって、GitHub に push する前に、Astro が公開用のファイルを正常に作れるか確認します。

Terminal で下記を実行してください。

npm run build

build は、Astro で作業しているファイルを、ブラウザで表示できる公開用の HTML、CSS、JavaScript などへ変換することです。

正常に完了すると、dist というフォルダに公開用のファイルが作成されます。

Terminal に、正常に完了したことを示す内容が表示され、エラーメッセージが出ていなければ問題ありません。

dist は npm run build を実行するたびに作り直されるため、通常は GitHub へ送りません。

もしエラーが表示された場合は、エラー部分をコピーして Cursor に送ってください。

npm run build を実行したところ、下記のエラーが表示されました。

（ここにエラーを貼り付ける）

まず原因を初心者向けに説明し、その後、他のページや機能に影響を与えないように修正してください。
修正後にもう一度 npm run build を実行し、正常に完了することを確認してください。

5. 変更内容を GitHub に反映する

ローカルでの表示と npm run build の両方に問題がなければ、Astro へ移行した内容を GitHub に反映します。

まずは、変更されたファイルを確認します。

git status

src、public、package.json、package-lock.json、astro.config.mjs、tsconfig.json などが表示されると思います。

このとき、node_modules や dist の中にある大量のファイルが表示されている場合は、まだ git add . を実行しないでください。

.gitignore の設定が正しくない可能性があるため、Cursor に下記のように伝えます。

git statusを確認したところ、node_modules またはdistのファイルが表示されています。
これらがGitHubへ送られないように .gitignore を確認し、必要な修正をしてください。

Cursor による .gitignore の修正が完了したら、再度 git status します。node_modules と dist が表示されていないことを確認できたら、STEP3 と同じ流れで GitHub に反映します。

git add .
git commit -m "Astroを導入"
git push

これで、GitHub に保存されているサイトが Astro の構成へ更新されます。

6. Vercel で再公開されたサイトを確認する

STEP4 で Vercel と GitHub を連携しているため、main ブランチへ push すると、Vercel が変更を検知して自動で再公開をしてくれます。

Vercel の対象プロジェクトを開き、Deployments を確認してください。

最新の Deployment が Ready になれば、Astro へ移行したサイトの公開は完了です。

STEP4 で発行されたサイトの URL を開き、下記をもう一度確認します。

  • トップページが表示されるか
  • 画像が表示されるか
  • リンクやボタンが動くか
  • 複数のページがある場合、全てのページを開けるか
  • 移行前から使っていたページの URL が 404 になっていないか

よくある質問

Q. Astro は無料ですか？

はい。Astro 自体は無料で利用できます。

ただし、Astro で作ったサイトを公開するサービスや、サイト内で使用する外部サービスには、それぞれ料金や利用条件があります。

Q. .astro ファイルは HTML と全く別のものですか？

全く別ではありません。基本的な書き方は HTML と似ています。

.astro ファイルでは、HTML に加えて、ヘッダーやフッターなどの共通部分を読み込んだり、ページごとの情報を設定したりできます。

最終的には Astro が、ブラウザで表示できる HTML などへ変換してくれます。

Q. npm run dev を実行してもサイトが開きません

まず、Terminal にエラーが表示されていないか確認してください。

エラーがある場合は、その内容をコピーして Cursor に送ってください。

また、http://localhost:4321/ ではなく、別の番号の URL が表示されることがあります。その場合は、Terminal に表示された Local の URL を開いてください。

Q. Astro へ移行したら、公開中の URL は変わりますか？

下記の、Vercel から発行された、サイト全体の URL は基本的に変わりません。

https://プロジェクト名.vercel.app

ただし、移行前に about.html というページがあり、移行後に Astro の about.astro というページへ変更された場合などは、ページの URL が変わる可能性があります。

今回の指示文では、現在のページ URL をできるだけ維持するよう Cursor に依頼しています。Vercel で再公開したあとに、メニューやリンクから各ページを開き、404 になっていないか確認してください。

まとめ

これで、HTML、CSS、JavaScript で作成したサイトを Astro へ移行し、Vercel で再公開できました。

今回やったことは、下記の通りです。

  • Astro 導入前、未コミットの変更がない状態にした
  • Cursor に Astro 構成への変更を依頼した（Cursor が必要なツールを導入し作業を進めた）
  • npm run dev でパソコン上の表示と動きを確認した
  • npm run build で公開用のファイルをエラーなく作れることを確認した
  • 変更内容を GitHub に push した
  • Vercel で再公開されたサイトを確認した

Astro を導入したことで、不要な JavaScript を増やさず、軽くて高速なサイトを作りやすくなりました。また、ページの共通部分を使い回したり、サイト内のファイルを役割ごとに整理したりもしやすくなりました。

現時点では、ファイルがたくさん増えて逆に複雑になったように感じるかもしれませんが、記事やページ・機能が増えるほどに、Astro にしておいた良さは分かってくると思います。

次は、Astro で記事を書く時に使える、Markdown（マークダウン） を使った記事の書き方を説明します。

Markdown は、# や - などの簡単な記号を使って、見出しや箇条書きであることを示しながら文章を書くための書き方です。

Astro では Markdown を使うことで、HTML をいちから書かなくても記事を追加できるようになります。

次の記事はこちら

👉 【STEP6】Markdown を使った記事の書き方 ※執筆中です

このシリーズの記事