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…
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.
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
Boom! Your new website is running at http://localhost:8080.
│ └─ website/
│ ├─ website.browserify.js
│ ├─ website.html
│ ├─ website.less
│ └─ website.node.js
│ └─ handlebars-helpers.js
│ └─ home/
│ ├─ home.browserify.js
│ ├─ home.html
│ ├─ home.less
│ └─ home.node.js
│ └─ head.js
│ ├─ dist/
│ └─ robots.txt
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:
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!