Skip to Content
  • Astro
  • Docs

  • Start Here

    • Getting Started
    • Installation
    • Editor Setup
    • Migration Guide

  • Tutorials

    • Build a Blog

  • Core Concepts

    • Why Astro
    • MPA vs. SPA
    • Astro Islands

  • Basics

    • Project Structure
    • Astro Components
    • Pages
    • Layouts
    • Markdown & MDX
    • Routing
    • Imports
    • Endpoints
    • Data Fetching
    • Deploy
    • Troubleshooting

  • Guides

    • Integrations
    • UI Frameworks
    • Server-side Rendering (SSR)
    • CSS & Styling
    • Authoring Content
    • Images
    • Fonts
    • Sharing State
    • RSS
    • Testing

  • Configuration

    • The Astro Config File
    • TypeScript
    • Import Aliases
    • Environment Variables

  • Reference

    • Configuration
    • CLI
    • Runtime API
    • Integrations API
    • Adapter API
    • Template Directives
    • NPM Package Format

  • Community

    • Join us on Discord
    • Read our blog posts
    • Our Open Collective
    • Astro Docs on GitHub

  • Sponsored by

Tutorial Tracker

  • Unit 0 (0/2 Complete) 0
  • Unit 1 (0/6 Complete) 1
  • Unit 2 (0/6 Complete) 2
  • Unit 3 (0/5 Complete) 3
  • Unit 4 (0/4 Complete) 4
  • Unit 5 (0/5 Complete) 5
  • Unit 6 (0/4 Complete) 6

Welcome, world!

  1. To-do 0. Build your first Astro Blog
  2. To-do 1. About this Tutorial

Create and deploy your first Astro site

  1. To-do 0. Check in: Unit 1 - Setup
  2. To-do 1. Prepare your dev environment
  3. To-do 2. Create your first Astro project
  4. To-do 3. Write your first line of Astro
  5. To-do 4. Store your repository online
  6. To-do 5. Deploy your site to the web

Add, style and link to pages on your site

  1. To-do 0. Check in: Unit 2 - Pages
  2. To-do 1. Create your first Astro page
  3. To-do 2. Write your first Markdown blog post
  4. To-do 3. Add dynamic HTML content about you
  5. To-do 4. Style your About page
  6. To-do 5. Add global styles to your site

Build and design with Astro UI components

  1. To-do 0. Check in: Unit 3 - Components
  2. To-do 1. Refactor page links into a Navigation component
  3. To-do 2. Create a Footer with styled social media links
  4. To-do 3. Build it yourself - Header
  5. To-do 4. Send your first JavaScript to the browser

Save time and energy with reusable page layouts

  1. To-do 0. Check in: Unit 4 - Layouts
  2. To-do 1. Build your first layout
  3. To-do 2. Create and pass data to a custom blog layout
  4. To-do 3. Combine layouts to get the best of both worlds

Beef up your blog

  1. To-do 0. Check in: Unit 5 - Astro API
  2. To-do 1. Create a blog post archive
  3. To-do 2. Generate tag pages
  4. To-do 3. Build a tag index page
  5. To-do 4. Add an RSS feed

Set sail for Astro islands

  1. To-do 0. Check in: Unit 6 - Astro Islands
  2. To-do 1. Build your first Astro island
  3. To-do 2. Back on dry land. Take your blog from day to night, no island required!
  4. To-do 3. Congratulations!
    • Next Steps

Tutorial Tracker

  • Unit 0 (0/2 Complete) 0
  • Unit 1 (0/6 Complete) 1
  • Unit 2 (0/6 Complete) 2
  • Unit 3 (0/5 Complete) 3
  • Unit 4 (0/4 Complete) 4
  • Unit 5 (0/5 Complete) 5
  • Unit 6 (0/4 Complete) 6

Welcome, world!

  1. To-do 0. Build your first Astro Blog
  2. To-do 1. About this Tutorial

Create and deploy your first Astro site

  1. To-do 0. Check in: Unit 1 - Setup
  2. To-do 1. Prepare your dev environment
  3. To-do 2. Create your first Astro project
  4. To-do 3. Write your first line of Astro
  5. To-do 4. Store your repository online
  6. To-do 5. Deploy your site to the web

Add, style and link to pages on your site

  1. To-do 0. Check in: Unit 2 - Pages
  2. To-do 1. Create your first Astro page
  3. To-do 2. Write your first Markdown blog post
  4. To-do 3. Add dynamic HTML content about you
  5. To-do 4. Style your About page
  6. To-do 5. Add global styles to your site

Build and design with Astro UI components

  1. To-do 0. Check in: Unit 3 - Components
  2. To-do 1. Refactor page links into a Navigation component
  3. To-do 2. Create a Footer with styled social media links
  4. To-do 3. Build it yourself - Header
  5. To-do 4. Send your first JavaScript to the browser

Save time and energy with reusable page layouts

  1. To-do 0. Check in: Unit 4 - Layouts
  2. To-do 1. Build your first layout
  3. To-do 2. Create and pass data to a custom blog layout
  4. To-do 3. Combine layouts to get the best of both worlds

Beef up your blog

  1. To-do 0. Check in: Unit 5 - Astro API
  2. To-do 1. Create a blog post archive
  3. To-do 2. Generate tag pages
  4. To-do 3. Build a tag index page
  5. To-do 4. Add an RSS feed

Set sail for Astro islands

  1. To-do 0. Check in: Unit 6 - Astro Islands
  2. To-do 1. Build your first Astro island
  3. To-do 2. Back on dry land. Take your blog from day to night, no island required!
  4. To-do 3. Congratulations!
    • Next Steps

6 • Set sail for Astro islands

Congratulations!

Now you have your very own Astro blog!

Next Steps

Section titled Next Steps

Start a new Astro project

Join us on Discord

  • Privacy Policy