A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync

  • By Shane Osbourne
  • Last update: Nov 2, 2022
  • Comments: 15

jekyll-gulp-sass-browser-sync

A starter project including full setup for Jekyll, GulpJS, SASS, AutoPrefixer & BrowserSync

Here's a 1.5min screencast showing what you get.

And here's a GIF showing the CSS injecting.

GIF

System Preparation

To use this starter project, you'll need the following things installed on your machine.

  1. Jekyll - $ gem install jekyll
  2. NodeJS - use the installer.
  3. GulpJS - $ npm install -g gulp (mac users may need sudo)

Local Installation

  1. Clone this repo, or download it into a directory of your choice.
  2. Inside the directory, run npm install.

Usage

development mode

This will give you file watching, browser synchronisation, auto-rebuild, CSS injecting etc etc.

$ gulp

jekyll

As this is just a Jekyll project, you can use any of the commands listed in their docs

Deploy with Gulp

You can easily deploy your site build to a gh-pages branch. First, follow the instructions at gulp-gh-pages to get your branch prepared for the deployment and to install the module. Then, in gulpfile.js you'll want to include something like the code below. gulp.src() needs to be the path to your final site folder, which by default will be _site. If you change the destination in your _config.yml file, be sure to reflect that in your gulpfile.

var deploy = require("gulp-gh-pages");

gulp.task("deploy", ["jekyll-build"], function () {
    return gulp.src("./_site/**/*")
        .pipe(deploy());
});

Github

https://github.com/shakyShane/jekyll-gulp-sass-browser-sync

Comments(15)

  • 1

    jekyll-build error

    I'm having an issue ... Has anyone anyone had the same problem?

    [22:38:52] Using gulpfile ~/Desktop/jekyll-gulp-sass-browser-sync-master/gulpfile.js [22:38:52] Starting 'sass'... [22:38:52] Starting 'jekyll-build'... [22:38:52] Starting 'watch'... [22:38:52] Finished 'watch' after 12 ms [22:38:52] Finished 'sass' after 116 ms Configuration file: /Users/Francesco/Desktop/jekyll-gulp-sass-browser-sync-master/_config.yml Source: /Users/Francesco/Desktop/jekyll-gulp-sass-browser-sync-master Destination: /Users/Francesco/Desktop/jekyll-gulp-sass-browser-sync-master/_site Incremental build: disabled. Enable with --incremental Generating... Dependency Error: Yikes! It looks like you don't have redcarpet or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- redcarpet' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/! Conversion error: Jekyll::Converters::Markdown encountered an error while converting '_posts/2014-04-20-welcome-to-jekyll.markdown': redcarpet ERROR: YOUR SITE COULD NOT BE BUILT: ------------------------------------ redcarpet [22:38:53] 'jekyll-build' errored after 379 ms

  • 2

    Build Failure

    Hi, I can't wait to use this project! I'm running Windows 8 and there is a build failure when I try to npm install. I updated Sass about a week ago, and updated rubygems today from an outdated version 2.2, but the problem still persists, I would love if someone can guide me in the right direction. Thanks!

    6345 error Windows_NT 6.3.9600
6346 error argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
6347 error node v0.12.4
6348 error npm  v3.1.3
6349 error code ELIFECYCLE
6350 error [email protected] install: `node build.js`
6350 error Exit status 1
6351 error Failed at the [email protected] install script 'node build.js'.
6351 error This is most likely a problem with the node-sass package,
6351 error not with npm itself.
6351 error Tell the author that this fails on your system:
6351 error     node build.js
6351 error You can get their info via:
6351 error     npm owner ls node-sass
6351 error There is likely additional logging output above.
6352 verbose exit [ 1, true ]
  • 3

    Possible to simplify with gulp-intermediate

    To simplify / make this a little more feature rich, you might be interested in this recipe for Jekyll and gulp-intermediate: https://github.com/robwierzbowski/gulp-intermediate/blob/master/recipes.md#using-gulp-intermediate-directly

    Feel free to close after you take a look, whether you decide to use or not.

  • 4

    Local BrowserSync IP is overridden in Jekyll when custom permalinks are set

    _config.yml

    permalink: /posts/:title

    index.html

    <a href="{{ post.url }}">{{ post.title }}</a>

    The IP set by browser-sync is valid, but Jekyll (?) replaces the IP address/port combo with localhost, which 404s.

    Example <a href="http://0.0.0.0:3002/posts/the-right-questions-to-ask-mobile-first-deniers"> click => resolves to: http://localhost/posts/the-right-questions-to-ask-mobile-first-deniers

  • 5

    Cannot Get /

    Hi,

    After doing all the installation work, i tried running gulp but the browser opens and shows Cannot GET /

    _Site folder has only CSS files.

    System : Windows 7

  • 6

    Task sequence issue?

    I'm looking at line 30 in gulpfile.js, see https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/blob/master/gulpfile.js#L30

    How can you be sure that the 'sass' task is executed before 'jekyll-build'?

  • 7

    Jekyll build not updating after running gulp

    After running gulp command everything looks to be working fine but jekyll rebuild never occurs. If I run jekyll serve command, everything builds just fine. Not sure what the problem is here as it doesn't show any errors. Anyone else experiencing this issue?

    FYI, I'm on windows, go figure :*(

  • 8

    Question on line 59 of gulpfile.js

    would you want gulp watch to watch all .html files in the root instead of just index.html?

    something like this: gulp.watch(['*.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);

    instead of this: gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);

    Love this configuration BTW!

  • 9

    Gulp error on Windows 7

    $ gulp [19:16:51] Using gulpfile c:\Users\Mahlu\Desktop\i\gulpfile.js [19:16:51] Starting 'sass'... [19:16:51] Starting 'jekyll-build'... [19:16:51] Starting 'watch'... [19:16:51] Finished 'watch' after 14 ms events.js:85 throw er; // Unhandled 'error' event ^ Error: spawn jekyll ENOENT at exports._errnoException (util.js:746:11) at Process.ChildProcess._handle.onexit (child_process.js:1053:32) at child_process.js:1144:20 at process._tickCallback (node.js:355:11) at Function.Module.runMain (module.js:503:11) at startup (node.js:129:16)

  • 10

    main.scss

    Is anyone else having problems watching/compiling main.scss?

    Nothing happens after I edit main.scss and I get this error: invalid top-level expression main.scss 1

    I also see that main.scss is in a directory called _sass but the gulpfile.js has "gulp.src('_scss/main.scss')"

  • 11

    Browser sync doesn't work on pages that aren't my index .html

    So I've just set up shakyShanes default project and I'm having a problem with browser sync. It works fine when I'm on my landing page but not when I go to a different page for example about.html. I had a look in the gulpfile.js and gulp is watching for all html pages in the site which works fine to create the site but doesn't seem to launch browser sync properly. the base directive is set to _site/ so surely as long as my page is included in the site directive it should re-launch browser sync no? Any help would be greatly appreciated.

  • 12

    Update Gulpfile.js 3 to 4

    After updating to the latest version of gulp 4. The project is not running. The problem is because of the latest version of syntax changes. How to update the gulpfile.js to version 4.?

  • 13

    Gulp does not compile after direct editing on includes

    I am not sure if I can ask this here because it includes jade as well...

    So i followed travis from Devtips, and thats how I ended up here. I was doing pretty well on my website. but then I was trying to highlight the navigation and it wasnt working So I decided to edit in the include file (html) instead of in the original jade file (which was supposed to be compiled into the include file in html) and since then, it stopped compiling. Whatever I create or edit on the jadefiles folder, it does not compile into html includes... and I havent changed anything on the gulpfile or anyother place....

    suggestions for what might be?

    EDIT: I did not find the problem but I found a solution. I ran just "gulp jade" on the terminal. (you may delete this post ^^)

  • 14

    How to disable the browser sync

    For some reason, whenever I save the file the syncing process is not stopping / takes lots of time to finished, so it's making my work slower. So, I would be happy if anyone help me to disable browser sync in gulpfile.

  • 15

    License not immediately clear

    License is stated as ISC in package.json but it would be convenient if this was set in the Github project for convenience and clarity. Also, thanks for providing this project it has saved me a lot of time thus far!

Popular Tag

Related