astro-theme-reimu

astro-theme-reimu is an Astro blog theme themed after Touhou Project's Hakurei Reimu, providing a complete blogging platform with four-language i18n, seven comment systems, and a set of built-in MDX components.

What is astro-theme-reimu?

astro-theme-reimu is an open-source (MIT-licensed) blog theme built on the Astro framework, created by D-Sketon as a port of their hexo-theme-reimu. It takes Markdown or MDX posts stored in src/content/blog as input and outputs a static blog with pages for archives, categories, tags, about, and RSS. The theme uses TypeScript for configuration (src/config.ts) and supports deployment to GitHub Pages, Vercel, or Netlify. It includes both Astro and React components under src/components.

Key Features

• Full blog functionality — Includes standard blog pages: home, archives, categories, tags, about, and an RSS feed generated via rss.xml.js.
• i18n support — Ships with language files for English, Simplified Chinese, Traditional Chinese, and Japanese, switchable via a language setting.
• Code highlighting with Expressive Code — Syntax highlighting with line numbers, code folding via collapse markers, and copy buttons.
• Math and diagrams — KaTeX for LaTeX math (inline and block) and Mermaid for flowcharts, both built into Markdown rendering.
• Local search — Fuse.js-based local search that indexes blog content without a server.
• Seven comment systems — Supports Valine, Waline, Twikoo, Gitalk, Giscus, Disqus, and Utterances, each configured in config.ts.
• Analytics and statistics — Integrates Baidu Analytics, Google Analytics, and Microsoft Clarity; reading counts via Waline/Valine and visitor counts via busuanzi.
• Built-in MDX components — Includes Link cards, FriendCard, HeatMapCard, TagRoulette, Tabs, Details, Grid, Gallery with lightbox, and AlertBlockquote (info/warning/danger/tip/important).
• Customization options — Configurable sidebar widgets, menu navigation, responsive banner with srcset, random post covers, share buttons for Weibo/QQ/WeChat, sponsor QR codes, and a firework mouse effect.

Who is it for?

• Anime and gaming bloggers who want a Touhou-themed aesthetic with Reimu visuals and character styling.
• Developers familiar with Astro who need a feature-complete blog without writing components from scratch; all theme options live in one config.ts file.
• Writers who use Markdown/MDX and need math formulas, diagrams, code blocks with folding, and rich content blocks like tabs and galleries.
• Multilingual content creators who want to publish in English, Chinese, Traditional Chinese, or Japanese using the built-in i18n system.

What can you do with it?

• Touhou fans: launch a personal blog with Reimu-style design, preloader text, and Touhou-themed covers.
• Technical writers: write posts with KaTeX formulas, Mermaid diagrams, and collapsible code blocks, then publish to GitHub Pages or Netlify.
• Site maintainers: choose from seven comment systems and three analytics providers to engage readers and track traffic.
• Content curators: use the built-in Gallery, Link cards, and FriendCard components to create rich MDX pages beyond plain posts.

How does astro-theme-reimu work?

Installation is clone-based: run git clone, then use pnpm install, pnpm dev for development, and pnpm build to generate a static dist/ folder. Content is written as Markdown or MDX files in src/content/blog with a defined Front Matter schema (title, description, pubDate, tags, categories, cover, and more). All site settings—from site metadata to comment system credentials—are edited in src/config.ts, and deployment is handled by connecting the repo to GitHub Pages, Vercel, or Netlify.

FAQ

Is astro-theme-reimu free?

Yes. The theme is released under the MIT License, so it is free to use, modify, and redistribute.

Which comment systems does it support?

It supports seven: Valine, Waline, Twikoo, Gitalk, Giscus, Disqus, and Utterances. Each has its own configuration block in src/config.ts.

Does the theme support dark mode?

Yes, dark mode is a built-in feature alongside responsive layout and image lazy loading.

Can I add a new language?

Yes. Language files live in src/languages (currently en.ts, zh-cn.ts, zh-tw.ts, ja.ts). You can create a new .ts file following the existing structure and set it in the site config.

How do I deploy the theme?

Build with pnpm run build and deploy the dist/ directory to GitHub Pages, or connect the repository to Vercel or Netlify, which auto-detect Astro projects.