AHA Stack を試したい(3) Astro編

2025年11月12日 2025年11月21日

kenp

前回の続きから。

index.astro ファイルを編集してみます。

前回はcomponentとして Mypage.astro を作りましたが、エラーでうまく表示出来ませんでした。

今回は2行目の import分を見直しています。

---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} >
    <title>Astro</title>
  </head>
  <body>
    <h1>初めてのAstro</h1>
  </body>
</html>

---
import Mypage from '../components/Mypage.astro';
import Layout from '../layouts/Layout.astro';

// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---

<Layout>
	<Mypage />
</Layout>

結果はサーバーを再起動するまでもなく、表示がうまく出来ていました。