Skip to content

Instantly share code, notes, and snippets.

@xzyfer
Created February 23, 2016 00:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save xzyfer/de0c91ad8b89dacff3ac to your computer and use it in GitHub Desktop.
Save xzyfer/de0c91ad8b89dacff3ac to your computer and use it in GitHub Desktop.
metalsmith workflow
layout title
main.hbs
About

About

src/pages/linters/index.md

//
// lib/build.js
//
// es6 generator polyfill for node < 1
var supportsGenerators = require('node-generator-detector')();
if (!supportsGenerators) {
require("harmonize")(["harmony-generators"]);
}
var path = require('path');
var metalsmith = require('metalsmith');
var markdown = require('metalsmith-markdownit');
var layouts = require('metalsmith-layouts');
var sass = require('metalsmith-sass');
var cssmin = require('metalsmith-clean-css');
var when = require('metalsmith-if');
var server = require('metalsmith-browser-sync');
var ignore = require('metalsmith-ignore');
var move = require('metalsmith-move-up')
var isProdction = process.env.NODE_ENV === 'production';
var isDevelopment = !isProdction;
metalsmith(path.join(__dirname, '../'))
.source('src')
.destination('dist')
.use(markdown())
.use(layouts({
engine: 'handlebars',
directory: path.join('src', 'layouts'),
}))
.use(sass({
outputStyle: 'expanded',
includePaths: [
path.join('src', 'css'),
path.join('node_modules'), ],
}))
.use(move('pages/**/*'))
.use(when(isProdction, cssmin({
files: '**/*.css'
})))
.use(when(isDevelopment, server({
server: 'dist',
files: ['src/**/*.scss', 'src/**/*.md', 'src/**/*.hbs'],
})))
.use(ignore(['**/*.hbs', ]))
.build(function(err) {
if (err) throw err;
});
layout title
main.hbs
Contact

Contact

src/pages/linters/about/contact.md

//
// lib/deploy.js
//
// es6 generator polyfill for node < 1
var supportsGenerators = require('node-generator-detector')();
if (!supportsGenerators) {
require("harmonize")(["harmony-generators"]);
}
var path = require('path');
var metalsmith = require('metalsmith');
var cssmin = require('metalsmith-clean-css');
var s3 = require('./metalsmith/s3');
metalsmith(path.join(__dirname, '../'))
.source('dist')
.destination('dist')
.clean(false)
.use(cssmin({
files: '**/*.css'
}))
.use(s3({
endpoint: 's3-us-west-2.amazonaws.com',
bucket: 'my-s3-bucket',
}))
.build(function(err) {
if (err) throw err;
});
layout title
main.hbs
Page title!

Big heading

src/pages/index.md

<!-- src/layouts/main.hbs -->
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{title}}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<!-- TODO: html5shiv, maybe? -->
</head>
<body>
<main>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/about/contact">Contact</a></li>
</ul>
</nav>
<section>
{{{contents}}}
</section>
</main>
<script src="/js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
//
// src/css/main.scss
//
*, *:before, *:after {
box-sizing: border-box;
}
{
"name": "foo",
"version": "0.0.0",
"main": "gulpfile.js",
"scripts": {
"dev": "node ./lib/build.js",
"deploy": "NODE_ENV=production node ./lib/build.js && node ./lib/deploy.js"
},
"author": "xzyfer",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"async": "^1.5.2",
"aws-sdk": "^2.2.29",
"gulp": "3.9.0",
"handlebars": "^4.0.5",
"harmonize": "^1.4.4",
"metalsmith": "2.1.0",
"metalsmith-browser-sync": "^1.1.0",
"metalsmith-clean-css": "^2.0.0",
"metalsmith-if": "^0.1.1",
"metalsmith-ignore": "^0.1.2",
"metalsmith-layouts": "^1.4.2",
"metalsmith-markdownit": "^0.3.0",
"metalsmith-move-up": "^1.0.0",
"metalsmith-sass": "^1.3.0",
"mime-types": "^2.1.9",
"node-generator-detector": "^0.2.1",
"node-sass": "^3.4.2",
"normalize.css": "^3.0.3"
}
}
//
// lib/metalsmith/s3.js
//
var mime = require('mime-types');
var async = require('async');
var AWS = require('aws-sdk');
module.exports = plugin;
function plugin(config) {
return function(files, metalsmith, done) {
var s3 = new AWS.S3({
endpoint: config.endpoint,
});
async.each(Object.keys(files), function(file, cb) {
console.log('Writing', file, 'to S3');
s3.putObject({
Key: file,
Bucket: config.bucket,
Body: files[file].contents.toString(),
ContentType: mime.lookup(file),
ACL: 'public-read',
}, function(err) {
if (err) console.log('Error uploading', file, 'to S3');
else console.log('Successfully wrote', file, 'to S3');
cb(err);
})
}, function(err) {
done(err);
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment