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.
Working with Data in Nunjucks Components
Learn how to structure, load, and use JSON data files in Metalsmith components. Master data-driven components with real-world examples from maps, logos, and collections.
Building a Site-Wide Search System
Learn how to implement a robust search system for your static site using build-time indexing and client-side filtering with Fuse.js.
Theming Architecture
Comprehensive guide to implementing dark mode in component-based static sites. Learn about semantic color tokens, adaptive vs. design choice sections, and component-level theme considerations.
How Component Bundling Works
Deep dive into automatic component discovery and bundling. Learn how CSS and JavaScript are automatically optimized for your site with component bundler plugins.
Building Structured Pages
Complete guide to understanding how Nunjucks Components transform YAML configurations into HTML pages. Learn the template hierarchy, Nunjucks macros, data flow, and debugging techniques.
Section Anatomy
Deep dive into Nunjucks component architecture. Learn how hero sections, content blocks, and page sections are structured with YAML configuration and Nunjucks templates.