Get Started Astro Tutorial — 5. Creating the folder structure

00:00 / 00:00

5. Creating the folder structure

In our website, we want to have the following pages:

Home: Displays a list of posts.
About: Contains information about the author.
Post: Shows details about a specific post.

For now, we’ll focus on Home and About.

For the Home page, we'll use the main index file located under "pages`:

./src/pages/index.astro

For the About page, we'll create a subfolder (as more files will be added later):

./src/pages/about/index.astro

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

<Layout>
  <h1>About</h1>
</Layout>

Let’s add a global stylesheet:

Define color and typography variables.
Add some base styles.

If you're building this from scratch, you can copy the file from the get-started guide on the Content Island portal or from the GitHub example:

./src/styles/global.css

:root {
  --primary-color: #1d3353;
  --pure-white: #fff;

  /*text colors*/
  --text-color: #333;
  --text-color-light: var(--pure-white);

  /*hover colors*/
  --title-hover-color: hsl(
    from var(--primary-color) h calc(s + 20) calc(l + 10)
  );
  --menu-hover-color: hsl(
    from var(--primary-color) h calc(s + 20) calc(l + 63)
  );

  /*border color*/
  --border-color: #333;

  /*font family*/
  --ff-title: 'IBM Plex Sans Condensed', sans-serif;
  --ff-body: 'IBM Plex Sans', sans-serif;

  /*font sizes*/
  --fs-2xs: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --fs-xs: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --fs-sm: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --fs-md: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --fs-lg: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --fs-xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --fs-2xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --fs-3xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
  --fs-4xl: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);

  /*spacing*/
  --space-3xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-2xs: clamp(0.5rem, 1vw, 1rem);
  --space-xs: clamp(1rem, 2vw, 1.5rem);
  --space-sm: clamp(1.5rem, 3vw, 2rem);
  --space-md: clamp(2rem, 4vw, 3rem);
  --space-lg: clamp(3rem, 6vw, 4rem);
  --space-xl: clamp(4rem, 8vw, 6rem);
  --space-2xl: clamp(6rem, 10vw, 8rem);

  /*border radius*/
  --border-radius: 6px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--text-color);
}

main {
  flex: 1;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  position: relative;
}

Let’s create a header component for our blog menu:

./src/components/Header.astro

<header class="header">
  <nav class="menu">
    <ul>
      <li>
        <a href="/" class="menu__item"> CurioVerso</a>
      </li>
      <div class="menu__right">
        <li><a href="/" class="menu__item">All Post</a></li>
        <li><a href="/about/" class="menu__item">About</a></li>
      </div>
    </ul>
  </nav>
</header>

<style>
  .header {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--fs-xs);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
  }

  .menu__item {
    color: var(--text-color-light);
    text-decoration: none;
  }

  .menu__item:hover,
  .menu__item:active,
  .menu__item:focus {
    color: var(--menu-hover-color);
  }

  .menu__right {
    display: flex;
    gap: var(--space-md);
  }
</style>

And a footer component:

./src/components/Footer.astro

<footer class="footer">
  <p>&copy; 2025</p>
</footer>

<style>
  .footer {
    background-color: var(--text-color);
    color: var(--text-color-light);
    padding: var(--fs-xs);
    text-align: center;
  }
</style>

Now we’ll update the main layout to load the stylesheet and include the menu and footer (replacing its content entirely):

./src/layouts/Layout.astro

---
import '../styles/global.css';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
  </body>
</html>

Now we're ready! Start the project with npm run dev, open the homepage, and navigate to the About page from the menu.