A modern, content-first personal website built with Astro, designed for technology articles, wikis, projects, and indie web principles. Write in Obsidian, publish with ease.
See live demo → | GitHub Template Repository →
Modern template for bloggers, developers, and indie web enthusiasts with:
- 📝 Content Collections: Blog, Wiki, Projects, and standalone pages
- 🔍 Full-text Search: Powered by Pagefind with keyboard shortcuts
- 🎵 Live Integrations: Last.fm music and Raindrop.io bookmarks
- 🌓 Dark Mode: Theme switching with persistent preference
- 📄 SEO Optimized: Complete meta tags, structured data, and sitemap
- ✍️ Obsidian Integration: Write in Obsidian, deploy automatically
- ⚡ Fast Performance: Static generation with Lighthouse 95+ scores
Built with modern, production-ready technologies:
- Astro - Static site generator
- Svelte 5 - Interactive components
- Tailwind CSS v4 - Styling system
- TypeScript - Type safety
- Pagefind - Full-text search
- Last.fm API - Music integration
- Raindrop.io API - Bookmarks & reading list
- TanStack Query - Data fetching
- Obsidian - Content writing
- GitHub Actions - CI/CD pipeline
- Cloudflare Pages - Hosting
- Node.js 18+
- npm, pnpm, or bun
# Clone repository
git clone https://github.com/ansango/ansango.dev.git
cd ansango.dev
# Install dependencies
npm install
# Configure environment (optional),
# Edit .env with your API keys for integrations
cp .env.sample .env
# Start development server and http://localhost:4321 🎉
npm run devThis template is designed to work seamlessly with Obsidian:
- Open as Vault: Open this repository in Obsidian
- Install Plugins: Enable recommended community plugins:
- `obsidian-git` - Auto-commit and sync
- `obsidian-linter` - Auto-format frontmatter
- `obsidian-local-images-plus` - Optimize images to WebP
- Write Content: Create markdown files in `src/content/`
- Auto-Deploy: Push to GitHub → Automatic conversion and deployment
src/content/
├── blog/ # Blog posts
├── wiki/ # Hierarchical knowledge base
├── projects/ # Portfolio items
├── about.md # About page
├── uses.md # Tools & setup
└── now.md # Current activities
See Obsidian integration → | Content management →
All commands run from the project root:
| Command | Action |
|---|---|
| `npm install` | Install dependencies |
| `npm run dev` | Start dev server at `localhost:4321` |
| `npm run build` | Build production site to `./dist/` |
| `npm run preview` | Preview production build locally |
| `npm run format` | Format code with Prettier |
| `npm run astro` | Run Astro CLI commands |
Complete documentation available in the `/docs` directory:
- Features - Full feature overview
- Architecture - System design and structure
- Installation - Setup and requirements
- Content Management - Writing and organizing content
- Styling - Theme customization and CSS
- Integrations - Third-party services (Last.fm, Raindrop, etc.)
- Project Structure - File organization
- Configuration - Site configuration options
- SEO - Search engine optimization
- Search - Full-text search implementation
- RSS Feed - RSS configuration and usage
- Obsidian & Deployment - Obsidian workflow and GitHub Actions
- Deployment - Hosting on Cloudflare Pages, Vercel, Netlify
- Contributing - How to contribute to this project
Optional API integrations require environment variables:
## Raindrop.io (for bookmarks and reading)
RAINDROP_ACCESS_TOKEN=your_token
## Last.fm (for music integration)
PUBLIC_LASTFM_API_KEY=your_key
LASTFM_SHARED_SECRET=your_secret
## GoatCounter (optional analytics)
PUBLIC_GOATCOUNTER_CODE=yoursiteCopy .env.sample to .env and add your credentials.
MIT License - feel free to use this template for your own site!
Built with:
- Astro - Static site framework
- Svelte 5 - Interactive components
- Tailwind CSS v4 - Styling
- TanStack Query - Data fetching
Inspired by the IndieWeb movement.
Contributions welcome! See Contributing Guide for details.
Made with ❤️ using Astro, Svelte 5, and Tailwind CSS v4