expalmer/Estrutura de arquivos do Blog.

## blog-src-css-style.css
* {
  padding: 0;
  margin: 0;
}
body {
  margin: 30px auto;
  max-width: 600px;
  text-align: center;
  font-size: 100%;
  font-family: 'Georgia', 'Arial', serif;
  color: #111;
  background: #fff;
}

a {
  color: #999;
}

header,
section,
article,
footer {
  margin-top: -1px;
  padding: 20px;
  border: solid 1px #eee;
}

ul li {
  list-style: none;
}

ul li a {
  display: inline-block;
  margin: 5px;
  color: #FF0050;
}

## blog-src-index
---
template: index.hbt
---

Corpo da página index

## blog-src-posts-post-1
---
title: Meu Primeiro Post com Metalsmith
template: posts.hbt
---

Corpo do Post 1

## blog-src-posts-post-2
---
title: Meu Segundo Post
template: posts.hbt
---

Corpo do Post 2

## blog-templates-index
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blog Index</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Index</h1>
  </header>
  <section>
    {{{contents}}}
  </section>
  <section>
    <h2>Lista dos Posts</h2>
    <ul>
      {{#each collections.posts }}
        <li>
          <a href="{{this.path}}/index.html" title="{{this.path}}">{{this.title}}</a>
        </li>
      {{/each}}
    </ul>
  </section>
  <footer>
    made with <a href="http://www.metalsmith.io/">metalsmith</a>
  </footer>
</body>
</html>

## blog-templates-posts.hbt
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blog Posts</title>
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
  <header>
    <a href="../index.html">Voltar para o Index</a>
  </header>
  <article>
    <h1>{{this.title}}</h1>
    {{{contents}}}
  </article>
  <footer>
    made with <a href="http://www.metalsmith.io/">metalsmith</a>
  </footer>
</body>
</html>

## Estrutura de arquivos do Blog.
[blog]
--- index.js
--- package.json
--- [src]
------- index.md
------- [posts]
------------- post-1.md
------------- post-2.md
--- [templates]
------- index.hbt
------- posts.hbt

## index.js
var Metalsmith   = require('metalsmith');
var collections  = require('metalsmith-collections');
var markdown     = require('metalsmith-markdown');
var templates    = require('metalsmith-templates');
var permalinks   = require('metalsmith-permalinks');

Metalsmith(__dirname)
  .use(collections({             // nos dará acesso a um objeto chamado 'collections' ...
      posts: {                   // ... com todos os posts
          pattern: 'posts/*.md', // aqui é o lugar onde estão nossos posts
          sortBy: 'date',        // ordenar por data
          reverse: true          // ordenar da data mais recente para a mais antiga
      }
  }))
  .use(markdown())        // vai ler todos arquivos .md e transformar em um objeto
  .use(permalinks({       // vai mudar o arquivo destino no padrão {title}/index.html
      pattern: ':title',
      relative: false
  }))
  .use(templates('handlebars')) // nossos objetos serão passados para o handlebars
  .destination('./build')       // diretório destino
  .build(function(err, files) { // escreve os aquivos no diretório build
    if (err) { throw err; }     // um handler de erro, sempre é bom
  });

## node index.js
node index.js

## npm install
npm install

## package.json
{
  "name": "blog",
  "description": "meu blog legal",
  "version": "0.0.1",
  "dependencies": {
    "handlebars": "^2.0.0",
    "metalsmith": "^0.11.0",
    "metalsmith-collections": "^0.6.0",
    "metalsmith-markdown": "^0.2.1",
    "metalsmith-permalinks": "^0.4.0",
    "metalsmith-templates": "^0.5.2",
    "metasmith": "0.0.1"
  }
}
	* {
	padding: 0;
	margin: 0;
	}
	body {
	margin: 30px auto;
	max-width: 600px;
	text-align: center;
	font-size: 100%;
	font-family: 'Georgia', 'Arial', serif;
	color: #111;
	background: #fff;
	}

	a {
	color: #999;
	}

	header,
	section,
	article,
	footer {
	margin-top: -1px;
	padding: 20px;
	border: solid 1px #eee;
	}

	ul li {
	list-style: none;
	}

	ul li a {
	display: inline-block;
	margin: 5px;
	color: #FF0050;
	}
	---
	title: Meu Primeiro Post com Metalsmith
	template: posts.hbt
	---

	Corpo do Post 1
	---
	title: Meu Segundo Post
	template: posts.hbt
	---

	Corpo do Post 2
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Blog Index</title>
	<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	<header>
	<h1>Index</h1>
	</header>
	<section>
	{{{contents}}}
	</section>
	<section>
	<h2>Lista dos Posts</h2>
	<ul>
	{{#each collections.posts }}
	<li>
	<a href="{{this.path}}/index.html" title="{{this.path}}">{{this.title}}</a>
	</li>
	{{/each}}
	</ul>
	</section>
	<footer>
	made with <a href="http://www.metalsmith.io/">metalsmith</a>
	</footer>
	</body>
	</html>
	[blog]
	--- index.js
	--- package.json
	--- [src]
	------- index.md
	------- [posts]
	------------- post-1.md
	------------- post-2.md
	--- [templates]
	------- index.hbt
	------- posts.hbt
	var Metalsmith = require('metalsmith');
	var collections = require('metalsmith-collections');
	var markdown = require('metalsmith-markdown');
	var templates = require('metalsmith-templates');
	var permalinks = require('metalsmith-permalinks');

	Metalsmith(__dirname)
	.use(collections({ // nos dará acesso a um objeto chamado 'collections' ...
	posts: { // ... com todos os posts
	pattern: 'posts/*.md', // aqui é o lugar onde estão nossos posts
	sortBy: 'date', // ordenar por data
	reverse: true // ordenar da data mais recente para a mais antiga
	}
	}))
	.use(markdown()) // vai ler todos arquivos .md e transformar em um objeto
	.use(permalinks({ // vai mudar o arquivo destino no padrão {title}/index.html
	pattern: ':title',
	relative: false
	}))
	.use(templates('handlebars')) // nossos objetos serão passados para o handlebars
	.destination('./build') // diretório destino
	.build(function(err, files) { // escreve os aquivos no diretório build
	if (err) { throw err; } // um handler de erro, sempre é bom
	});
	{
	"name": "blog",
	"description": "meu blog legal",
	"version": "0.0.1",
	"dependencies": {
	"handlebars": "^2.0.0",
	"metalsmith": "^0.11.0",
	"metalsmith-collections": "^0.6.0",
	"metalsmith-markdown": "^0.2.1",
	"metalsmith-permalinks": "^0.4.0",
	"metalsmith-templates": "^0.5.2",
	"metasmith": "0.0.1"
	}
	}