Vitesse theme for Astro

Vitesse theme for Astro is a minimal, SEO-friendly portfolio and blog theme built on Astro that supports Vue single-file components and UnoCSS styling, and ships with a one-click Netlify deployment flow.

What is Vitesse theme for Astro?

Vitesse theme for Astro is an open-source starter template created by Kieran Wang that builds static portfolio and blog sites with Astro. It takes Markdown and MDX content plus Vue single-file components as input and generates a fully static site complete with an auto-generated sitemap and RSS feed. The template runs on Astro and is distributed on GitHub under the MIT License.

Key Features

• 100 / 100 Lighthouse performance — the template reports perfect Lighthouse scores in every category, so a deployed site is optimized out of the box.
• Markdown and MDX support — write posts and pages as plain Markdown files, or use MDX to embed Vue components directly inside your content.
• Vue SFC component support — include Vue single-file components anywhere in your Markdown, enabling interactive sections without leaving Astro's islands architecture.
• Auto-generated sitemap and RSS feed — the template produces a sitemap.xml and an XML RSS feed from your content collection, with no extra configuration.
• Light / Dark theme toggle — a built-in theme switcher gives visitors light and dark appearances.
• UnoCSS styling — instead of Tailwind, this theme uses UnoCSS for on-demand, fast utility-based styling.
• VueUse and Lodash included — the template bundles VueUse composables and Lodash utilities for common JavaScript workflows.
• Responsive and SEO-friendly — the layout adapts to mobile screens and includes meta tags and semantic HTML for search engines.

Who is it for?

• Vue developers who want a blog or portfolio without writing their own Astro setup will find a ready-made project with Vue SFC support already configured.
• Technical writers who prefer writing in Markdown or MDX can publish posts locally or deploy to Netlify with the provided one-click button.
• Freelancers and designers who need a clean, minimal personal site can swap the sample content and rely on the automatic sitemap and RSS output.
• Performance-focused site owners benefit from the guaranteed 100 / 100 Lighthouse score without manually tuning every asset.

What can you do with Vitesse theme for Astro?

• Deploy a portfolio site in minutes — click the "Deploy to Netlify" button on the GitHub repository to create a new repo and have it live on Netlify immediately.
• Write a blog with MDX — author content in Markdown or MDX and embed Vue components like a custom interactive chart directly in a post.
• Host a personal site with RSS — the generated RSS feed lets readers subscribe to your posts through their favorite feed reader.

How does Vitesse theme for Astro work?

You can start from the GitHub template by clicking "Use this template" or press the Netlify deploy button to clone and publish in one step. For local development, install dependencies with npm install, then run npm run dev to open the dev server at http://localhost:1977. To publish, run npm run build and the static output lands in the dist folder; npm run preview shows you the final build locally. The project requires Node.js version 18 or higher. If you prefer pnpm or yarn, the README explains the small package.json edits needed for either package manager.

FAQ

Is Vitesse theme for Astro free?

Yes, the template is open source and released under the MIT License, so you can use it for personal and commercial projects alike.

Do I need Node.js to run it?

Yes, Node.js version 18 or higher is required for local development. The build scripts expect a modern Node runtime.

Can I use pnpm or yarn instead of npm?

Yes, the README documents exact steps to switch. You need to remove the preinstall script if present, and change the simple-git-hooks and lint-staged commands to use pnpm or yarn.

Does the theme generate an RSS feed?

Yes, the template automatically generates an XML RSS feed from your content collection alongside a sitemap, so subscribers can follow new posts.

Can I use Vue components in my Markdown?

Yes, the theme supports MDX, which lets you import and use Vue single-file components anywhere in your Markdown content.

License

Vitesse theme for Astro is released under the MIT License, copyright 2024 Kieran Wang.