Building My Digital Garden with Astro.js
How I set up my personal website and digital garden using Astro.js for a fast, content-focused experience
I recently decided to build a digital garden—a place where I can share my thoughts, notes, and ideas in a more organic way than a traditional blog. Here’s how I built it using Astro.js.
Why Astro.js?
Astro is a modern static site generator that’s perfect for content-focused websites. Here’s why I chose it:
- Performance First: Astro ships zero JavaScript by default, making pages incredibly fast
- Content Collections: Built-in support for organizing and managing content
- Markdown Support: Write content in Markdown with frontmatter
- Great DX: TypeScript support and a fantastic developer experience
The Structure
My site has four main sections:
- Homepage: Shows recent notes and blog posts
- About: Information about me and the site
- Digital Garden: Evolving notes and thoughts
- Blog: More polished, traditional articles (like this one!)
Design Philosophy
I wanted something clean and minimal, inspired by tools like Notion and Claude. The design focuses on:
- Readability with comfortable line lengths and spacing
- A clean color palette that works in light and dark modes
- Card-based layouts for browsing content
- Clear typography hierarchy
What’s Next?
Some features I’m planning to add:
- Search functionality
- Tag filtering
- RSS feeds
- Related notes/posts suggestions
- Reading time estimates
Stay tuned as this garden grows!