Component-Based Architecture
Blog
Guides and tutorials for building modern websites
Learn how to build, structure, and optimize component-based Metalsmith sites. From architecture fundamentals to advanced techniques.

How Component Bundling Works
Deep dive into automatic component discovery and bundling with metalsmith-bundled-components. Learn how CSS and JavaScript are automatically optimized for each page.
Building Structured Pages
Complete guide to understanding how Metalsmith transforms YAML configurations into HTML pages. Learn the template hierarchy, Nunjucks macros, data flow, and debugging techniques.
Section Anatomy
Deep dive into Metalsmith component architecture. Learn how hero sections, content blocks, and page sections are structured with YAML configuration and Nunjucks templates.
Building Pages with Metalsmith Components
Learn how to construct pages from reusable components defined in structured frontmatter. A practical guide to the component-based approach with real examples.
Sample Blog Post Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui nullam quis risus eget urna mollis ornare.