Create your first Astro page
Now that you know that .astro files are responsible for pages on your website, it’s time to 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 .astro file
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 fileindex.astro -
In that same folder, create a new file named
about.astro. -
Copy, or retype the contents of
index.astrointo your newabout.astrofile. -
Add
/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.http://localhost:4321/about)
Right now, your “About” page should look exactly the same as the first page, but we’re going to change that!
Edit your page
Section titled Edit your pageEdit 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.
<body> <h1>My Astro Site</h1> <h1>About Me</h1> <h2>... and my new Astro site!</h2>
<p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
<p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p></body>Now, visit your /about page in your browser tab again, and you should see your updated content.
Add navigation links
Section titled Add navigation linksTo make it easier to preview all your pages, add HTML page navigation links before your <h1> at the top of both of your pages (index.astro and about.astro):
<a href="/">Home</a><a href="/about/">About</a>
<h1>About Me</h1><h2>... and my new Astro site!</h2>Check that you can click these links to move back and forth between pages on your site.
Try it yourself - Add a Blog page
Section titled Try it yourself - Add a Blog pageAdd 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
src/pages/blog.astro. - Copy the entire contents of
index.astroand paste them intoblog.astro. - Add a third navigation link to the top of every page:
<body> <a href="/">Home</a> <a href="/about/">About</a> <a href="/blog/">Blog</a>
<h1>My Astro Site</h1></body>You should now have a website with three pages that all link to each other. It’s time to add some content to the Blog page.
Update the page content at blog.astro with:
<body> <a href="/">Home</a> <a href="/about/">About</a> <a href="/blog/">Blog</a>
<h1>My Astro Site</h1> <h1>My Astro Learning Blog</h1> <p>This is where I will post about my journey learning Astro.</p></body>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 web
Section titled Publish your changes to the webIf 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
index.astro,about.astro, andblog.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.