ansango.dev

🌐 Personal Blog & Wiki

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 →

✨ Features

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

See full feature list →

🛠️ Tech Stack

Built with modern, production-ready technologies:

Core

• Astro - Static site generator
• Svelte 5 - Interactive components
• Tailwind CSS v4 - Styling system
• TypeScript - Type safety

Integrations

• Pagefind - Full-text search
• Last.fm API - Music integration
• Raindrop.io API - Bookmarks & reading list
• TanStack Query - Data fetching

Deployment

• Obsidian - Content writing
• GitHub Actions - CI/CD pipeline
• Cloudflare Pages - Hosting

See architecture details →

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, pnpm, or bun

Installation

# 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 dev

See installation guide →

✍️ Writing Content with Obsidian

This template is designed to work seamlessly with Obsidian:

1. Open as Vault: Open this repository in Obsidian
2. 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
3. Write Content: Create markdown files in `src/content/`
4. Auto-Deploy: Push to GitHub → Automatic conversion and deployment

Content Structure

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 →

📦 Available Commands

All commands run from the project root:

📚 Documentation

Complete documentation available in the `/docs` directory:

Getting Started

• Features - Full feature overview
• Architecture - System design and structure
• Installation - Setup and requirements

Development

• 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

Optimization & SEO

• SEO - Search engine optimization

• Search - Full-text search implementation

• RSS Feed - RSS configuration and usage

  Deployment

• Obsidian & Deployment - Obsidian workflow and GitHub Actions

• Deployment - Hosting on Cloudflare Pages, Vercel, Netlify

  Contributing

• Contributing - How to contribute to this project

🔧 Environment Variables

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=yoursite

Copy .env.sample to .env and add your credentials.

See configuration guide →

Performance

📄 License

MIT License - feel free to use this template for your own site!

🙏 Acknowledgments

Built with:

• Astro - Static site framework
• Svelte 5 - Interactive components
• Tailwind CSS v4 - Styling
• TanStack Query - Data fetching

Inspired by the IndieWeb movement.

🤝 Contributing

Contributions welcome! See Contributing Guide for details.

Made with ❤️ using Astro, Svelte 5, and Tailwind CSS v4