Gutenberg Examples

Convention-based page building with auto-discovery, auto-navigation, and project-level deployment

Explore three complete examples showcasing different themes, layouts, and use cases

View Landing Page Read Documentation

Example Pages

🎨

Landing Page

A dark-themed marketing page with hero, features, content, and CTA sections. Demonstrates comprehensive semantic styling.

Learn more
📚

Documentation

A light-themed documentation page with prose content and narrow layout. Perfect for technical writing and guides.

Learn more
🚀

Product Page

An ocean-themed product landing page with split CTA and feature highlights. Shows off the ocean color palette.

Learn more
## Convention-Based Architecture Gutenberg uses convention over configuration to eliminate manual path threading and parameter management: - **Auto-discovery:** All `.yaml` files in a project directory are automatically found and built - **Auto-navigation:** Nav links are computed from page titles and injected into each page - **Conventional output:** All artifacts go to `{project_dir}/rendered/` mirroring input structure - **Single deployment:** One CF Pages project contains all pages with proper routing - **`_index.yaml` → `index.html`:** Special naming convention for directory roots