company logo

Metalsmith is a lightweight, very flexible, and pluggable static site generator. It produces static build files that are built from the source files and ready to be deployed on a web server. It offers various templating engines that enable you to run the templating language on the static site generator and also on your content editing platform. This saves a lot of development time and consistency in the generated output. As a result, Metalsmith is highly used for creating sites such as blogs, technical documentation, and knowledgebase.

Metalsmith Integration Overview

Contentstack integrates with Metalsmith seamlessly. Their integration results in a best-of-breed system that takes care of content management and website development tasks. Here, Contentstack serves as the body (backend) and controls your content management and delivery operations. Metalsmith, on the other hand, serves as the frontend and helps you create websites.

Contentstack and Metalsmith Integration Benefits

Contentstack’s integration with Metalsmith opens up many possibilities. Here are some benefits of using Metalsmith with Contentstack:

Easy to Create Landing Pages

If you want to create gated downloadable content such as any promotional content (this could include a webinar form, a content download form, or an event form), you can add the Marketo Forms Experience Extension within the content types of your Contentstack CMS, which lets you easily insert the relevant form for your site’s pages.

Lead Conversion

When the website is slow, it affects the lead conversion rate massively. Slow websites increase bounce rates and greatly impact your chances of lead conversion. Contentstack and Metalsmith work together to ensure the content on your site is easy to create and is fast to load.

Increased Revenue

Faster load times lead to satisfied, converting customers. One e-commerce company saw that with a 2-second improvement in load time on their homepage and product pages, the conversion rate increased by 16.5%.

Contentstack and Metalsmith Integration Setup

To integrate Metalsmith with Contentstack, perform the following steps. See the documentation for a more detailed step-by-step guide.

  1. Create a Stack

    The first step is to create a stack. Log in to your Contentstack account and create a new stack that will hold all the data, specific to your website.

  2. Add a Publishing Environment

    To let Metalsmith fetch content from Contentstack, you will have to publish your website content on a specific environment. Create a new environment to make your data accessible.

  3. Import Content Types

    The next step involves creating a content type to create the structure or blueprint of a page or a section of your web or mobile property.

  4. Add Content to Your Content Type

    Once your content type is ready, you need to add content to the entries of a content type and publish them on the environment that you created in step 2.

  5. Set Up Metalsmith-Contentstack

    In this step, you need to configure Metalsmith so that it works with Contentstackto fetch content published on your environment through Contentstack's Content Delivery API.

  6. Build and Configure the Website

    Configure your website by providing your API Key, Access Token, and environment. This will help your website deliver data from Contentstack through its CDAPI that has built-in support for Content Delivery Network (CDN). Then install and build your website using the npm command.

  7. Go Live

    You can release your application to the live environment by deploying it on any cloud-hosting service such as Heroku. And that's it!

    To learn more about how to set up the Metalsmith extension, refer to our in-depth guide or contact our support team at support@contentstack.com to review the sample code.

bulb

Questions? Ideas?

If you have any questions about the way the Metalsmith extension works or have ideas about other third-party app extensions, send us an email at support@contentstack.com.