Free Astro tutorials for complete beginners.

Beginner's Guide to Astro

Your first Astro site, by hand

The free way: seven lessons where you type every line yourself, so you understand how it all works. No sign-up. About 135 minutes in total, and you finish with a real website online. New to all of this? Read Start from zero first.

Start lesson 1

No computer set up yet? Lessons 3 to 6 each have a playground. Try them in your browser, with nothing to install.

Rather have Claude build it for you? Build your website with Claude, our main course.

Track your progress

  1. Lesson 1 Your toolkit
  2. Lesson 2 Create your project
  3. Lesson 3 Make your first pages
  4. Lesson 4 Share a layout
  5. Lesson 5 Write in Markdown
  6. Lesson 6 Make it look good
  7. Lesson 7 Go live

Finish a lesson and its star lights up. 7 to go.

What you'll need

  • An AI helper Claude Code is our pick. Optional.
  • Node.js The engine that runs Astro
  • VS Code Where you edit your files
  • GitHub Keeps a safe copy
  • A host Spacefast or Cloudflare are our picks

All free, except the AI helper, which has free options. Lesson 1 sets each one up.

How it all fits together

  1. You + AIwrite the files
  2. Your computerbuilds the site
  3. GitHubkeeps a copy
  4. Your hostputs it online
  5. The worldsees your site

  1. Your toolkit: the five things you need

    One checklist of the five tools every Astro site uses, a plain picture of how they fit together, and the steps to set each one up. No experience needed.

    25 minutes

  2. Create your project

    Type one line and Astro makes your whole project for you. Then see your new site in your browser.

    15 minutes

  3. Make your first pages

    Change your home page, add your name, and make a second page by creating one file.

    15 minutesTry it in your browser

  4. Share a layout across pages

    Write your menu and page frame once, then use them on every page. This is the trick that makes big sites easy.

    20 minutesTry it in your browser

  5. Write blog posts in Markdown

    Set things up once, and from then on a new blog post is just a new text file. Astro makes the pages for you.

    25 minutesTry it in your browser

  6. Make it look good

    Add one small file of styles so your text is easy to read on any screen. Then pick your own colours.

    15 minutesTry it in your browser

  7. Put your site online

    Make the finished copy of your site, then put it on the internet for free. At the end, you'll have an address you can send to anyone.

    20 minutes

Try "blog", "deploy" or "EmDash".