Create Static Pages in Astro Using File Based Routing
Astro uses file-based routing to generate routes within the project that you are working on. That means every folder and file you create under /pages will result in a route that reflects that file.
Here you can see how different pages will map to different routes in astro:
./src/pages/index.astro -> /
./src/pages/about.astro -> /about
./src/pages/index.astro -> /blog
./src/pages/hello.astro -> /blog/hello
Lazar Nikolov: [0:00] Similar to other frameworks, Astro uses file-based routing to generate the website's URL based on the file structure we defined in the source/pages directory. There are two types of routes in Astro, static routes and dynamic routes. In this lesson, we'll only cover the static routes. We'll cover dynamic routes later in the ninth lesson.
[0:23] We already have our index page, which is defined in the source/pages/index.astro file. When we visited the localhost on the Port 4321, this page get mapped to the /URL and we saw the index page. Let's add a new page next to the index and name it about.astro.
[0:44] To make it simple, we'll just add an H1 tag with some text inside. This page will get mapped to /about. Let's visit localhost on 4321/about. We can see the "Hello, Friends" text. Folders also play a role in routing.
[1:04] Let's create a folder named blog into the pages directory. Then inside, create a hello.astro page. Again, we'll just create a simple H1 tag with "Hello Blog" inside. If we navigate to /blog/hello, we're going to see "Hello Blog" appear on the screen.
[1:26] What if there was an index.astro file inside of the blog directory? You probably guessed it. It's going to get mapped to /blog. Basically, source/pages is the route .astro from the file gets removed and index gets mapped to just /. That's the gist.
[1:45] Let's add some content to the About page. I'm going to remove the H1 and replace it with a paragraph element. Let's not worry about the styling for now. Take your time and add a few sentences that introduce you to your visitors. That's how we can create pages in Astro.
[2:03] Let's do a quick recap. Astro uses file-based routing, which means the URLs of our website will mirror the file structure we have within the source/pages directory.
[2:15] In this lesson, we covered static routes. The index page gets mapped to the /URL. A page with a file named about.astro will get mapped to /about. Folders also contribute to the URL. Source/pages/blog/hello.astro will be mapped to /blog/hello.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!