Git Product home page Git Product logo

jekyll-gulp-sass-browser-sync's Introduction

Starter Template for Jekyll

This fork is intended to be a starter template that takes care of these added features on top of @shakyShane's original repo.

Checklist

  • Loop for Blog and Work section
  • Blog styling
  • Gulp task for image optimization
  • Images & icons spriting
  • Syntax highlighting
  • footer
  • Work section โ€” Filter by tech: RoR, WP, Shopify, JS
  • Youtube video background on About page
UX
  • RSS Feed
  • Animation & Interaction

Performance

  • Watchify
  • Browserify
  • Use CloudFlare for leverage browser caching
  • external vendors/libs via Bower
  • uncss
  • critical path
  • 100/100 Google Page Insights
  • Google Analytics
  • Gulp task to take care of CloudFlare settings

SEO

  • sitemap

100/100 score on Google Page Insights



Gotchas

  • Remove .publish and add CNAME if you want to use Github Pages
  • Check bower.json for overrides if gulp bower doesn't import your bower packages
  • Run gulp install to upgrade bower packages updated via bower.json

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());
});

jekyll-gulp-sass-browser-sync's People

Contributors

ajmalafif avatar shakyshane avatar coletownsend avatar macbleser avatar mibamur avatar whatsnewsaes avatar

Stargazers

Matt Ashwood avatar Ajmal Hakeem avatar Muhammad Faisal Arbain avatar Sabri Ibrahim avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.