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.

Adding Smooth Page Transitions with SWUP
Learn how to implement smooth, app-like page transitions in your Metalsmith site using SWUP. Includes component re-initialization patterns, prefetching for instant navigation, and backwards-compatible implementation.
Adding a Top Message Bar to Your Header
A step-by-step guide to adding a dismissible announcement bar above your header with cookie persistence and smooth animations
Adding Header Search to Your Site
A step-by-step guide to adding a header search form from the Nunjucks Components library to your starter project
Building a Component from Scratch
A comprehensive guide to creating your own Nunjucks component from the ground up, complete with validation, documentation, and submission to the library
Getting Started with the Eleventy Starter
Complete guide to setting up your first Eleventy project. From installation to deployment, learn how to build modern static sites with structured content and reusable components.
Getting Started with the Metalsmith2025 Starter
Complete guide to setting up your first Metalsmith project. From installation to deployment, learn how to build modern static sites with structured content and reusable components.