davidensinger.github.io

David Ensinger is a Front End Developer from Columbus, OH

This website runs on Jekyll, a blog-aware, static site generator, with a lot of help from Grunt.

The Stack

• Bower: Manage front end dependencies
• Bundler: Manage Ruby dependencies
• GraphicsMagick: Required for grunt-responsive-images
• Grunt: Automate Jekyll development and build tasks
• Node.js and NPM: Required for Grunt
• Ruby: Required for Jekyll.

Recommended Setup

• Ensure that Command Line Tools for Xcode is installed and up-to-date
  • To install: xcode-select --install
• Manage your Ruby enviroments with RVM or rbenv
  • To update RVM: rvm get stable
• Make sure your installs of Node.js and NPM are up-to-date
• Install the command line interface for Grunt
  • To install: npm install -g grunt-cli
• Install Bower
  • To install: npm install -g bower
• Make sure you’ve installed GraphicsMagic, presumably via Homebrew:
  • To install: brew install GraphicsMagick

Install Dependencies

Run the following commands to install the dependencies:

• Bower: bower install
• Bundler: bundle install
• NPM: npm cache clean and then npm install

Grunt Workflow

• grunt stage: Copies the loadFont() and loadCSS() functions from Bower to the Jekyll _includes directory
• grunt serve: Compiles all files and opens the site in your default browser. A watch task watches for changes to files, recompiles if necessary, and injects the changes into the browser with BrowserSync
• grunt check: Checks for outdated dependencies with grunt-dev-update, Javascript code quality with JSHint, Sass code quality with SCSS-Lint, and Jekyll health with jekyll doctor
• grunt build: Builds an optimized site to the dist directory
• grunt deploy: Runs the perf task, runs the build task, and then deploys it
• grunt perf: Checks Google’s PageSpeed Insights and then runs Phantomas to return and record site metrics.

Hat Tip

The site was scaffolded by Yeoman and generator-jekyllrb.