karngyan.com

A personal site + blog template for developers who'd rather write posts than build infrastructure.
TanStack Start · React 19 · Tailwind CSS v4 · shadcn/ui · MDX · RSS · Cloudflare Workers

---

Light mode

Demo: template.karngyan.com · Author's site built on the same stack: karngyan.com

Features

• ⚡ TanStack Start — file-based routing, SSR, typed loaders, server routes
• 🎨 Tailwind CSS v4 + shadcn/ui — CSS-first tokens (oklch), dark/light/system theme with no flash (press d to toggle)
• ✍️ MDX articles — folders in src/content/articles/, Shiki syntax highlighting, GFM tables, inline React components
• 📡 RSS, sitemap, robots.txt, llms.txt — server routes generated from your content and config
• 🖼️ Open Graph images — generated at build time with satori (default + per-article)
• ☁️ Cloudflare Workers — default deploy target, one command or auto-deploy via GitHub Actions
• 📌 mise.toml — exact node/pnpm pins, zero "works on my machine"
• 🤖 Claude-friendly — CLAUDE.md teaches coding agents the repo's architecture and recipes

Quick start

1. Click Use this template on GitHub (or pnpm dlx degit karngyan/karngyan.com my-site)
2. Install the toolchain and dependencies:

mise install     # installs the pinned node + pnpm (https://mise.jdx.dev)
pnpm install
pnpm dev         # → http://localhost:3000

Make it your own

Everything personal lives in three places:

1. site.config.ts — name, canonical URL, title/description, email, socials, nav, resume toggle, work history, optional Plausible analytics. Fully typed; a typo fails the build.
2. Images — src/assets/avatar.png (header), src/assets/portrait.jpg (about), src/assets/photos/ (home photo strip), public/logos/ (work history), public/favicon*.
3. Content — articles in src/content/articles/<slug>/page.mdx; page prose in the route files marked with ✏️ (src/routes/index.tsx, about/, uses/, projects/).

Write an article:

mkdir src/content/articles/my-first-post
$EDITOR src/content/articles/my-first-post/page.mdx

import { ArticleLayout } from '../../../components/article-layout'

export const article = {
  title: 'My first post',
  description: 'Short summary that shows up in lists, RSS, and OG cards.',
  date: '2026-07-09',
  author: 'you',
}

export const metadata = {
  title: article.title,
  description: article.description,
}

export default (props) => <ArticleLayout article={article} {...props} />

Hello! **Markdown** and <em>JSX</em> both work here.

The article index, RSS feed, sitemap, and OG images all regenerate on the next build.

Deploy to Cloudflare (default)

One-time setup:

pnpm wrangler login

Then, every deploy:

pnpm run deploy  # = pnpm build && wrangler deploy

Your site is live on <name>.<account>.workers.dev. Add a custom domain in the Cloudflare dashboard (Workers → your worker → Settings → Domains & Routes), then set url in site.config.ts to match.

Auto-deploy with GitHub Actions

Pushes to the default branch deploy automatically via .github/workflows/deploy.yml. Add two repository secrets:

• CLOUDFLARE_API_TOKEN — create at dash.cloudflare.com → My Profile → API Tokens ("Edit Cloudflare Workers" template)
• CLOUDFLARE_ACCOUNT_ID — on the right sidebar of your account's Workers overview page

Other hosts

The build uses nitro, so other presets (Node server, Netlify, Vercel, …) work by changing the preset in vite.config.ts — see the nitro deploy docs.

Commands

Command	What it does
pnpm dev	Dev server on :3000
pnpm build	OG images + production build → .output/
pnpm test	vitest
pnpm check	prettier + eslint (auto-fix)
pnpm run deploy	build + wrangler deploy

Contributing

PRs welcome — see CONTRIBUTING.md.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Karn - @gyankarn - mail@karngyan.com