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.

View Demo
📚

Documentation

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

View Demo
🚀

Product Page

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

View Demo

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