Migration to Jekyll: Understanding Yeoman
30 October 2013
I’ve been wanting to wrap my head around Yeoman for a while now. It seemed every time I found a moment of free time to dive into understanding Yeoman, my brain was already fried from that day’s job-related development work. I continued to spin-up a generic “webapp” generator & failed to understand the seemingly complex ideas behind Yeoman. This process continued until now, when I decided to move my personal site to GitHub pages & Jekyll. I wanted to share my experience and provide a brief overview/tutorial of using Yeoman.
It seems that in order for me to finally understand the beauty of Yeoman, all I needed was an end goal: a Jekyll site. It turns out this is exactly why Yeoman was created — to help you quickly achieve your goal by generating a lot of the initial boilerplate code for you.
npm install -g yonpm install -g generator-jekyllrbcd path/to/site/directoryyo jekyllrbgrunt server
Assuming you already have Node & npm installed (I recommend using homebrew), that’s all it takes to get a Yeoman-generated, Grunt-compiling Jekyll site running on your local machine. I am utilizing the jekyllrb generator that I found via the Yeoman community generators page.
A nice thing about the jekyllrb generator is that it has built-in configuration options for including/excluding Sass, Compass, Bootstrap, H5BP & CoffeeScript — as well as other tools. This step-by-step approach to generating my Jekyll site through a Yeoman generator helped me understand the benefit of Yeoman generators. Creating & configuring my Jekyll site became very easy.
bower install jquery
The above installs jQuery into the
_bower_components directory of my project. I can then load that dependency into my project with a traditional script tag.
The Grunt tasks included with the jekyllrb generator also include support for Usemin. Usemin allows for replacing references to non-optimized scripts & stylesheets (typically found in development environments) with references to optimized scripts & stylesheets for production.
<!-- The following Usemin block... --><!-- build:js(app) /assets/js/app.js --><script src="/_bower_components/modernizr/modernizr.js"></script><script src="/_bower_components/jquery/jquery.js"></script><!-- endbuild --><!-- ...is replaced with a single minified script tag. --><script src="/assets/js/f7f2.app.js"></script>
grunt build task produces a compiled, concatenated, minified, production-ready version of my Jekyll site. Once that build is created, I can use a task provided by grunt-build-control to automate my deployment to GitHub pages.
All in all I’m very happy to finally have a high-level understanding of the benefits of Yeoman. I look forward to exploring creating custom generators of my own to speed up my workflow, as well as streamline project spin-up for my coworkers.
If you have any questions or comments about using Yeoman, Grunt or the jekyllrb generator, feel free to leave comments below.
Questions, comments, suggestions? Open an issue. Enjoy this content? Please consider sharing it.