Step One: install Node and Express

I've decided to build my own personal blog and folio website using (Node)[]. It was a simple enough process to get it running with a basic template. I've decided to do everything in a very agile way. My basic plan includes building a modular website that will allow me to add and swap content that I deem useful to have on my site. While it is a folio site at it's core, it's hardly the main feature. I want to allow myself to express what I'm currently learning as well as what I'm spending my time on. Initially I will have the following structure:

  1. Folio: A list of all the work that I'm proud of and willing to show off to the world.
  2. Lab: A list (and examples) of projects that I'm working on. It's my environment to quickly prototype and show off little things that take my fancy.
  3. Timesinks: My directly non-work related interests which will include things like my feed, Twitter, Instagram and so forth. This section will likely change all the time.

To get the project started I needed to install Node which was a simple matter of downloading and installing the Mac package from the website. This also gives me access to the NPM package system for installing more Node code. From here I installed express and a few other features to start my first experiment.

npm install express

I've started a new folder structure for all my Node work, at least for now.


With express I was able to bootstrap my first site

$ node_modules/express/bin/express jimmy.hillis

This method build my basic express app file structure and enough code to get me started. From there I quickly did some reading on the express documentation ( and built a few routes and a few views.

To build a route was extremely simple and I was able to retrofit some code they already provided for a few more routes.

The views are equally simple and, by default, make use of Jade templates (an extension of HAML). Having never used the templates I figured I may as well give them a go and it was smooth sailing. They aren'y exactly difficult to follow and use a very abstract tab-delimited system to build html. For example to build a basic page:

        h1 This is my header
        p This is a great looking page!

This will build some very simple markup:

    <div class="mainwrap">
        <h1>This is my header</h1>
        <p>This is a great looking page!</p>

A few things I really like is the simple way of chaining class and id properties after the element.

Is very short and simple and straight to the point.

Having no required closing tags (though you can manually close them yourself if you want) is a boon as well, saving a huge amount of time and effort. Using tabs and returns also forces the front-end team to write nicely formatting code.