Running Jekyll with Mixture

📆

Some tips on running Jekyll with Mixture.io.

Introducing Mixture

I’ve been lucky enough to be developing with Mixture from the alpha releases, testing out the fantastic templating, live-refresh, pre-processing and task/to-do management features.

Since those early releases the product has evolved incredibly quickly, each new build includes an additional layer of impressive functionality on top of an already powerful application.

Mixture went public last week and the general consensus is that it’s changed the way we develop websites.

Simply Done

The public beta release was a huge improvement in a number of ways but most notably for me, was the inclusion of simple mode.

Simple mode meant I could run my existing blog architecture but still benefit from all the amazing features that Mixture has to offer.

Neil does a great job of explaining Mixture’s simple mode (video) and it’s worth checking the Mixture docs page to get the best out of the application.

My Jekyll Setup

Getting Jekyll to work with Mixture was incredibly quick and easy.

  1. Run the Jekyll server as usual 
    jekyll --server
  2. Open my blog directory using Mixture
  3. Setup simple mode like so:
    • select preprocessor location (mine: css)
    • select style output location (mine: css)
    • select script output location (mine: js)
    • enter partner server address (typically localhost:4000 for Jekyll)
  4. Click View Locally in the Mixture.app sidebar
    • This will open a new browser window/tab with your Jekyll site at the mercy of Mixture

Mr Hyde

I’m not currently using Compass in my workflow but Jupiter St. John has pointed out a live-refresh lag when running Jekyll Mixture and Compass together. Jupiter has done some digging around on the subject:

When Jekyll generates files, it deletes all files and folders from the output directory _site. Furthermore, naturally, the generated files are written to disk serially and during a long period (~3s for a small site).

Taken from Jekyll and Livereload Flow

The article goes on to offer a remedy that uses Grunt.

What’s Next?

I’m not quite ready to move my blog architecture and hosting over entirely to Mixture, although I’m really tempted. With the news of upcoming Markdown support means Mixture mean business with this application and so far it’s retired several of my front-end development tools so I’m keen to show my support in any way that I can.

I’m holding out for some Github support in the future and really excited about using some of the multi-device follow-the-leader testing and using Mixture in my UX rapid prototyping workflow.

Links

Like this post? Share it