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.
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:
- The dev-specifc way of publishing posts with Jekyll (edit in code editor, having everything in version control, review changes, push via Git, boom)
- Being able to use GitHub as a hosting platform for free
- Ease-of-use with pushing site style updates (which is nice for me with this sites style changing so much)
- 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.
- I’m no longer looking for a WordPress-based development job, so learning more WordPress isn’t necessary. More on that in another post.
- 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: