Building a blog on github. part 2. 21 Sep 2014

If you missed it, here is part 1.

Enter scaffolding tools

What is a scaffolding tool?

Okay, Jekyll is a static page generator and gives you the ability to transform your markdown posts into html pages, but from a reusability point of view, it is sort of limited. Are you going to use jekyll for all your apps? Maybe, maybe not.

That’s why you may want to look for a scaffolding tool. Yes, you know; those metal or bamboo structures around buildings when they are getting built. Doesn’t matter which kind of building / app you want to build, you can use a scaffold.

Okay, where can I find one?

Yeoman is one of them. Want to build a blog with Jekyll? Yeoman’s got your back. Want to build an Angular app? Yeoman’s got your back. It has more than a thousand generators to help you build the app or website you want to build. Oh, and a generator is just a bunch of recipes, they have generators / recipes for all kinds of projects.

Enter Yeoman.

Yeoman is comprised of a set of CLI tools that are based on Node.js – so yes, if you haven’t installed it yet, you may need to. The package can be installed with npm. The [getting started] will walk you through the steps.

Install the tools:

npm install --global yo

Install a generator (e.g. jekyll):

npm install --global generator-jekyllrb

Get started, please note our little friend will ask you some questions so please pay attention.

$ yo jekyllrb

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

This generator will scaffold and wire a Jekyll site. Yo, Jekyllrb!

Tell us a little about yourself. ☛
[?] Name: Damien Nozay
[?] Email: damien@example.com
... more prompts ...

And when it’s done, you can see what it has generated for you:

$ git status -uall
On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    .bowerrc
    .csslintrc
    .editorconfig
    .gitattributes
    .gitignore
    .jshintrc
    Gemfile
    Gemfile.lock
    Gruntfile.js
    _config.build.yml
    _config.yml
    app/_layouts/default.html
    app/_layouts/post.html
    app/_posts/2014-09-22-welcome-to-jekyll.md
    app/_posts/2014-09-22-yo-jekyllrb.md
    app/_scss/main.scss
    app/_scss/readme.md
    app/_scss/syntax.scss
    app/index.html
    app/js/main.23ed95cc.js
    bower.json
    package.json

nothing added to commit but untracked files present (use "git add" to track)

If we were using jekyll directly rather than yo, we would be starting the edit-compile-serve / edit-preview loop with jekyll serve; with the inputs I gave to yo, I chose to use grunt which takes care of that.

grunt serve

And here is our shiny new blog: