Basic blog like layout

Site directory:

assets:
   style.css
   scripts.js
pages:
    index.html
    about.html
posts:
    2016-01-01-happy-new-year.html
    2016-01-02-another-post.html
    2016-01-03-tofu.html
layouts:
    page.handlebars
    post.handlebars
helpers:
    helpers.js
Makefile

Each file in _posts looks like this:

---
title: Tofu: the bean that thinks its a meat
date: 2016-01-01
summary: A post about tofu
---
Lots of info about tofu here.

And the index file looks something like:

<h1>This is a blog</h1>
{{#each posts}}
<article>
<header><a href="{{@key}}.html">{{title}}</a></header>
<p>{{summary}} </p>
</article>
{{/each}}

The layout(s) in layouts contain headers and footer, which uses the js and css files in assets.

We'll use a Makefile to generate content and copy assets to a new www folder. Note that we use yaml-cat to generate an intermediary list of post metadata.

Make is an old-school way to generate files that includes dependency checking – using a Makefile means we'll only generate posts or pages that have changed.

The basic format of a Makefile is:

file: dependency
	command that creates file from dependency

Makefiles, like blogs, are usually written in reverse chronological order.

# We're going to invoke taft a couple of times, here are some general flags.
TAFTFLAGS = --helper '_helpers/*.js' \
	--dest-dir $| \
	--layout '_layouts/*.handlebars'

# All the tasks that go into generating the site
all: pages posts www/assets

# These phony task don't name the files they generate specifically.
# That means they'll run every time make is called
# A more sophisticated file for a complicated site might only build files that have changed.
.PHONY: pages posts

# Generate the posts
posts: _layouts/post-layout.handlebars | www
	taft $(TAFTFLAGS) _posts/*

# Generate the html pages, e.g. the index, the about page, etc.
pages: $(data)/posts.yaml $(wildcard _pages/*) _layouts/page-layout.handlebars | www
	taft --data $< $(TAFTFLAGS) _pages/*

# Generate a yaml file with post metadata. Each metadata will be keyed to the post's slug (e.g. '2016-01-03-tofu').
posts.yaml: $(wildcard _posts/*)
	yaml-cat --no-ext --cwd posts posts/* > $@

# This could be much fancier, with browserify, css minification, etc.
www/assets: assets | www
	cp $< $@

# And of course, create the destination folder.
www: ; mkdir -p $@

Now just run make and the blog appears in www. It will look like the following:

> make
mkdir -p www
yaml-cat --no-ext --cwd posts posts/* > posts.yaml
taft --data posts.yaml --helper '_helpers/*.js' --dest-dir www --layout '_layouts/*.handlebars' pages/*
taft --helper '_helpers/*.js' --dest-dir www --layout '_layouts/*.handlebars' posts/*
cp assets www/assets