UNPKG

7.38 kBMarkdownView Raw
1# Metalsmith
2
3[![npm: version][npm-badge]][npm-url]
4[![ci: build][ci-badge]][ci-url]
5[![code coverage][codecov-badge]][codecov-url]
6[![license: MIT][license-badge]][license-url]
7[![Gitter chat][gitter-badge]][gitter-url]
8
9> An extremely simple, _pluggable_ static site generator.
10
11In Metalsmith, all of the logic is handled by plugins. You simply chain them together. Here's what the simplest blog looks like...
12
13```js
14Metalsmith(__dirname)
15 .use(markdown())
16 .use(layouts('handlebars'))
17 .build(function (err) {
18 if (err) throw err
19 console.log('Build finished!')
20 })
21```
22
23...but what if you want to get fancier by hiding your unfinished drafts and using custom permalinks? Just add plugins...
24
25```js
26Metalsmith(__dirname)
27 .use(drafts())
28 .use(markdown())
29 .use(permalinks('posts/:title'))
30 .use(layouts('handlebars'))
31 .build(function (err) {
32 if (err) throw err
33 console.log('Build finished!')
34 })
35```
36
37...it's as easy as that!
38
39## Installation
40
41NPM:
42
43```
44npm install metalsmith
45```
46
47Yarn:
48
49```
50yarn add metalsmith
51```
52
53## Plugins
54
55Check out the website for a list of [plugins](https://metalsmith.io/plugins).
56
57## How does it work?
58
59Metalsmith works in three simple steps:
60
611. Read all the files in a source directory.
622. Invoke a series of plugins that manipulate the files.
633. Write the results to a destination directory!
64
65Each 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...
66
67```md
68---
69title: A Catchy Title
70date: 2021-12-01
71---
72
73An informative article.
74```
75
76...would be parsed into...
77
78```
79{
80 'path/to/my-file.md': {
81 title: 'A Catchy Title',
82 date: <Date >,
83 contents: <Buffer 7a 66 7a 67...>
84 }
85}
86```
87
88...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](examples/drafts-plugin/index.js).
89
90Of course they can get a lot more complicated too. That's what makes Metalsmith powerful; the plugins can do anything you want!
91
92## The secret...
93
94We 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.
95
96Which means you could just as easily use it to make...
97
98- [A simple project scaffolder.](examples/project-scaffolder)
99- [A simple build tool for Sass files.](examples/build-tool)
100- [A simple static site generator.](examples/static-site)
101- [A Jekyll-like static site generator.](examples/jekyll)
102- [A Wintersmith-like static site generator.](examples/wintersmith)
103
104## Resources
105
106- [Gitter community chat](https://gitter.im/metalsmith/community)
107- [Getting to Know Metalsmith](http://robinthrift.com/post/getting-to-know-metalsmith/) - a great series about how to use Metalsmith for your static site.
108- [Building a Blog With Metalsmith](https://azurelogic.com/posts/building-a-blog-with-metalsmith/) - a blog post about how to create a basic blog with Metalsmith. Check out the related [video of the talk](https://www.youtube.com/watch?v=cAq5_5Yy7Tg) too!
109- [Awesome Metalsmith](https://github.com/lambtron/awesome-metalsmith) - great collection of resources, examples, and tutorials
110
111## CLI
112
113In addition to a simple [Javascript API](#api), the Metalsmith CLI can read configuration from a `metalsmith.json` file, so that you can build static-site generators similar to [Jekyll](http://jekyllrb.com) or [Wintersmith](http://wintersmith.io) easily. The example blog above would be configured like this:
114
115```json
116{
117 "source": "src",
118 "destination": "build",
119 "plugins": [
120 { "@metalsmith/drafts": true },
121 { "@metalsmith/markdown": true },
122 { "@metalsmith/permalinks": "posts/:title" },
123 { "@metalsmith/layouts": {} }
124 ]
125}
126```
127
128You can specify your plugins as either an object or array. Using an array would allow you to specify use of the same plugin multiple times. The above example is then defined as so:
129
130```json
131{
132 "source": "src",
133 "destination": "build",
134 "plugins": [
135 { "@metalsmith/drafts": true },
136 { "@metalsmith/markdown": true },
137 { "@metalsmith/permalinks": "posts/:title" },
138 { "metalsmith-layouts": true }
139 ]
140}
141```
142
143And then just install `metalsmith` and the plugins and run the metalsmith CLI...
144
145```bash
146metalsmith
147
148# Metalsmith · reading configuration from: /path/to/metalsmith.json
149# Metalsmith · successfully built to: /path/to/build
150```
151
152Options recognised by `metalsmith.json` are `source`, `destination`, `concurrency`, `metadata`, `clean` and `frontmatter` - See "_API_" section below for usage.
153
154Checkout the [static site](examples/static-site), [Jekyll](examples/jekyll) or [Wintersmith](examples/wintersmith) examples to see the CLI in action.
155
156If you want to use a custom plugin, but feel like it's too domain-specific to
157be published to the world, you can include plugins as local npm modules:
158(simply use a relative path from your root directory)
159
160```json
161{
162 "plugins": [{ "./lib/metalsmith/plugin.js": true }]
163}
164```
165
166## API
167
168See [API reference at metalsmith.io](https://metalsmith.io/api)
169
170## Metadata API
171
172Add metadata to your files to access these build features. By default, Metalsmith uses a few different metadata fields:
173
174- `contents` - The body content of the file, not including any [YAML frontmatter](https://middlemanapp.com/basics/frontmatter/).
175- `mode` - The numeric version of the [file's mode](http://en.wikipedia.org/wiki/Modes_%28Unix%29).
176
177You can add your own metadata in two ways:
178
179- Using [YAML frontmatter](https://middlemanapp.com/basics/frontmatter/) at the top of any file.
180- Enabling [a plugin](https://github.com/metalsmith/metalsmith/blob/master/README.md#plugins) that adds metadata programmatically.
181
182#### mode
183
184Set the mode of the file. For example, a `cleanup.sh` file with the contents
185
186```md
187---
188mode: 0764
189---
190
191#!/bin/sh
192
193rm -rf .
194```
195
196would be built with mode `-rwxrw-r--`, i.e. user-executable.
197
198## Troubleshooting
199
200### Node Version Requirements
201
202Metalsmith 3.0.0 will support NodeJS versions 12 and higher.
203Metalsmith 2.4.0 supports NodeJS versions 8 and higher.
204Metalsmith 2.3.0 and below support NodeJS versions all the way back to 0.12.
205
206## Credits
207
208Special thanks to [Ian Storm Taylor](https://github.com/ianstormtaylor), [Andrew Meyer](https://github.com/Ajedi32), [Dominic Barnes](https://github.com/dominicbarnes), [Andrew Goodricke](https://github.com/woodyrew), [Ismay Wolff](https://github.com/ismay), [Kevin Van Lierde](https://github.com/webketje) and [others](https://github.com/segmentio/metalsmith/graphs/contributors) for their contributions!
209
210## [License](LICENSE)
211
212[npm-badge]: https://img.shields.io/npm/v/metalsmith.svg
213[npm-url]: https://www.npmjs.com/package/metalsmith
214[ci-badge]: https://github.com/metalsmith/metalsmith/actions/workflows/test.yml/badge.svg
215[ci-url]: https://github.com/metalsmith/metalsmith/actions/workflows/test.yml
216[codecov-badge]: https://coveralls.io/repos/github/metalsmith/metalsmith/badge.svg?branch=master
217[codecov-url]: https://coveralls.io/github/metalsmith/metalsmith?branch=master
218[license-badge]: https://img.shields.io/github/license/metalsmith/metalsmith
219[license-url]: LICENSE
220[gitter-badge]: https://img.shields.io/badge/GITTER-Join-blue.svg
221[gitter-url]: https://gitter.im/metalsmith/community