Make your first pages

Here’s the one rule that runs all of Astro. A file inside src/pages is a page. Make a file, and you’ve made a page.

Step 1: Change the home page

In VS Code, open src/pages/index.astro. index is the name Astro uses for the home page.

Select everything in the file and delete it. Then paste 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. On a Mac that’s Cmd and S. On Windows, Ctrl and S.

Now change Sam to your own name, and save again. Watch the page change.

What those lines mean

The part between the two --- lines is called the frontmatter. It’s where you put small bits of code. Here, it remembers a name.

Below it is normal HTML. Writing {name} inside it prints the name you saved. Curly braces mean “put the value here”.

Step 2: Add an about page

Make a new file. In VS Code, right-click the pages folder, choose New File, and name it about.astro.

Paste this in and save:

<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 go to http://localhost:4321/about in your browser.

$ npm run dev
[CompilerError] Expected corresponding JSX closing tag for 'div'.
Location:
  src/pages/about.astro:7:2

What you just did

You changed one page and made another. You also learned the only two tricks in those files: the frontmatter at the top, and curly braces to print a value.