metalsmith-dev-server

metalsmith-dev-server

Development server for Metalsmith websites

metalsmith-dev-server is a simple, yet powerful tool to allow you to develop sites using the Metalsmith static site tool. Featuring:

• Compatible with any Metalsmith project
• Scroll syncing, network throttling, and more (via Browsersync)
• Live reload of CSS changes

Usage

:package: Install — add this into your Metalsmith project.

npm install --save-dev github:rstacruz/metalsmith-dev-server

:pencil2: Create metalsmith.js — Your project should have a file that exports the Metalsmith project.

/*
 * Example metalsmith.js:
 * This builds the site when ran via `node metalsmith.js`.
 * When used as `require('./metalsmith')`, it returns the
 * app instance.
 */

const Metalsmith = require('metalsmith')

const app = Metalsmith(__dirname)
  .source('web')
  .destination('public')

if (module.parent) {
  module.exports = app
} else {
  app.build(err => { if (err) { console.error(err.message); process.exit(1) } })
}

:memo: Add scripts — Add this to package.json.

"scripts": {
  "dev": "metalsmith-dev-server metalsmith.js --watch web"
}

// This example runs the Metalsmith app in `metalsmith.js`,
// and auto-rebuilds when files in `web/` is changed.

:red_car: Start the server — Use your new script:

npm run dev

Or to specify another port:

npm run dev -- --port 3820

Also see

metalsmith-start is a more complex solution with other features, such as production mode.

Thanks

metalsmith-dev-server © 2017+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz