Step One: install Node and Express

I've decided to build my own personal blog and folio website using (Node)[http://nodejs.org/]. 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 Last.fm 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.

xx/node_modules/xx
xx/node/jimmy.hillis

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 (http://expressjs.com/guide.html) 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:

body
    .mainwarp
        h1 This is my header
        p This is a great looking page!

This will build some very simple markup:

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

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

div#component.this-class.active

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.