Modern Website Template

A website starter for people building a site for the first time, or building one properly for the first time.

It is modern in two specific ways. It runs on TanStack Start, a full-stack React framework you can build anything with, from a landing page to an app. And it deploys to Cloudflare Workers: static files are served free from Cloudflare's edge, and the free tier covers the rest of a small site.

The whole site is prerendered to static HTML at build time, so pages load fast and Lighthouse scores stay high without tricks.

What you get

• Landing, features, and pricing pages in neutral black and white. Seven color tokens in one CSS block control the entire site.
• A blog written in markdown. Drop a file in content/blog/ and it gets a page, a listing entry, meta tags, and a sitemap entry.
• Docs with a sidebar, also markdown, powered by fumadocs.
• SEO handled for you. Canonical URLs, Open Graph and Twitter cards, an FAQ JSON-LD helper, robots.txt, and a sitemap generated from the pages that actually exist.
• A free-tool example protected against abuse. Free tools that call a paid API earn traffic and links, and can also earn a surprise bill. The example checks input, then a cache, a per-IP rate limit, Cloudflare Turnstile, and a daily budget before anything costs money. Swap one function for your real API.
• One-command deploys to Cloudflare, with a CI workflow that checks types and formatting on every push.
• An AGENTS.md that tells a coding agent how the site is laid out and how to do the common jobs: add a post, add a page, swap the tool's API, deploy.

Quickstart

You need Node 22 or newer and pnpm. If you don't have pnpm, npm install -g pnpm (or corepack enable on Node 22 to 24).

pnpm install
pnpm dev

Open http://localhost:3000. The first pnpm dev or pnpm check generates the .source/ folder that the content imports resolve against, so run one before opening the editor.

Scripts

Script	Does
pnpm dev	Start the dev server
pnpm check	Generate content and binding types, typecheck, and check formatting
pnpm build	Prerender every page and write sitemap.xml
pnpm preview	Serve the production build locally
pnpm format	Format everything with Prettier
pnpm run deploy	Build and deploy to Cloudflare

pnpm run deploy needs the run: bare pnpm deploy is a built-in pnpm command that does something else.

Make it yours

1. src/site.config.ts: name, tagline, description, GitHub link, navigation. Set url to the address your site is actually served from, even if that is the workers.dev one for now. It becomes every canonical tag and sitemap entry, and search engines will not index pages whose canonical points at example.com. Put the same URL in public/robots.txt.
2. The seven colors in the @theme block at the top of src/styles/app.css, if you want something other than black and white.
3. The copy. Every page currently describes the template itself and says where its text lives. Replace it with your own: the hero and cards in src/routes/_site/index.tsx, the two feature pages in src/lib/feature-pages.ts, the tiers in src/routes/_site/pricing.tsx, the docs in content/docs/, and the post in content/blog/.
4. The icons and social-card.png in public/, and the name in public/site.webmanifest.
5. content/legal/privacy.md and terms.md, then delete content/blog/how-the-blog-works.md when you have a real post.
6. The CTA destinations: the hero button in index.tsx, cta.href on each pricing tier, and the feature-page button all point at /docs/getting-started.
7. The banner and footer credit that say the site is based on openseo.so: src/components/template-banner.tsx and the footer line in src/components/site-footer.tsx. Keep them or delete them.

Deploy

You need a free Cloudflare account.

pnpm wrangler login
pnpm run deploy

The first deploy asks you to pick a workers.dev subdomain and then prints the URL where your site is live. To use your own domain, add it to Cloudflare and uncomment the routes block in wrangler.jsonc. To deploy on every push, connect the repo under Settings → Build on your Worker in the Cloudflare dashboard. Secrets are covered in AGENTS.md §8 and the Turnstile setup for the free tool in §6.

Maintain it with your AI agent

The recommended way to work on this site is to point a coding agent at it. Claude Code, Codex, Cursor, and Copilot all read AGENTS.md, which explains the layout, the conventions, and every workflow from "add a blog post" to "enable Turnstile". Try prompts like:

• "Add a blog post about X. Use the frontmatter from the existing post."
• "Add a third feature page called Y and link it from the features index."
• "Replace the example tool's stub with a call to Z's API and add the API key as a secret."
• "Run Lighthouse on the home page and fix anything below 100."

Lighthouse

Lighthouse 13.4, production build served from a local compressed static server, best of two runs on mobile. Columns are Performance / Accessibility / Best Practices / SEO.

Page	Mobile	Desktop
/	98 / 100 / 100 / 100	100 / 100 / 100 / 100
/blog	98 / 100 / 100 / 100	100 / 100 / 100 / 100
/blog/how-the-blog-works	98 / 100 / 100 / 100	100 / 100 / 100 / 100
/pricing	98 / 100 / 100 / 100	100 / 100 / 100 / 100
/features/feature-one	98 / 100 / 100 / 100	100 / 100 / 100 / 100
/tools/example-tool	98 / 100 / 100 / 100	100 / 100 / 100 / 100
/docs	96 / 100 / 100 / 100	100 / 100 / 100 / 100
/docs/getting-started	96 / 100 / 100 / 100	100 / 100 / 100 / 100

The two missing mobile points are first paint at about 1.9s under Lighthouse's simulated slow 4G, which comes down to the size of React plus the router (about 105KB compressed) that every page loads to hydrate. Docs pages carry a second stylesheet for the sidebar UI. Nothing on a content page is render-blocking, no third-party request is made, and total blocking time is zero.

What keeps the numbers there: no external fonts or scripts on content pages, every image has a width and height, and the docs UI library loads only under /docs. The rules are in AGENTS.md.

Getting found

A fast site is the easy part. Getting people to it takes months of picking topics, checking rankings, and fixing what breaks. GETTING-FOUND.md is the checklist for a brand-new site.

We built this template while working on OpenSEO, an open-source SEO platform for that loop: keyword research, rank tracking, backlinks, and site audits. It has an MCP server, so the agent that edits this site can also read your ranking data.

License

MIT