Build your first Astro Blog

See guided examples of adding features to your Astro project.

Now, visit your /about

In this tutorial, you’ll learn Astro’s key features by building a fully-functioning blog, from zero to full launch! 🚀

Along the way, you’ll:

  • Query and work with local files
  • Add interactivity to your site
  • Deploy your site to the web

Want a preview of what you’re going to build? You can view the final project on GitHub or StackBlitz.

Unit 1 is things I already know how to do. Can I skip it?

You can use the lessons inside Unit 1 to make sure you have the development tools and online accounts you’ll need to complete the tutorial. It will walk you through creating a new Astro project, storing it on GitHub, and deploying it to Netlify.

If you create a new, empty Astro project and are comfortable with your setup, you can safely skip ahead to Unit 2 where you will start making new pages in your project.

Get ready to…

  • Install any tools that you will use to build your Astro website

Which of the following is…

  1. A code editor, for making changes to your files and their content?

  2. An online version control provider for your repository?

  3. An application for running commands?

Try it yourself - Add a Blog page

Section 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.
  1. Create a new file at src/pages/blog.astro.
  2. Copy the entire contents of index.astro and paste them into blog.astro.
  3. Add a third navigation link to the top of every page:
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<h1>My Astro Site</h1>