Skip to content

Migration to Jekyll: Understanding Yeoman

Ive 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 days 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 yo
npm install -g generator-jekyllrb
cd path/to/site/directory
yo jekyllrb
grunt server

Assuming you already have Node & npm installed (I recommend using homebrew), thats 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.

The Yeoman workflow also includes the use of Grunt & Bower. Bower is a package manager. In short, it simplifies the process of downloading & including libraries on which your web app/site may depend.

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.

Grunt, as described on its home page, is a JavaScript task runner. For me, it was an easy way to automate my Sass & JavaScript compilation & concatenation as well as deployment scripts to my GitHub pages hosting. Running the task grunt server spins up a local server to serve my Jekyll site into my browser. With the aforementioned jekyllrb generator, the server task also comes ready to watch my asset files to compile & LiveReload my Sass & JavaScript.

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>

Running the 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.

grunt buildcontrol:pages

All in all Im 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.