Koibumi Astro Blog

A beautiful, lightweight, and performant blog template built with Astro. Features comic-style typography, dark mode support, and achieves 98+ Lighthouse scores while keeping the entire site under 512KB gzipped.

Demo • Documentation • Submit Your Site

✨ Features

• 🎨 Beautiful Design - Comic-style fonts (Comic Neue + Klee One), card-based layout
• 🌓 Dark Mode - Full dark mode support with theme toggle
• ⚡ High Performance - 98+ Lighthouse score, minimal JavaScript, <512KB gzipped
• 🏷️ Tag System - Organize posts with comprehensive tagging
• 📝 Rich Content - MDX, KaTeX math, syntax highlighting with Expressive Code
• 📱 Responsive - Mobile-first design with elegant grid layouts
• 🔍 SEO Ready - Auto-generated sitemap and RSS feed
• 🎯 TypeScript - Full type safety throughout

🚀 Quick Start

Use This Template

1. Click the "Use this template" button at the top of this repository
2. Create your new repository
3. Clone your repository:

git clone https://github.com/your-username/your-blog-name.git
cd your-blog-name

Install and Run

# Install dependencies (requires pnpm)
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Configure Your Site

Edit content/site.json:

{
  "title": "Your Blog Title",
  "description": "Your Blog Description",
  "favicon": "/favicon.svg",
  "bio": "Your bio or motto",
  "copyright_name": "Your Name"
}

Update astro.config.mjs with your site URL:

export default defineConfig({
  site: 'https://yourdomain.com',
  // ...
});

Write Your First Post

Create a new markdown file in content/blog/:

---
title: 'My First Post'
description: 'This is my first blog post'
pubDate: 'Nov 1 2025'
tags: ['blog', 'first-post']
---

Your content here...

🛠️ Tech Stack

• Framework: Astro - Static site generator
• Styling: SCSS with modular architecture
• Interactive Components: Svelte (minimal usage)
• Code Highlighting: Expressive Code
• Typography: Comic Neue (English) + Klee One (Japanese)
• Icons: Iconify
• Math: KaTeX
• Type Safety: TypeScript
• Package Manager: pnpm

📖 Documentation

For detailed documentation including:

• Complete feature overview
• Customization guide
• Component documentation
• Styling and theming
• Performance optimization tips

Visit the full documentation on our demo site.

🌟 Showcase

Using this template? We'd love to see your site! Check out the community showcase and submit your own via pull request.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.