Kanade Astro

Kanade Astro is a static blog template built on Astro with Vue as its primary language component, published by the repository owner sudoriaa and demonstrated at a live GitHub Pages site. It takes Markdown blog posts as input and outputs a pre-rendered static site with a pastel, journal-style homepage, a post archive with category filtering, and an interactive search overlay.

What is Kanade Astro?

Kanade Astro is a personal blog theme in which posts are written in Markdown and compiled into a static Astro site; Vue supplies the interactive pieces, notably the search UI. The demo homepage shows a hero greeting, a "recent words" list, and a "latest posts" grid carrying a total post count alongside category tabs for all posts, frontend development, development notes, and life essays. The repository has modest traction at 16 stars on GitHub.

Key Features

• Astro static output — Posts render to pre-built HTML rather than shipping a full JavaScript application, matching the template's own post on Astro's islands architecture.
• Vue-powered search — A keyboard-driven search overlay opens with Ctrl/Cmd K and closes with Escape, filtering posts from the frontend.
• Category and tag filtering — Archive links filter by category (frontend, notes, life) and by individual tags such as Astro, Vue, CSS, TypeScript, and design.
• Markdown posts with metadata — Each entry shows category, date, reading time (2–3 minutes in the sample posts), tags, and an optional pinned flag.
• Light and dark modes — Per the discovery description, the theme ships both color schemes.
• Hero image — A single og:image asset (images/hero.webp) anchors the homepage visual.
• Colorful guestbook — The source hints describe a sticky-note style guestbook for visitor messages.

Who is it for?

• Frontend developers who write: the template's demo posts cover Astro islands, Vue composables, and CSS details, so it suits developer-bloggers documenting technique notes.
• Personal bloggers wanting a soft aesthetic: the pastel palette, rounded cards, and journal page markers fit diary-style writing.
• Static-site minimalist: anyone already comfortable writing Markdown and deploying to GitHub Pages can publish without a database.

Use cases

• Developer journal: publish how-to posts on Astro and Vue while relying on the built-in tag archive to group topics.
• Life and diary blog: use the life-essay category for non-technical writing that sits beside the technical archive.
• Portfolio-adjacent site: the hero section doubles as a short personal introduction linking to recent writing.

How does it work?

Write a Markdown post with frontmatter (category, date, tags, reading time), and Astro generates the page at build time. The search overlay is hydrated as a Vue island, so only the search interface runs client-side JavaScript while the rest of the page stays static.

Alternatives

• Astro Paper (an Astro blog theme oriented toward developer writing)
• Hugo (a static site generator with built-in blog themes)