Make your first pages

In Astro, a file in src/pages/ is a page. That’s the whole system.

Edit the home page

Open src/pages/index.astro. Replace everything in it with this:

---
const name = 'Sam';
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Home</title>
  </head>
  <body>
    <h1>Hello, I'm {name}</h1>
    <p>This is my first website.</p>
  </body>
</html>

Save the file and check your browser. Change Sam to your own name, save, and watch it update.

The part between the two --- lines is called the frontmatter. It’s where your code goes, and it runs while your site is being built. Writing {name} below it prints the value on the page.

Add an about page

Create a new file, src/pages/about.astro:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>About</title>
  </head>
  <body>
    <h1>About me</h1>
    <p>I'm learning to build websites with Astro.</p>
  </body>
</html>

Now visit http://localhost:4321/about in your browser. The file name became the address.

What you’ve done

You’ve edited one page and created another. But both pages repeat the same <html> and <head> code, and that gets tiresome. The next lesson fixes that.