Using browser-sync with Jekyll for fun and profit

06 Jan 2016

I use Jekyll a lot. From this blog to documentation, internal wikis and more.

It’s really a great tool to generate static websites and it’s a joy to use.

I use Vim for everything too. This means that I write blog posts using Vim and I want to preview what I write on the blog.

If you don’t know browser-sync you are missing on an important tool for client side development.

I have found that using browser-sync with jekyll really speeds up my workflow and makes previewing what I write much easier.

Jekyll comes with it’s own serve command which will run a server on post 4000 usually. browser-sync support proxying to that server while watching files.

So, in order to live-preview everything I write I am running jekyll serve.

bundle exec jekyll serve --drafts

Then, I run browser-sync proxying to that server.

browser-sync start --files "css/*.css" --proxy "localhost:4000" --files "_posts/*.md" --files "_drafts/*.md" --reloadDelay "2000"

With every change to _posts _drafts or css, the browser will reload and preview the changes.

It looks like this in the terminal