Running BrowserSync with Jekyll

BrowserSync is a tool for injecting changes when working on your local site project and then refreshing your site on save. Perfect for designers/devs who need one tool for one job.

I couldn’t find any clear instructions on setting up BrowserSync with Jekyll alone (no Sass, no Grunt/Gulp) so here’s the command to get it working after you’ve gone through the install and you have changed directories to your projects folder root:

browser-sync start --proxy "localhost:4000" --files "_site/*.*"

This command will watch the entire <strong>_site</strong> directory rather then just your CSS folder. Note that you will still need to run the normal jekyll serve command in a separate Terminal tab or window, but your site will be view-able in the BrowserSync URL: localhost:3000.

Moved to Jekyll

I recently converted this blog to Jekyll from WordPress and am now using GitHub Pages for hosting. I didn’t move over specifically because of problems with WordPress, but because of the following:

  1. The dev-specifc way of publishing posts with Jekyll (edit in code editor, having everything in version control, review changes, push via Git, boom)
  2. Being able to use GitHub as a hosting platform for free
  3. Ease-of-use with pushing site style updates (which is nice for me with this sites style changing so much)
  4. Portability of the site due to no database. If for some reason hosting on GitHub doesn’t work out in the long-run, it won’t be a problem to simply move my local directory.
  5. I’m no longer looking for a WordPress-based development job, so learning more WordPress isn’t necessary. More on that in another post.
  6. Automatic, two-factor backups via Git and storing local folders in Copy.app (affiliate link).

It wasn’t that big of an ordeal and yes, you can do it to. There are however, a few caveats worth mentioning:

GitHub’s own guide to Jekyll will be invaluable and you will be using it a lot. Pay attention especially to The GitHub Way of structuring the files/folder layout of your Jekyll project. For me, looking at other Jekyll projects like Dan Eden’s personal site also helped with determining where files should go.

Jekyll is Ruby-based and as such, you should make sure your own Ruby environment is clean and that you’re using the most current version of Ruby that Jekyll support. Since I don’t work with Ruby, OS X’s version of Ruby that’s included with Mavericks was behind and I had to update it in order for Jekyll to run.

I ran into an issue with the RSS feed, but that was solved by finding a valid feed on GitHub (like this one from the Hyde repo) and then “burning” the feed with FeedBurner. I also needed to adjust the site.url YAML front matter in _config.yml to reflect my site’s url.

Jekyll repo’s worth checking out: