Static/Front-End Web App Site Generators

Jekyll.md

Prereqs

• Ruby (personally prefer RVM for installation)
• Git

===

Jekyll

	gem install jekyll
	jekyll new <PROJECT_DIRECTORY_NAME>
	cd <PROJECT_DIRECTORY_NAME>
	jekyll serve [--watch]

Deploying your Jekyll site to Github Pages

(assuming gh-pages project setup)

In your _config.yml, change baseurl to your project's repo name **(with the trailing slash):

  baseurl: "/PROJECT_REPO_NAME"

Then in your terminal:

  git checkout -b gh-pages
  git push origin gh-pages

Middleman.md

Prereqs

• Ruby (personally prefer RVM for installation)
• Git

===

Middleman

	gem install middleman
	middleman init <PROJECT_DIRECTORY_NAME>
	cd <PROJECT_DIRECTORY_NAME>
	middleman server

To build and compile your middleman site:

  middleman build

Some configurations I use

Inside your project's config.rb:

  configure :development do
    active :livereload
  end
  
  configure :build do
    activate :minify_css
    activate :minify_javascript
    activate :asset_hash
    activate :relative_assets
  end

Deploying a Middleman site to Github Pages

Add the following line to your Middleman project's Gemfile:

  gem "middleman-deploy"

Then add the following to config.rb:

  activate :deploy do |deploy|
  	deploy.method = :git
  end

Then in the terminal

  middleman build
  middleman deploy

Yeoman.md

Prereqs

• Node.js

    brew install node

• NPM (node package manager), should come with Node.js

• Git

===

Yeoman and the yo command line tool

  npm install -g yo

Older versions of npm (< 1.2.10) also require a manual install of grunt-cli and bower

Yeoman allows the user to install generator packages that can be used to scaffold different web frameworks (e.g. Angular, Wordpress, etc.)

	npm install -g <generator-name>

	npm install -g generator-webapp
	yo webapp

	npm install -g generator-backbone
	yo backbone [app-name]
	yo backbone:model blog

To start working with your newly scaffolded site:

	grunt serve

To run any tests:

	grunt test

Build a compiled version to a dist directory that could be deployed

	grunt [build]

Installing additional Bower and Grunt Packages

	bower install <package> --save-dev

	npm install <grunt module> --save-dev

Deploying a Grunt Web App [to Github Pages]

  npm install grunt-build-control --save-dev

Then add to your Gruntfile.js:

	...
	grunt.initConfigt({
	  ...
	  buildcontrol: {
	  	options: {
	  	  dir: '<%= config.dist %>',
	  	  commit: true,
	  	  push: true
	  	},
	  	pages: {
	  	  options: {
	  	    remote: 'git@github.com:USERNAME/REPO.git',
	  	    branch: 'gh-pages'
	  	  }
	  	}
	 }
 });

  grunt buildcontrol:pages