Tomoshibi

Tomoshibi (灯) is a dark-only, zero-JavaScript Astro portfolio template for a personal site, built by Seu (c12o.net) and released under the MIT license. It generates a static site containing a hero section with name and facts, project cards with individual detail pages, a short bio, and contact links.

What is Tomoshibi?

Tomoshibi is a static portfolio template built on Astro 7 that takes a single site config file, a projects data file, and a few images as input and outputs a fully static site in dist/. It runs on any static host and ships with Japanese-first typography designed for personal developer or designer showcases.

What makes Tomoshibi stand out?

• Astro 7, static output — no framework and no client-side JavaScript; the only <script> on the site is JSON-LD for search engines.
• Strict CSP by default — public/_headers ships default-src 'self' with no inline styles or scripts to whitelist.
• Dark-only design tokens — one file (src/styles/tokens.css) defines every color, font, spacing, and radius.
• Subset, self-hosted Japanese web fonts — scripts/build-fonts.mjs copies only the woff2 slices of Zen Kaku Gothic New and Shippori Mincho B1 into public/fonts/ at build time.
• Project pages — each entry in src/data/projects.ts becomes a home-page card and a page at /projects/<slug>/, linked with a cross-document view transition.
• Optional latest posts — point feedUrl at an RSS 2.0 feed and the home page lists the newest entries at build time; leave it null and the section disappears.
• Generated metadata — sitemap, robots.txt, security.txt, canonical URLs, Open Graph tags, and JSON-LD all derive from one config file.
• Biome + GitHub Actions — lint, format, typecheck, and build run in CI.

Who should use Tomoshibi?

• Developers and designers who want a minimal personal site listing projects, a short bio, and contact details without any runtime JavaScript.
• Japanese-language creators who need proper Japanese web typography with self-hosted subset fonts.
• Static-host users deploying to Cloudflare Workers, Cloudflare Pages, Netlify, Vercel, or GitHub Pages.

What can you do with Tomoshibi?

• Showcase projects: add entries to src/data/projects.ts and one 1600×900 WebP screenshot per slug to get cards plus detail pages with view transitions.
• Aggregate a blog: set feedUrl to an RSS 2.0 feed and the home page lists the newest posts at build time, refreshed daily via a deploy hook secret.
• Localize the site: set lang and ogLocale in site.ts and translate the ui object; components contain no text of their own.

How does Tomoshibi work?

Start with pnpm create astro@latest -- --template c12o-dev/tomoshibi my-site, install, and run pnpm dev. Edit src/data/site.ts (setting url first, since the build fails without it) and src/data/projects.ts, replace screenshots and favicons, then run pnpm build to write dist/. The SITE_URL environment variable overrides site.url for a single build.

FAQ

Is Tomoshibi free?

Yes. Tomoshibi is released under the MIT license, © 2026 Seu, so you can use and modify it freely.

Does Tomoshibi require JavaScript?

No. It uses Astro 7 static output with zero client-side JavaScript; the only <script> element on the site is JSON-LD metadata for search engines.

Which feed formats does the RSS section support?

RSS 2.0 only, with <item> elements containing title, link, and pubDate. Atom is not supported, and the feed is read once at build time with a 10-second timeout.

Can I deploy Tomoshibi to GitHub Pages?

Yes, but GitHub Pages cannot set custom headers, so the site works without the bundled CSP. Cloudflare Workers, Cloudflare Pages, and Netlify read public/_headers directly; Vercel requires copying rules into vercel.json.

What are the system requirements?

Node 22.12 or newer is required, and pnpm is pinned through the packageManager field in the repository.