Our development team at Opinsys has grown tremendously during the last year and our frustration of Wordpress had escalated to the point we had to do something about it. Since I was already familiar with the developer friendly Octopress by having used it in my personal blog we decided to go for it too.

This new Labs site contains news and updates about our development efforts. Expect posts about Linux and Web technologies. Checkout the archives to see what we have been previously posting.

While making sure that our experience with Octopress would be smooth as possible I integrated Guard::LiveReload with Octopress. Since I could not find any proper documentation on the Web how to do it I’m posting it here.

LiveReload

LiveReload is a OS X tool and a Chrome extension which frees developers from having to reload manually the pages they are developing by monitoring the file system and automatically reloading the pages. Guard::Reload is a CLI version of it written in Ruby.

Guard::LiveReload With Octopress

While there already blog posts about on how to use Guard::LiveReload with Octopress I was unable to use them with our Octopress installation. For example this blog post presents the most obvious way of integrating it to Octopress and it fails with large blogs. It tries to monitor files in the public/ directory and reloads immediately it sees a change. This is where it fails. Generating our blog takes from 7 seconds up to 30 depending on the machine. That means Guard reloads the page way too early.

One could try to workaround it by setting the --latency option to Guard which delays the task execution, but that’s pretty much a guess work. Real solution would be to implement some kind of debounce feature to Guard which delays the task execution until the events stop arriving. Since I’m not a Guard hacker I ended up creating a Jekyll plugin to workaround this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Put me into the plugins directory

module Jekyll

  class Site

    alias orig_process process
    def process

      start = Time.now
      puts "Generating site..."

      orig_process

      puts "Generation done. Took #{ Time.now - start } seconds"

      File.open "public/generated", "w" do |f|
        f.write(Time.now.to_s)
      end

    end

  end
end

It monkeypatches Jekyll to hook into the build process and writes a file to public/generated when the whole build operation has been completed. Now we can monitor just this file in our Guardfile and the reload happens exactly when it is supposed to!

1
2
3
4

guard 'livereload' do
  watch(%r{public/generated})
  watch(%r{public/.+\.(css)})
end

Because Octopress (or Jekyll?) uses different thread for compiling stylesheets we want to add separate watcher for it too.

To actually use this we need to add guard, guard-livereload and rb-notify gems to the Gemfile and install the LiveReload Chrome extension.

1
2
3
4
5
6

group :development do
  # ... other gems
  gem 'guard'
  gem 'guard-livereload'
  gem 'rb-inotify', '~> 0.8.8'
end

Then just install them with bundle install and start Guard with bundle exec guard.

Now activate the LiveReload plugin from Chrome, start Octopress in preview mode with bundle exec rake preview and in a second terminal start guard with bundle exec guard.

Happy hacking!

Compiling 30 seconds?!

That’s not a smooth developer experience! Not even with LiveReload.

Unfortunately it’s not trivial to speed up Jekyll build process. Generating dozens of pages just takes time. My solution to this is just remove all the pages I’m not currently interested in with rm source/_posts/* and restore them with git after I’m done.

1

git ls-files --deleted | xargs git checkout