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 _site 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.

One thought on “Running BrowserSync with Jekyll”

  1. I’m using this after trying to use it with gulp and gulp-shell. The combo was giving me a rebuild time of around 6-7 seconds so I scrapped it.

    Your way of working with it is quite simply the most straight forward explanation I have ran across. And it’s heck of a lot faster.

Leave a Reply

Your email address will not be published. Required fields are marked *