Why I built it
Every sourdough recipe online gives you hydration as a percentage, but most home bakers have no idea what that means in practice. You see "75% hydration" and think "OK, 75% of what?" I watched my partner struggle with this for months before I finally wrote a calculator that shows the actual grams of water, flour, and starter to weigh out.
The result is a free, no-signup tool at Sourdough Hydration Calculator. This post walks through the math, the tech stack, and a few decisions that made the project work on a $0/month budget.
The math: baker's percentages explained
Baker's percentages are simple once you see them as ratios. Every ingredient is expressed as a percentage of the total flour weight:
Hydration % = (water weight) / (flour weight) * 100
So a 75% hydration dough has 75g of water for every 100g of flour. Easy.
The wrinkle is that sourdough starter is 50% flour and 50% water. A 100g portion of starter contributes 50g of each to your dough. The calculator handles this automatically:
typescript
const water = flour * (hydration / 100);
const saltGrams = flour * (salt / 100);
const totalStarter = flour * (starter / 100);
const starterFlour = totalStarter * 0.5;
const starterWater = totalStarter * 0.5;
const flourToAdd = flour - starterFlour;
const waterToAdd = water - starterWater;
const totalDough = flourToAdd + waterToAdd + saltGrams + totalStarter;
The output breaks out each ingredient in grams, plus a total dough weight. Six preset hydration levels (65% bagels through 100% ciabatta) handle the common cases.
Tech stack
Next.js 14 (App Router, static export)
TypeScript (strict mode)
Tailwind CSS 3.4
Cloudflare Pages (free hosting)
Plausible Analytics (privacy-friendly, no cookies)
Google Search Console + Bing Webmaster Tools (verification + indexing)
Total monthly cost: $0.
Architecture highlights
Client-side only. No backend, no database, no API. The whole site is a static export. This keeps the bundle small (87 KB shared JS, 19 KB CSS) and the hosting free.
Optimized for Core Web Vitals. Every blog post is pre-rendered at build time. The biggest image (the 1200x630 hero) is converted to WebP at 122 KB. Inline critical CSS via Tailwind.
SEO from day one. Every page has:
Sitemap entry in sitemap.xml
JSON-LD Article schema (auto-generated via shared component)
Open Graph + Twitter Card meta tags
Canonical URL pointing to itself
Internal links between related posts
Two output modes. Grams for serious bakers, plus a "cups + tsp" toggle for casual bakers. Salt is shown in teaspoons at small quantities because 10g of salt as "0.04 cups" is useless in practice.
Why Next.js 14 specifically
I started with vanilla React + Vite, but Next.js's static export (output: 'export') gave me:
File-based routing (no React Router setup)
TypeScript + ESLint out of the box
Built-in CSS modules + Tailwind integration
Image optimization (even for static export)
One-command deploy to Cloudflare Pages
The catch: next/image doesn't work with output: 'export' by default. Setting images.unoptimized: true disables it. The trade-off is acceptable for a small site.
What's free, what's not
| Component | Provider | Cost |
|---|---|---|
| Hosting | Cloudflare Pages | $0 |
| Domain | Cloudflare Registrar | ~$10/year |
| Analytics | Plausible | $0 (self-host) or $9/month |
| Image gen | Agnes AI | Pay per image (~$0.05 each) |
| Email | Cloudflare Email Routing | $0 |
| Newsletter | (not using yet) | TBD |
Total fixed cost: domain only.
What I'd do differently
If I started over:
Skip Next.js, use Astro. Faster builds, smaller output, less JS shipped.
Use Cloudflare D1 for user accounts (free tier) instead of client-only.
Add Web Vitals tracking in CI to catch regressions.
Try it
The free Sourdough Hydration Calculator is live. Six preset hydration levels (Bagel, Sandwich, Classic, Country, Open Crumb, Ciabatta) cover most home-baking needs. No signup, no tracking beyond aggregate page views, no email collection.
For the underlying math, see the open baker's percentage guide on the same site. For a quick sanity check, try entering 500g flour + 75% hydration + 20% starter — you should get 287.5g water-to-add, 10g salt, and 850g total dough (before bake loss).
If you bake, I'd love to hear whether the defaults work for your kitchen. If you don't bake, I hope the math section was at least interesting.
Top comments (0)