🧑‍🚀 Hello, Astronaut!

Small typography

Base typography (default)

Large typography

Extra large typography

2X large typography

Welcome to the official Astro blog starter template. This template serves as a lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with Astro.

This template comes with a few integrations already configured in your astro.config.mjs file. You can customize your setup with Astro Integrations to add tools like Tailwind, React, or Vue to your project.

Here are a few ideas on how to get started with the template:

Edit this page in src/pages/index.astro
Edit the site header items in src/components/Header.astro
Add your name to the footer in src/components/Footer.astro
Check out the included blog posts in src/content/blog/
Customize the blog post page layout in src/layouts/BlogPost.astro

Have fun! If you get stuck, remember to read the docs or join us on Discord to ask questions.

Looking for a blog template with a bit more personality? Check out astro-blog-template by Maxi Ferreira.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi cupiditate quisquam ea aliquam iure eaque accusamus doloribus ex fugit dolores optio eveniet neque at, laborum eum? Cumque, quaerat delectus! Eaque?

Lorem ipsum dolor sit amet

Heading 1 - Uses gray-900 in light mode, white in dark mode

Heading 2 - Uses gray-900 in light mode, white in dark mode

Heading 3 - Uses gray-900 in light mode, white in dark mode

Lead paragraph - Uses gray-600 in light mode, gray-400 in dark mode

Body text - Uses gray-700 in light mode, gray-300 in dark mode. Regular paragraph with styled link - gray-900/white

Bold text - Uses gray-900 in light mode, white in dark mode

Bullet point - Uses gray-300 in light mode, gray-600 in dark mode
Counter text - Uses gray-500 in light mode, gray-400 in dark mode

Numbered list item 1
Numbered list item 2

Quote text - gray-900/gray-100 with border gray-200/gray-700

Here's some inline code - gray-900/white


          Pre-formatted code block
// Uses gray-200/gray-300 text on gray-800/rgba background
function example() {
  return "Hello World";
}

Header 1	Header 2
Cell 1	Cell 2

Caption text - gray-500/gray-400

Press Ctrl+C to copy