Give your pages an elegant touch with Astro Vitesse

Everything you need to create a stunning website. Fast, affordable and easy to use.

It’s inspired by antfu.me
Developed with Astro
Based on Starlight

Set up Astro Vitesse#

To follow this guide, you’ll need an existing Astro project.

Add the Astro Vitesse integration#

Astro Vitesse is an Astro integration. Add it to your site by running the astro add command in your project’s root directory:

npx astro add astro-vitesse

This will install the required dependencies and add Astro Vitesse to the integrations array in your Astro config file.

Configure the integration#

The Astro Vitesse integration is configured in your astro.config.mjs file.

Add a title to get started:

import { defineConfig } from 'astro'
import vitesse from 'astro-vitesse'

export default defineConfig({
  integrations: [
    vitesse({
      title: 'My Site',
    })
  ]
})

Configure UnoCSS#

Astro Vitesse uses UnoCSS for styling. To configure UnoCSS, create a unocss.config.ts file in your project’s root directory:

import { defineConfig } from 'astro-vitesse/theme'

export default defineConfig({})

Configure content collections#

Astro Vitesse is built on top of Astro’s content collections, which are configured in the src/content/config.ts file.

Create or update the content config file, adding a pages collection that uses Astro Vitesse’s pagesSchema:

import { defineCollection } from 'astro:content'
import { pagesSchema } from 'astro-vitesse/schema'

export const collections = {
  pages: defineCollection({ schema: pagesSchema() }),
}

Add content#

Astro Vitesse is now configured and it’s time to add some content!

Create a src/content/pages/ directory and start by adding an index.md file. This will be the homepage of your new site:

---
title: Welcome to Astro Vitesse
description: 'Give your pages an elegant touch with Astro Vitesse'
---

Welcome to my website!

Astro Vitesse uses file-based routing, which means every Markdown, MDX, or Markdoc file in src/content/pages/ will turn into a page on your site. Frontmatter metadata (the title and description fields in the example above) can change how each page is displayed.

Start the development server#

When working locally, Astro’s development server lets you preview your work and automatically refreshes your browser when you make changes.

Inside your project directory, run the following command to start the development server:

npm run dev

Find me on

GitHub Mastodon Twitter

If you enjoy my work and find them useful, consider sponsor me to help Open Source sustainable. Thank you!

Sponsor to support Adrián Sponsor to support Anthony