Using browser-sync with Jekyll for fun and profit06 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
css, the browser will reload and preview the changes.
It looks like this in the terminal