Metalsmith Company Starter

Using "sectioned" pages to build flexible page layouts

This starter is build in the style of a company marketing site. The components on this site are bare-bone interpretations of common information presentation patterns that can be found on many corporate websites. The source code for this site can be found on GitHub.

Metalsmith Javascript Metalsmith Javascript

Photo by Anamul Rezwan from Pexels

How is this site build?

Styles are written in SCSS, scripts in Javasript and compiled with Metalsmith plugins. Content is written in Markdown and templates are coded with Nunjucks. All page content is defined in the frontmatter of each page. Except for blog pages, there are no long-text markdown sections. Rather, content text area fields in the page frontmatter are compiled into HTML with a Nunjucks filter.

Page sections are defined as a YAML object in the frontmatter. This approach lends itself to an easy integration with headless CMSs like Get more detailed explanations in this blogpost.

For example, this page is build with a header and footer that are the same for every page. Then it uses three components, a Banner, a text section and a media component twice for the body content.

Important implementation details

  • Images hosted on
  • All images are loaded with Low Res Placeholders first and then replaced when the image enters the browser viewport (lazy load).
  • SVG Icons integration.
Metalsmith Javascript Metalsmith Javascript

Photo by Andre Furtado from Pexels

Digital Asset Management with Cloudinary

Images are easy

Cloudinary is used to store, transform, optimize, and deliver all site media assets — images and videos with easy-to-use APIs. This service takes the pain of image management and responsive image set creations away. You just tell cloudinary, in the image url, what the image size should be and more. Click here to get started.

Read about the responsive image javascript module on

cloudinary cloudinary