Welcome to my Website!

This is my first website entry using the combo of:

• 🚀 Astro
• 🎨 UnoCSS
• 📝 MDX

Why Astro, UnoCSS and MDX?

The performance is incredible, and I can now add interactive components right in my markdown!

• Astro ships less JS by default
• MDX lets you mix Markdown + components
• UnoCSS gives fast utility styling with minimal config

Code Example

Here’s some JavaScript:

function greet(name) {
  console.log(`Hello, ${name}!`)
  return `Welcome to my blog!`
}

greet('World')

Quality of life

Using mdx files, I can easily create new blog posts or projetcs without touching a single line of HTML or CSS. All I do is writing text into a file and add some formatting, like you would do on a reddit post. With Visual Studio Code, I even get proper syntax highlighting, spell check and Templates.

Awesome right?

How to install Astro

First, we’ll set up the core structure:

# Create Astro project
npm create astro@latest ProjectName

cd ProjectName
npm install -D unocss @unocss/astro @unocss/reset
npx astro add mdx
npm install

npm run dev

And done! You now have your base structure set up. Now all that’s left, is setting up your Website.