Static website builder using Jade + Stylus

README.md

veil

veil is a very simple boilerplate for writing static sites.

It uses Jade for templating, Stylus for CSS generation and GNU Make for the build system.

Install

# Create your project directory
$ mkdir my-website; cd my-website

# Download the Makefile
$ wget https://gist.githubusercontent.com/madx/9254642/raw/fc3820268c4043948cd15f8c5c1eb562e5765bbf/Makefile

# Launch the setup task
$ make setup

default.jade

block meta

doctype html
html(lang="en")
  head
    title= title
body
  block content

index.jade

extends ../layouts/default

append content
  h1 Hello world!

append meta
  - var title = "Home"

Makefile

PAGES       = $(shell find sources/pages -name *.jade 2>/dev/null)
LAYOUTS     = $(wildcard sources/layouts/*.jade)
STYLESHEETS = $(filter-out %_.styl,$(wildcard sources/stylesheets/*.styl))
OTHER       = $(shell find static -type f 2>/dev/null)

HTML   = $(addsuffix .html,\
				 	 $(basename $(PAGES:sources/pages%=output%)))
CSS    = $(addsuffix .css,\
           $(basename $(STYLESHEETS:sources/stylesheets%=output/assets/css%)))
STATIC = $(OTHER:static/%=output/assets/%)

OUTDIR    = output
ASSETSDIR = $(OUTDIR)/assets
CSSDIR    = $(ASSETSDIR)/css

all: html css static

clean:
	@echo -e "\e[33m* Cleaning\e[0m"
	@rm -rf $(OUTDIR)

html: $(HTML)
css:  $(CSS)
static: $(STATIC)

$(OUTDIR):
	@mkdir -p $(OUTDIR)

$(ASSETSDIR):
	@mkdir -p $(ASSETSDIR)

$(CSSDIR):
	@mkdir -p $(CSSDIR)

$(OUTDIR)/%.html: sources/pages/%.jade | $(OUTDIR)
	@echo -e "\e[33m* Building ${@:$(OUTDIR)/%=%}\e[0m"
	@mkdir -p $(shell dirname $@)
	@jade -P -o $(shell dirname $@) $<

$(CSSDIR)/%.css: sources/stylesheets/%.styl | $(CSSDIR)
	@echo -e "\e[33m* Building ${@:$(OUTDIR)/%=%}\e[0m"
	@stylus -u autoprefixer-stylus -o $(CSSDIR) $<

$(ASSETSDIR)/%: static/% | $(ASSETSDIR)
	@echo -e "\e[33m* Asset: ${@:$(OUTDIR)/%=%}\e[0m"
	@mkdir -p $(shell dirname $@)
	@cp $< $(shell dirname $@)

setup:
	@echo -e "\e[33m* Installing dependencies\e[0m"
	@sudo npm install -g jade stylus autoprefixer-stylus
	@
	@test -d sources && { echo -e "\n\e[31mAlready set up\e[0m\n"; exit 1; } || true
	@echo -e "\e[33m* Creating directory structure\e[0m"
	@mkdir -p sources/{layouts,pages,stylesheets} static
	@
	@echo -e "\e[33m* Installing normalize\e[0m"
	@wget https://raw.github.com/skw/normalize.stylus/master/normalize.styl -O sources/stylesheets/normalize_.styl
	@sed -i "9s/^/\/\//" sources/stylesheets/normalize_.styl
	@
	@echo -e "\e[33m* Bootstraping files\e[0m"
	@wget https://gist.githubusercontent.com/madx/9254642/raw/472aaca8e77cbcb46020304c171d454273aabd9e/default.jade -O sources/layouts/default.jade
	@wget https://gist.githubusercontent.com/madx/9254642/raw/d362c93643ff011ac24da25e0fc74812bb123901/index.jade -O sources/pages/index.jade
	@wget https://gist.githubusercontent.com/madx/9254642/raw/4613449edd3729cb7a8f68e1bd2ce62265975ee5/stylesheet.styl -O sources/stylesheets/stylesheet.styl

.PHONY: all clean setup

stylesheet.styl

@import "normalize_"