Affiliate Blog Starter

meta

Hello World — Affiliate Blog Starter

A sample post demonstrating the affiliate components, content collections, and SEO foundation of the starter.

This is a sample post demonstrating the starter end to end. It exercises content collections, the post layout, SEO schema, and every affiliate component shipped in Phase D.

The product card

<ProductCard> is the workhorse for affiliate placements:

Best for demonstrating the component

Example Product (replace with real product)

Pass an ASIN and the AffiliateLink router builds a tagged Amazon URL automatically. Add product images via image prop.

★★★★★ (12,000 reviews)

Check current price on Amazon →

Comparison tables

For roundup posts where you compare several products side by side:

Product Best for Rating Notes
Product A overall ★★★★★ Top pick Check price
Product B budget ★★★★☆ Best value Check price
Product C pro use ★★★★★ Premium tier Check price

Pros and cons

Pros

  • Lightning-fast static output (zero JS by default)
  • Network-agnostic affiliate routing scales to many programs
  • Built-in JSON-LD for richer search results

Cons

  • Requires basic familiarity with git and the command line
  • No visual editor (intentional: AI-agent-driven workflow)

You can also drop in raw <AffiliateLink> anywhere in prose: just like this link to the example product which gets routed through your Amazon Associate tag automatically.

FAQ with rich-result schema

Frequently asked questions

How do I add a new affiliate network?
Edit src/config/affiliates.ts, set enabled: true, give it a priority (lower = preferred over Amazon), and add a rewrite function. Then npm run build. Every post that mentions a matching product re-routes through the new network — no post edits required.
Where do product images come from?
For posts where you have an ASIN, you can pass an image URL to <ProductCard image="...">. For posts without product data (because PA-API requires sales volume), use AI-generated images via Nano Banana or Higgsfield, or omit images entirely.
How is the FTC disclosure handled?
Two layers. (1) Site-wide footer disclosure pulled from src/config/site.ts. (2) Per-post banner at the top of every post, toggle via showAffiliateDisclosure in frontmatter (default true).

What’s next

After Phase E ships (Cloudflare Pages deploy), this starter becomes the template that every new niche site clones from. Customizing for a new site:

  1. Edit src/config/site.ts for name/description/author/URL
  2. Edit src/config/affiliates.ts to enable approved networks
  3. Replace this sample post with real content
  4. npm run build && git push → auto-deploys via Cloudflare Pages