The BLEH Stack: Simple Websites With Node.js

The BLEH stack (Browserify + Less + Express + Handlebars) is a great foundation for a typical modern website because it’s very popular and simple. And by keeping your codebase simple and familiar, other web developers can dive right in with little or no learning curve. Epic! But…

The problem

Initial setup of a web project is a lot of work. There are currently 7,986 gulp modules to help you piece together a DIY build system. This is super powerful but with all these options, engineers are forced to spend time creating clever new patterns for each project. Unwittingly, codebases suffer from inconsistency, disorganization and complexity.

Straight from the horse’s mouth

A lot of people like gulp these days, but there’s got to be a simpler solution!

A simpler solution

Let me introduce the bleh micro-framework.

First, install it:

npm install -g bleh

Now create your new website:

mkdir my-site && cd my-site
npm init
bleh init
npm start

Boom! Your new website is running at http://localhost:8080.

You will see a minimal starter app has been created for you. You’ll notice your pages and layouts are like fiddles. What I mean is each page has separate files for html, css and javascript — everything you need to start building a dynamic website!

├─ layouts/
│  └─ website/
│     ├─ website.browserify.js
│     ├─ website.html
│     ├─ website.less
│     └─ website.node.js
├─ lib/
│  └─ handlebars-helpers.js
├─ node_modules/
├─ pages/
│  └─ home/
│     ├─ home.browserify.js
│     ├─ home.html
│     ├─ home.less
│     └─ home.node.js
├─ partials/
│  └─ head.js
├─ public/
│  ├─ dist/
│  └─ robots.txt
├─ .gitignore
├─ index.js
├─ server.js
└─ package.json

Oh, real quick just in case it’s not obvious:

• layouts — themes to be used on multiple pages
• pages — each url of your website has a corresponding pages folder. Use filenames like $myparam for dynamic urls.
• partials — reusable handlebars templates
• public — static files that anyone can download

Now go ahead and edit some files. You’ll notice your app will restart automatically and you can reload your browser window to see your changes.

Also, the command line utility can do a few other things like create new blank pages for you:

bleh --help

There’s a bit more to it, if you want to get fancy, so check out the full documentation on Github and give it a try. Pull requests welcome!

William Schmid created bleh to launch scalable websites quickly and keep their codebases simple and organized.