How do I build a DRY, simple, static website using Bootstrap 3 including LESS

I want to build a simple, static website using Bootstrap 3.2, including LESS.  I also want to have a small number of pages rather than a single long running page.  How hard can this be?

The answers to both questions were harder to find than I expected.  There is a ridiculous (repetitive) amount of basic information on the use of Bootstrap Components & CSS and, to a lesser degree, the use and value of LESS.  But I found sweet fa on how to get up and running in a useful dev setup.  This post outlines my approach so it won’t be such a hurdle next time :-).

Challenge 1: I need my development setup.

Turns out my infrastructure guy is too busy so I need to figure out how to create my development environment: how to source Bootstrap and LESS; how to test; how to compile LESS and how to stitch it altogether…

Answer – Yo – just use  yo bootstrap-less

Luckily – the guys at Yeoman have a bunch of generators that do exactly that.  For me, Thomas-Lebeau’s generator, the generator-bootstrap-less  – available on github, was just what I needed.  I already have grunt on my machine, so it was all pretty simple to get up and running.

The only little glitches for me:

  • I use Aptana Studio 3 as my editor, which uses the local port that the generator wanted to use for serving up my pages – so a that was a pretty quick change to serve via the 9005 port. The snippet changed in my Gruntfile.js was:
connect: {
      options: {
        port: 9005,
        // change this to '0.0.0.0' to access the server from outside
        ...etc
  • The coffee-script compiler generated javascript that jshint didn’t like, so I had to relax a couple of the standards to avoid warnings during all my grunt builds. The .jshint file is in the root directory, and mine now looks like this:
{
    "node": true,
    "browser": true,
    "esnext": true,
    "bitwise": true,
    "camelcase": true,
    "curly": true,
    "eqeqeq": true,
    "immed": true,
    "indent": 2,
    "latedef": true,
    "newcap": true,
    "noarg": true,
    "quotmark": false,
    "regexp": true,
    "undef": true,
    "unused": true,
    "strict": false,
    "trailing": true,
    "smarttabs": true,
    "jquery": true,
    "white": false
}
  • I can run grunt watch or grunt serve  – but not both together.  Took me a while to realise that grunt serve actually does the grunt watch as part of it – no need for both.

So that was a great way to get up and running.  I will be tweaking the folder structure, but that’s just personal preferences and generators are opinionated – so of course I will think differently.   If it mattered too much I could always try and develop my own generator – for now I am more than happy with (and very grateful for) this starting point!

Challenge 2: I want a handful of DRY pages.

I don’t want a single long page, using navs to scroll.  Instead, I simply want to use the navs to link to other pages – maybe old-fashioned, but this site is my preparation for a larger site that will eventually be content rich, and a single page will be too unwieldy.

Even though I am not using a full-on MVC or AJAX solution, as in my site will be totally client-side, I do want my development to be DRY… In short, I want the same header and footer on every page.  I also want to build the navigation just the one time.

To answer the obvious question, why not just use something like AngularJS or any other MVC toolset?   In short – Google’s web crawler doesn’t run javascript.  That means that any content in our AngularJS app that is dynamically loaded via javascript will never be found.  That’s not such a great outcome for a static website, assuming you’d want to be found via a Google search.  So, I have parked the full toolset and opted for this client-side approach.

Answer – Grunt – use grunt-bake

Grunt-bake helps me do just that.

Bake static pages for production while using modular files while in development.

Unfortunately it means I have to turn my AngularJS thinking on its head…  In Angular the dynamic content is written in templates, whereas this grunt-bake actually calls the commonly used components the templates…  So a bit of a conceptual head shift – but that is all good.

In reality, the two also behave differently at run time.  In our AngularJS app, once the page is loaded, only the variable content is uploaded for a new page – so this is a perfect model for a web app that needs to serve up data that could be different based on the user etc…  However, the grunt-bake process doesn’t impact the loading of pages. If I go to a new page, the header and footer will be reloaded – but at least they will look the same!

Grunt-bake only makes my code development and maintenance DRY.  As soon as grunt builds out the html, it duplicates the templated content each time that content is referenced.  So it is only DRY for development – but that is where it matters to me for this website.

I found a couple of places that helped me get grunt-bake up and running in no time:

So now I have my development set-up sorted, I better get on with building my simple, static website with my 3 linked pages – on y va!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s