Every so often its time to start fresh with a new site, and a new approach. Node.js and responsive design are all the rage, and for good reason. With computing so ubiquitous, it also needs to be more flexible than ever, and that includes my home on line.
I built this site using the wintersmith static site generator system on node.js with jade and markdown templates, a bootstrap based layout, with some jQuery scripts to pretty things up a little. There’s also a custom font, rokkitt from goole fonts.
bootstrap
A very popular framework for getting the basics for a site design off the ground. CSS, generated via less templates, that makes things stable across browsers, a grid system for easing layout and flow, several widgets and styles for building navigation and interfaces, and some useful JavaScript built on top of jQuery. The big new thing in version 3 is a responsive first design system. All the CSS classes and styles used to build the layout let you provide hits for how to re-flow the site on different sized screens. If you loaded the front page of this site on a phone or on many tablets, the logo will appear above the content, instead of the left as on a desktop.
wintersmith
A static site generator, a valuable tool for cutting down the repetitiveness of manual site building, while letting you keep a high level of control and use the right tool for the job. For instance, articles like this are written in the markdown template system, which is a wiki-like syntax that is great for writing content. These are flowed into templates using the jade template system, which lets you write html more succinctly, using indentation instead of end tags, and letting you do variable substitution. wintersmith provides a small local web server for testing out how all this builds on the fly. It runs on top of node.js and can be extended with many plug-ins. When its all as I want, I can have it generate a set of regular static HTML files I can host on any web server with no special abilities. Being able to write and maintain a basic blog site like this, without the need for the database is a win for simplicity and performance.
jQuery
JavasScript is an amazing and until recently rather under appreciated language. Like many languages, its the libraries and design patterns that make it more than the syntax on its own. jQuery really brought all of that together, and has enabled a huge amount of interactivity and simplified extending what the web could do, letting entire applications run in a browser. On this site, so far I use it just to add a some random colors to the small buttons on the home page, and animate changing the color of the logo. Because of jQuery, a small amount of code packs a big punch.
Putting to all together
wintersmith sets up a basic site for you based on a choice of templates. I picked the blog. From there, its a matter of piecing apart the various templates to get the design I want, and to get all those other frameworks and scripts loading.
Being able to build a simple site quickly, without needing a database, or to maintain server side scripts, is just what I needed. With any site, its all about being to expand and maintain it going forward, so having a good template engine and frameworks goes a long way.