Open research

In the spirit of free and open source software the central topic of this site is to make my research open to the public. My methodology is freely available via the internet, along with any data or results extracted or derived from them. This permits collaboration, which anyone may participate at any level of the project. So feel free to contribute on Github.

Homepage » Using Static Site Generators for web development

Using Static Site Generators for web development

Static Site Generators

If you want to find out more on the term “Static Site Generators” read this very helpful article: “An Introduction to Static Site Generators”.
I personally tend to use Jekyll or Middleman but let me give you an overview:

Criteria frank greendog jekyll mercury Middleman nanoc serve StaticMatic
Language Ruby Ruby Ruby Ruby Ruby Ruby Ruby Ruby
Template support Haml, Sass, Less, Erb, Liquid, Markdown by using Tilt (frank) Haml, Sass, HMTML5 Boilerplate (green dog) Compass, Liquid, Markdown, Haml, Sass (jekyll) Haml, Sass, Less, Erb, Liquid, Markdown by using Tilt (mercury) Haml, Sass, Less, Erb, Liquid, Markdown by using Tilt (Haml by extension) (middleman) Markdown (everything else can be added manually) (nano) Compass, Haml, Sass, Less, Erb, Liquid, Markdown by using Tilt (serve) Haml, Sass, Compass (staticMatic)
Packages / (frank) Rails, Builder (greendog) Foreman (jekyll) / (mercury) Bundler, Sprockets (middleman) / (nanoc) Coffee Script (serve) / (staticmatic)
Webserver Mongrel, Rack, Tilt (frank) Rack (greendog) Thor (jekyll) Rack (mercury) Rack, Thor (middleman) has to be compiled (nanoc) Rack, Tilt (serve) Rack (staticmatic)
last updated (checked August 29th, 2011) August 4th, 2010 (frank) July 27th, 2011 (greendog) July 16th, 2011 (jekyll) June 29th, 2011 (mercury) August 22th, 2011 (Middleman) August 15th, 2011 (nanoc) August 11th, 2011 (nanoc) November 15th, 2010 (staticMatic)

Frank

Installation
rvm create gemset <name>
rvm use 1.9.2@<name>
gem install frank
# create a project
frank new <projectName>
# start server
frank server
# frank supports Haml/Sass out of the box
  1. Edit setup.rb to set your server options, folder names for static/dynamic content, and layouts for your views.
  2. Stash your static files (images, flash movies, etc) in the folder that you set as [static_folder].
  3. Frank will look for files in the [dynamic_folder] first and try to compile them. Example: a request for /css/johndoe.css will look for a file in [dynamic_folder]/css/ named johndoe. Frank uses the file extension to determine the correct compiler.

Greendog

Greendog is just a template that enables Rails to support HTML5 Boilerplate, Haml, Sass etc.. It will be kinda outdated when Rails 3.1 comes out because of its natural support for those formats. Therefore I did not see any need to test.

Jekyll

Jekyll comes really, really basic first. You have to create your own skeleton (or use one from Github). Supports migrating from other platforms like Movable Type, Drupal, WordPress, Marley and Typo. It supports Pagination, Permalinks, Tagging etc.. Therefore if you want i.e. build a blog Jekyll seems to be perfect.

Installation

rvm create gemset <name>
rvm use 1.9.2@<name> gem install jekyll
get a jekyll skeleton
jekyll html5-boilerplate skeleton
git clone https://github.com/ericdfields/HTML5-Boilerplate-Jekyll-Template.git
alternative, but way older git clone https://github.com/philippbosch/jekyll-skeleton.git
alternative, but more complex git clone https://github.com/robbevan/jekyll-skeleton.git
install foreman for process management gem install foreman
touch Procfile
add those lines
jekyll: jekyll --server
compass: compass watch
start the process foreman start

Work Environment

change .scss to .Sass syntax
vim config.rb
uncomment this line preferred_syntax = :sass
update all files to .sass and delete the .scss files
sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass
to auto compile the files I generated a Procfile, but you first have to install Foreman
gem install foreman
touch Procfile
vim Procfile
add
jekyll: jekyll --server
compass: compass watch
one of the biggest disadvantage is that jekyll does not work with Haml files though, I didn’t manage to get a workaround/hack.

Configuration example
url: http://localhost:4000 #XXX
title: Site Name #XXX
description: Tag line #XXX
author: A. U. Thor #XXX
email: a.u.thor@example.com #XXX
analytics_id: #Google Analytics ID : UA-xxx-xxx  

auto: false
lsi: false
pygments: false
server_port: 4000
markdown: maruku

maruku:
  use_tex: false
  use_divs: false
  png_dir: img/tex
  png_url: /img/tex

Source

Templating

More sites can be found here.

Themes
Deployment
Documentation
Articles
Extensions/Plugins
Example sites

Mercury

Mercury is last updated June, 29th 2010. It seems a little outdated and the documentation has quite some bugs.
Middleman Getting Started Tutorial

Installation

gem install mercury
create a new folder for your project mercury <projectName>
create your Haml files
cd <projectName>
touch wwwroot/index.haml
i.e. will not be recognized run the webserver cd back to the root directory and start by typing… `mercury` the web server runs on `http://localhost:9292`

Middleman

Installation

rvm create gemset <name>
rvm use 1.9.2@<name>
gem install middleman
start a new site middleman init <projectName>
alternative with config.ru middleman init <projectName> --rack
alternative with config.ru and GEMFILE middleman init <projectName> --rack --bundler
alternative with HTML5 boilerplate middleman init <projectName> --template=html5
show help middleman init --help

Exporting

Exporting to i.e. Heroku middleman build

Structure

If you are using i.e. Haml you have to generate and use layout.html.haml and index.html.haml files they could look like this (otherwise your site will not be rendered)

More Commands

middleman init
middleman server
middleman build

Templates
Example sites

nanoc

gem install nanoc
nanoc create_site <projectName>
nanoc compile
add markdown support gem install kramdown
compile the site nanoc compile
run the webserver nanoc view
open the url http://localhost:3000/

Serve

Serve is quite complex. It has a similar “Views” part just like Rails (Views, Partials & Layouts). Sass and Compass are already built-in, content can also be delivered static or dynamic.

Installation

gem install serve start the webserver serve the webserver is available at http://localhost:4000
create a new project in the project directory serve create <projectName>
to enable Haml, Sass etc. you have to edit the “Gemfile” vim Gemfile
to install the missing Gems you have to install “Bundler” gem install bundler
and install the missing Gems bundle install

statis

I still have to test stasis

StaticMatic

StaticMatic comes really plain. Haml and Sass support worked out of the box.

Installation

gem install staticmatic
staticmatic setup <projectName>
start the webserver staticmatic preview .
the webserver runs on http://localhost:3000

Articles

Cookbooks