Create Your Astro Site: Build Pages and Navigate Routes

Welcome to your Astro crash course! You’ve already set up a starter project. Now, let’s make it more useful by adding different pages and learning how Astro handles navigation between them. We’ll explore how Astro uses your file structure to automatically create web addresses for your pages.

What You’ll Learn

In this guide, you will learn how to:

• Create new pages for your Astro application.
• Understand how Astro’s file-based routing works.
• Organize pages using subfolders.
• Add simple navigation links between your pages.

Prerequisites

• A basic Astro project set up.
• Familiarity with basic HTML.

Step 1: Understand Astro’s File-Based Routing

Astro uses a clever system called file-based routing. This means the way your files are organized in a specific folder directly determines the web address, or URL, for each page on your site. Think of it like a map: the folder structure is the map, and your files are the destinations.

All your page files must live inside a folder named pages. Right now, you likely have an index.astro file. The name index is special. It tells Astro that this file is the main homepage, or the root page. When someone visits your site without typing anything after the main address, they’ll see this page.

Step 2: Create a New Page

Let’s create an “About” page. To do this, make a new file inside your pages folder and name it about.astro. The name of the file, about, will become part of the page’s web address.

Now, copy the content from your index.astro file and paste it into your new about.astro file. Change some of the text inside so you can easily tell it apart. Save the file.

Tip: If you were to open your project in a web browser now, the homepage would be at yourwebsite.com/. Your new About page would be accessible at yourwebsite.com/about.

Step 3: Organize Pages with Subfolders

You can also create pages within folders to keep things organized. Let’s make a “Books” section. Create a new folder named books inside your pages folder. Then, inside the books folder, create a file named index.astro.

Just like before, naming a file index inside a folder makes it the main page for that folder. So, the web address for this page will be yourwebsite.com/books, not yourwebsite.com/books/index.

Expert Note: If you wanted another page specifically for books, like “latest books”, you could create a file named latest.astro inside the books folder. Its address would then be yourwebsite.com/books/latest.

Step 4: Add Content to the Books Page

Copy the content from your homepage again and paste it into the books/index.astro file. Update the text to clearly indicate that this is the books page. Save the file.

Now, if you visit yourwebsite.com/books in your browser, you should see the content for your new books page.

Step 5: Add Navigation Links

Typing URLs can be a hassle. Let’s add some links so you can easily jump between pages. We’ll add a simple header with navigation links to each page.

Go back to your homepage file, index.astro. Right above the main heading (

), paste the following HTML code for a navigation header:

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/books">Books</a></li>
    </ul>
  </nav>
</header>

Save the index.astro file. Now, repeat this process for your about.astro and books/index.astro files. Paste the same header code into each of them, just above their main headings, and save each file.

Warning: While this method works for adding links, Astro offers a more efficient way using layouts, which we’ll cover in the next lesson. For now, this helps you see how navigation works.

Step 6: Test Your Navigation

Open your project in the browser. You should now see the navigation links at the top of each page. Click on “About” to go to the about page. Click on “Books” to see the books page. Click “Home” to return to the homepage. Everything should work smoothly!

You’ve now successfully created multiple pages and set up basic navigation in your Astro application. This file-based routing makes building websites with Astro straightforward and intuitive.

Source: Astro Crash Course #2 – Pages & Routes (YouTube)