Crayon Bits Blog

User Experience, Frontend, Code and Life

Portfolio - A gulp Project

gulp code
Portfolio Site Github Link

Overview

This is so meta! Describing this site as a project that is displayed on this site! A static site generated by gulp for my portfolio, blog and design bits.

  • Front-end - jQuery + sass + markdown + handlebars
  • Backend - None
  • Task runner - gulp

The Story

I have wanted to create a simple portfolio site for a while now. I kept delaying it, partly due to procrastination and partly because I always had other projects that appeared to be higher priority, until a few weeks ago.

While working on Calorious I reached a point where I felt like I had to take a break from it. Anyone in my profession is well aware of this feeling. Even though you are excited about the project you need to take a step back and regroup. With this realization, I thought why not use this opportunity to do something I’ve always wanted to do? Build my portfolio site!

Requirements

Thus, I sat down to create a preliminary list of requirements.

  • Simplicity - I wanted to keep the site simple, both visually and technically. I didn’t want to use a heavy framework for front end.
  • Versatile - I wanted to showcase all my work. This could include writings, projects, designs or even sketches but didn’t want to have a complicated hierarchy of navigation.
  • DRY - even though I knew that the site I had in mind did not warrant any sophisticated framework, I did want to have the ability of using templates so the site is maintainable.
  • Adding content should be easy - I was envisioning adding content quite frequently once I had the site up and running so I needed something where the process would be as painless as possible.

Gulp to the rescue

I knew from experience that most of my requirements can be fulfilled just by gulp. I could potentially use it to create a static site generator. What I wasn’t sure about was weather I could wire something up for layouts in gulp without putting in a lot of effort. Because let’s face it, if it is more than a few lines of code, why wouldn’t I just use something like Docpad?

The thought process

Initial decisions were relatively easy.

  • For creating content I would use markdown. I can write stuff fast in markdown and gulp can spit out HTML based on my styles.
gulp.task('markup:base', function(){
  return gulp.src([paths.src.base+'*.html'])
    .pipe(gulp.dest(paths.target.base))
    .pipe(plugins.connect.reload());
});
  • for layout and templating I’d use handlebars. This will help me reuse my code and follow dry principles.
gulp.task('script', function(){
  return plugins.streamqueue({objectMode: true},
    //vendor files first
    gulp.src(paths.vendor.js),
    
    //project specific js files
    gulp.src([paths.src.base+paths.src.js])
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default')),
    
    //templates
    gulp.src([paths.src.base+paths.src.templates])
      .pipe(plugins.handlebars())
      .pipe(plugins.wrap('Handlebars.template(<%= contents %>)'))
      .pipe(plugins.declare({
        namespace: 'pApp.templates',
        noRedeclare: true, // Avoid duplicate declarations 
      }))
      .pipe(plugins.concat('templates.js'))
  )
  .pipe(plugins.sourcemaps.init())
  .pipe(plugins.concat('main.js'))
  .pipe(plugins.uglify())
  .pipe(plugins.sourcemaps.write())
  .pipe(gulp.dest(paths.target.base+paths.target.js))
  .pipe(plugins.connect.reload());
});
  • my main problem now was how do I make my home page aware of the content?
    • If I could somehow have gulp create a json dump of all my content’s meta data, I could then read it from any page and display / link it correctly.
    • After some research I realized that I could do exactly that by dumping the frontmatter of my markdown files.
/*
* function to generate json
***********************************/
function dumpJson(directory){
  return gulp.src(paths.src.base+paths.src[directory], 
    {base: paths.src.base + 'markup'})
    .pipe(plugins.frontMatter({property: 'meta'}))
    .pipe(plugins.data(function(file){
      file.meta.path = file.relative;
      if(!file.meta.createDate)
        file.meta.createDate = file.stat.birthtime;
    }))
    .pipe(plugins.pluck('meta', directory+'.json'))
    .pipe(plugins.data(function(file){
      file.contents = new Buffer(JSON.stringify(file.meta))
    }))
    .pipe(gulp.dest(paths.target.base+'content/'));
}

gulp.task('contentJson', function(){
  return dumpJson('allMd')
    .pipe(plugins.connect.reload());
});

I now had a rudimentary version of docpad like system, where in my markdown files, I could specify

  • what layout to use
  • what tile image to use
  • what cover image to use
  • and pretty much whatever I wanted to surface up about the articles.

So there you have it. A fully functional simple static site generator where most of the heavy lifting is done by Gulp! To take a look at the full gulp file and the project, check out the Github repo

Next »