Coder Social home page Coder Social logo

metalsmith's Introduction

Metalsmith

An extremely simple, pluggable static site generator.

In Metalsmith, all of the logic is handled by plugins. You simply chain them together. Here's what the simplest blog looks like...

Metalsmith(__dirname)
  .use(markdown())
  .use(templates('handlebars'))
  .build();

...but what if you want to get fancier by hiding your unfinished drafts and using custom permalinks? Just add plugins...

Metalsmith(__dirname)
  .use(drafts())
  .use(markdown())
  .use(permalinks('posts/:title'))
  .use(templates('handlebars'))
  .build();

...it's as easy as that!

Installation

$ npm install metalsmith

Plugins

Check out the website for a list of plugins.

How does it work?

Metalsmith works in three simple steps:

  1. Read all the files in a source directory.
  2. Invoke a series of plugins that manipulate the files.
  3. Write the results to a destination directory!

Each plugin is invoked with the contents of the source directory, and each file can contain YAML front-matter that will be attached as metadata, so a simple file like...

---
title: A Catchy Title
date: 2014-12-01
---

An informative article.

...would be parsed into...

{
  'path/to/my-file.md': {
    title: 'A Catchy Title',
    date: new Date('2014-12-01'),
    contents: new Buffer('An informative article.')
  }
}

...which any of the plugins can then manipulate however they want. And writing the plugins is incredibly simple, just take a look at the example drafts plugin.

Of course they can get a lot more complicated too. That's what makes Metalsmith powerful; the plugins can do anything you want!

The secret...

We keep referring to Metalsmith as a "static site generator", but it's a lot more than that. Since everything is a plugin, the core library is actually just an abstraction for manipulating a directory of files.

Which means you could just as easily use it to make...

Resources

  • IRC Channel - it's #metalsmith on freenode!
  • Getting to Know Metalsmith - a great series about how to use Metalsmith for your static site.

CLI

In addition to a simple Javascript API, the Metalsmith CLI can read configuration from a metalsmith.json file, so that you can build static-site generators similar to Jekyll or Wintersmith easily. The example blog above would be configured like this:

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-drafts": true,
    "metalsmith-markdown": true,
    "metalsmith-permalinks": "posts/:title",
    "metalsmith-templates": "handlebars"
  }
}

And then just install metalsmith and the plugins and run the metalsmith CLI...

$ node_modules/.bin/metalsmith
  
    Metalsmith · reading configuration from: /path/to/metalsmith.json
    Metalsmith · successfully built to: /path/to/build

Or if you install them globally, you can just use:

$ metalsmith
  
    Metalsmith · reading configuration from: /path/to/metalsmith.json
    Metalsmith · successfully built to: /path/to/build

Checkout the static site, Jekyll or Wintersmith examples to see the CLI in action.

API

Checkout the project scaffolder or build tool examples to see a real example of the Javascript API in use.

new Metalsmith(dir)

Create a new Metalsmith instance for a working dir.

#use(plugin)

Add the given plugin function to the middleware stack.

#build(fn)

Build with the given settings and call fn(err, files).

#source(path)

Set the relative path to the source directory, or get the full one if no path is provided. The source directory defaults to ./src.

#destination(path)

Set the relative path to the destination directory, or get the full one if no path is provided. The destination directory defaults to ./build.

#metadata(json)

Get the global metadata. This is useful for plugins that want to set global-level metadata that can be applied to all files.

#join(paths...)

Join any amount of paths... to the working directory. This is useful for plugins who want to read extra assets from another directory, for example ./templates.

#run(files, fn)

Run all of the middleware functions on a dictionary of files and callback with fn(err, files), where files is the altered dictionary.

Metadata API

Add metadata to your files to access these build features.

mode

Set the mode of the file. For example,

$ cat cleanup.sh

--
mode: 0764
--

rm -rf .

would be built with mode -rwxrw-r--, i.e. user-executable.

License

The MIT License (MIT)

Copyright © 2014, Segment.io <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

metalsmith's People

Contributors

ianstormtaylor avatar srcreigh avatar gamingcoder avatar drewblaisdell avatar gregjacobson avatar lramsey avatar ws avatar

Watchers

Phil Adams avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.