ディレクトリ構成

myapp
- ...
- public
  - css
    - style.css
  - javascripts
    - about.js
    - index.js
- src
  - components
    - footer.astro
    - header.astro
  - layouts
    - BaseLayout.astro
  - pages
    - about.astro
    - index.astro
  - styles
    - index.css
- ...

各ファイル

src/components/footer.astro

<footer>
  <p>© 2025 MySite</p>
</footer>

src/components/header.astro

---
const { title } = Astro.props;
---
<header>
  <h1>{title}</h1>
  <nav>
<a href="/">Home</a>
<a href="/about">About</a>
  </nav>
</header>

src/layouts/BaseLayout.astro

---
import Footer from "../components/footer.astro";
import Header from "../components/header.astro";
const { title, script } = Astro.props;
---

<html lang="ja">
  <head>
<meta charset="UTF-8">
<title>{title}</title>
<link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
<Header title={title} />

<main>
  <slot />  <!-- ページごとの内容が入る -->
</main>

<Footer />

<!-- ページごとのJSを読み込む -->
{script && <script src={script} defer></script>}
  </body>
</html>

src/pages/about.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="About" script="javascripts/about.js">
  <h2>About Page</h2>
</BaseLayout>

src/pages/index.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import '../styles/index.css';
---

<BaseLayout title="Home" script="/javascripts/index.js">
  <h2>Astro Home</h2>
</BaseLayout>

script="/javascripts/index.js"は、public/javascripts/index.js のファイルを読み込みます。

import '../styles/index.css';は、src/styles/index.css のファイルを読み込みます。

src/styles/index.css

h2 {
  color: red;
}

public/css/style.css

h1 {
  color: blue;
}

public/javascripts/about.js

window.addEventListener('load', function(){
  console.log("about page");
})

public/javascripts/index.js

window.addEventListener('load', function(){
  console.log("index page");
})

public/javascripts/test.js

window.addEventListener('load', function(){
  console.log("test.js を実行しています。");
})

各ページで複数の Javascript のファイルを読み込む

src/layouts/BaseLayout.astro

---
import Footer from "../components/footer.astro";
import Header from "../components/header.astro";
const { title, scripts = [] } = Astro.props;
---

<html lang="ja">
  <head>
<meta charset="UTF-8">
<title>{title}</title>
<link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
<Header title={title} />

<main>
  <slot />  <!-- ページごとの内容が入る -->
</main>

<Footer />

<!-- ページごとのJSを読み込む -->
{scripts.map((src) => (
  <script type="module" src={src}></script>
))}
  </body>
</html>

src/pages/about.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="About" scripts={["javascripts/about.js", "javascripts/test.js"]}>
  <h2>About Page</h2>
</BaseLayout>

src/pages/index.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import '../styles/index.css';
---

<BaseLayout title="Home" scripts={["javascripts/index.js"]}>
  <h2>Astro Home</h2>
</BaseLayout>