Naivete Precedes Misrepresentation


    0.0.3 • Public • Published


    A metalsmith plugin to create a static website using Contentstack.


    In order to get started using contentstack-metalsmith, you can checkout our sample app at contentstack-metalsmith-example


    To install contentstack-metalsmith, run the following command in a terminal:

      $ npm install contentstack-metalsmith

    Once you’re done with the installation, you will need to edit the index.js file under the root directory in order to use Contentstack with Metalsmith.

    Configuring Globals

    The Contentstack configuration added in the index.js file of the site will be available throughout the site and will be substituted in files where no other Contentstack specific configuration is provided.

    When using the Metalsmith CLI, you’ll need to add contentstack-metalsmith in your metalsmith.json file and provide the API Key and access token of your stack along with the stack environment. This can be done as follows:

        "source": "src",
        "destination": "build",
        "plugins": {
          "contentstack-metalsmith": {
            "api_key": "<<Contentstack Api Key>>",
            "access_token": "<<Contentstack Access Token>>",
            "environment": "<<Stack Environment>>"

    In case you are using Metalsmith’s JS API, you will need to add contentstack-metalsmith to the plugins section as follows:

      .use(require('contentstack-metalsmith') ({
          "api_key": "<<Contentstack Api Key>>",
          "access_token": "<<Contentstack Access Token>>",
          "environment": "<< Environment >>"

    Please refer the following to get more information on configuring your global configuration file. Global configuration

    Configuring Source Files

    Make the necessary configuration changes in your source files which are located under the src/ directory, in the manner: ./src/ Your source file can be of type: .md, .html, etc.:

    title: contentstack-metalsmith sample demo
      content_type: posts
      entry_layout: post.html
      partials: [header, footer]
    layout: index.html

    The above code snippet will use the configuration provided in your global configuration stack details, and query the stack for content_type: posts. Furthermore, each entry from posts will be rendered using the post.html layout under the layouts/ directory. You will also be able to access the header and footer content types via the header and footer keys in posts.html. Please refer the following to get more information on configuring your source configuration file. Source configuration

    Configuring layouts files

    Consider the following code snippet of the ./layouts/post.html file:

    <!DOCTYPE html>
    <html lang="en">
        <div class=”header”>{{header.title}}</div>
        <div class=”container”>
            <p>Post title: {{entry.title}}</p>
            <p>Post author: {{}}</p>

    You can use the entry key to access single entry properties (refer above example). Whereas, in index.html pages, you can access data using the entries key, which will be a collection of all entries.


    npm i contentstack-metalsmith

    DownloadsWeekly Downloads






    Last publish


    • mynk