Sumi

Sumi is an open-source Astro 7 blog theme for static sites that pairs a dual light/dark ink-and-washi-paper design with a WebGL fluid simulation on the front page and zero client JavaScript on article pages. Built by GitHub user kpab under the MIT license, it takes Markdown or MDX posts from src/content/blog/ and produces a static blog with article, tag, pagination, RSS, sitemap and social image pages.

What is Sumi?

Sumi is a blog template built on Astro 7, oriented around typography and negative space in an ink-and-washi-paper visual style. You write posts as Markdown or MDX files whose filename becomes the URL; the theme generates a homepage hero, blog listing with pagination, tag archives, per-post Open Graph images, an RSS feed, robots.txt and llms.txt. Article pages ship no external JavaScript and the site builds to static files, so it can be deployed to Cloudflare Pages, Netlify, Vercel or any static host.

Key features

• Dual theme from one token set — Colors use CSS light-dark() values driven by color-scheme; setting one attribute changes the whole page, and OS preference still wins when JavaScript is off.
• No external requests — Latin fonts are self-hosted .woff2 (Source Serif 4 and JetBrains Mono under SIL OFL 1.1); Japanese falls through to the system mincho stack rather than shipping a multi-megabyte CJK font.
• Zero JS on article pages — The theme toggle is a few hundred inlined bytes and the WebGL ink is 3.5 KB gzipped and loads only on the front page; article pages load no client JavaScript.
• WebGL fluid ink simulation — A GPU Navier–Stokes solver runs at up to 1.5x DPR, pauses when off-screen, and is skipped entirely for prefers-reduced-motion or when WebGL2 is unavailable, leaving a static gradient.
• Schema-validated content collection — Frontmatter with a missing date or malformed tag fails the build; Markdown and MDX both work.
• Automatic SEO and sharing — Canonical URLs, Open Graph, Twitter cards, JSON-LD (WebSite and BlogPosting), sitemap, RSS, robots.txt and llms.txt are built in.
• Build-time per-post social images — Rendered with satori and resvg at 1200 by 630 pixels with ink ground, vermilion rule and monospace type.
• Dual-theme Shiki highlighting — Syntax highlighting emits both palettes so code blocks follow the theme toggle.

Who is Sumi for?

• Writers and bloggers who care about typography — They can publish long-form Markdown posts with reading time, a table of contents, tags and optional hero images while keeping page weight low.
• Astro developers — They get a small codebase where most site settings live in one src/config.ts, with content schema in src/content.config.ts and layout components in src/layouts/.
• Portfolio or studio sites with a Japanese/ink aesthetic — The theme's 墨 accents, washi-paper texture and negative-space layout give a distinctive visual identity without external image services.
• Performance-focused site owners — They can disable INK.hero to remove all external JavaScript entirely while keeping Lighthouse Performance near 93 on the homepage per the author's tests.

What can you do with Sumi?

• Writers and bloggers: Write Markdown or MDX posts with tags, dates and optional hero images; Sumi outputs paginated /blog listings, tag archives, RSS and per-post Open Graph images.
• Website maintainers: Set INK.hero and INK.divider flags to keep or remove the ink animation, tune strength from 0.3 to 2.5, and enable autoFlow so the fluid drifts without cursor input.
• Designers: Change all colors in src/styles/tokens.css using light-dark(light, dark) declarations, and the ink simulation adapts its pigment and background automatically based on luminance.
• Self-hosters: Deploy the static dist output to Cloudflare Pages, Netlify or Vercel with the Node version set to 24 after changing SITE.url in src/config.ts.

How do you set Sumi up?

Quick start is git clone, npm install, then npm run dev, requiring Node.js 22.12 or newer since Astro does not support odd-numbered releases. The theme's npm scripts include dev, build, preview and check (the last runs astro check type checking). The main configuration file is src/config.ts where site metadata, author, navigation, social links, blog pagination size, reading-time settings and ink simulation behavior are set.

Things worth knowing before deploying

The author reports Lighthouse mobile results measured with throttling and an uncompressed preview server: article pages score 85–96 performance, while the homepage with the hero simulation on scores 74–81 because shader compilation adds blocking time. Turning INK.hero off brings the homepage to 93 and leaves the theme with no external JavaScript. LCP on the homepage is reported as 1.9 seconds and CLS as 0 in both modes. Deployments to Cloudflare Pages, Netlify and Vercel need the Node version pinned to 24, and SITE.url in src/config.ts must point at the deployed origin before canonical URLs are correct.

Licence

Sumi is MIT licensed by kpab. The bundled fonts Source Serif 4 and JetBrains Mono are SIL Open Font License 1.1; syntax colours are from the Vitesse VS Code theme via Shiki, and social images depend on satori and resvg-js.