Shirone

Shirone is an anime-inspired static personal blog theme for Astro 7 that turns Markdown and MDX files into a static dist/ site styled by a token-driven Material 3 Expressive component system built with Svelte 5, Tailwind CSS 4, and Stylus. It is maintained by LyraVoid, began as a refactor of the Fuwari theme by saicaca, and is released under the MIT License.

What is Shirone?

Shirone is a blog theme rather than a full CMS: you write posts in Markdown or MDX under src/content/posts/, adjust typed configuration files in src/config/, and the Astro build renders server-side HTML plus a Pagefind search index into a static dist/ directory. The theme is distributed two ways — as theme source you clone from GitHub, and as the shirones npm package that scaffolds a blog from an empty folder with npx shirones init. Its visual layer follows the Material 3 and Material 3 Expressive specifications, with dynamic HCT color palettes and a documented design-token standard.

What makes Shirone stand out?

• Material 3 Expressive theming — dynamic HCT color palettes per the M3 and M3 Expressive specs, light and dark modes, banner or solid backgrounds, optional textures, and visitor-side display preferences.
• Astro 7, Svelte 5, Tailwind CSS 4, Stylus — static output with content rendered server-side; Swup provides in-site navigation with a persistent application shell, route progress, and reduced-motion support.
• Writing pipeline — Markdown and MDX with math, Mermaid diagrams, admonitions, enhanced code blocks, and image galleries; frontmatter supports updated, pinned, comment, lang, encrypted, password, passwordHint, and hideHomeContent.
• Search and feeds — Pagefind full-text search built at build time, plus RSS and sitemap output.
• Dedicated content pages — archives, categories, tags, friends, moments, anime, albums, projects, skills, devices, games, series, and timelines, alongside articles with table of contents, related posts, and sharing.
• Optional integrations — Twikoo or Giscus comments, music from local, custom, Meting, or mixed sources, and anime data from local, Bangumi, or Bilibili snapshots; disabled features add no external requests, DOM, layout shift, or main-bundle code.
• Ten built-in interface locales and configurable single or dual sidebars with widgets and page filters.
• Agent skills — .agents/skills/ guides AI coding assistants such as Claude Code, Codex, and ZCode through theme development, post writing, and site configuration.

Who should use Shirone?

• Long-form writers: publish essays and serialized posts as Markdown or MDX, with per-post encryption, password hints, drafts, pinned posts, and related-post lists.
• Personal-site collectors: maintain moments, albums, anime lists, friends, projects, skills, devices, games, series, and timeline pages from src/data/ and src/content/.
• Developers who dislike theme maintenance: install the shirones npm package so the blog stays one small repository and theme updates arrive with pnpm add shirones@latest.
• Self-hosters: build the static dist/ folder and deploy it to Vercel, Netlify, GitHub Pages, or any static host, configuring the site and base values in src/config/siteConfig.ts.

How does Shirone work?

Clone the repository (or run npx shirones init in an empty folder), enable Corepack, install dependencies with pnpm, and start the dev server on localhost:4321. Site identity, profile, navigation, sidebar, post list, article, comment, music, and anime settings live in separate files under src/config/. Create posts with pnpm new-post <filename>, then run pnpm build to produce the static site and Pagefind index in dist/.

Pricing

Shirone is free and open source under the MIT License; the repository retains the original copyright notice required by that license.

Alternatives

Fuwari, the Astro blog theme by saicaca that Shirone was refactored from and whose original foundation is credited in Shirone's acknowledgements.

FAQ

Is Shirone free to use?

Yes. Shirone is released under the MIT License, so you can use, modify, and redistribute the theme, including commercially, as long as you keep the original copyright notice the license requires. There is no paid tier or hosted plan; you supply your own hosting.

What are Shirone's system requirements?

Shirone needs Node.js 22.12 or newer and pnpm 9.x, with the repository pinning pnpm 9.14.4. On Windows PowerShell installations where script execution is restricted, the documentation recommends calling pnpm.cmd and npx.cmd instead of the plain commands.

Does Shirone support comments and music?

Both are optional integrations configured in src/config/commentConfig.ts and src/config/musicConfig.ts. Comments can run through Twikoo or Giscus, and music can come from local files, a custom source, Meting, or a mixed setup. When disabled, these features add no external requests or main-bundle code.

Can I keep my content in a separate repository?

Yes. The official Shirone-Content repository provides a content template for posts, moments, data, media, and config/*.yaml overlays that you fork or clone, normally as a private repo, then point the theme repository at it.

What output does Shirone produce?

Shirone builds a fully static dist/ directory containing server-rendered HTML, the Pagefind full-text search index, RSS, and a sitemap, which can be deployed to Vercel, Netlify, GitHub Pages, or any static host, including sites served from a subpath.