2 • Add, style and link to pages on your site
Create your first Astro page
Now that you know that
.astro files are responsible for pages on your website, let’s create one!
Get ready to…
- Create two new pages on your website: About and Blog
- Add navigation links to your pages
- Deploy an updated version of your website to the web
Create a new Section titled Create a new .astro file
In the files pane of your code editor, navigate to the folder
src/pages/where you will see the existing file
In that same folder, create a new file named
Copy, or retype the contents of
index.astrointo your new
/aboutto the end of your website preview’s URL in the address bar and check that you can see a page load there. (e.g.
Right now, your “About” page should look exactly the same as the first page, but we’re going to change that!
Edit your pageSection titled Edit your page
Edit the HTML content to make this page about you.
To change or add more content to your About page, add more HTML element tags containing content. You can copy and paste the HTML code below between the existing
<body></body> tags, or create your own.
Now, visit your
/about page in your browser tab again, and you should see your updated content.
Add navigation linksSection titled Add navigation links
To make it easier to preview all your pages, add HTML page navigation links before your
<h1> at the top of both of your pages (
Check that you can click these links to move back and forth between pages on your site.
Try it yourself - Add a Blog pageSection titled Try it yourself - Add a Blog page
Add a third page
blog.astro to your site, following the same steps as above.
(Don’t forget to add a third navigation link to every page.)
Show me the steps.
- Create a new file at
- Copy the entire contents of
index.astroand paste them into
- Add a third navigation link to the top of every page:
You should now have a website with three pages that all link to each other. Let’s add some content to the Blog page.
Update the page content at
Preview your entire site by visiting all three pages in your browser preview and check that:
- Every page correctly links to all three pages
- Your two new pages each have their own descriptive heading
- Your two new pages each have their own paragraph text
Publish your changes to the webSection titled Publish your changes to the web
If you’ve followed our setup in Unit 1, you can publish your changes to your live website through Netlify.
When you are happy with the way your preview looks, commit your changes to your online repository at GitHub.
In VS Code, preview the files that have changed since your last commit to GitHub.
Go to the Source Control tab in the left menu. It should have a small “3” displayed.
You should see
blog.astrolisted as files that have changed.
Enter a commit message (e.g. “Added two new pages - about and blog”) in the text box, and press Ctrl + Enter (macOS: Cmd ⌘ + Enter) to commit the change to your current workspace.
Click the button to Sync Changes to GitHub.
After waiting a few minutes, visit your Netlify URL to verify that your changes are published live.