Simple Site Automated Development Setup with Jekyll

Getting all the right tools to work together is no easy task. Even harder to get them to work automatically. Pressing refresh for every one of your changes, be it for CSS or a blog edit, is also a hassle. When you just want to publish content or just change a color, you don’t want to spend time firing up a web server, starting the IDE, opening your browser and finding the right URL. This automated setup will do all of that for you just by opening your project. Designers and blog writers alike would make good use of this set up. For designers, there is SASS, auto vender prefixes, mixin library with a grid layout. For bloggers, simple date filename layout, with your choice of several markdown languages. Also, blog posts automatically populated with links when Jekyll compiles automatically with Gulp. These instructions will work for Linux, Unix, and OS X. 

Features:

• Fast and simple development
• No database or web server for development
• Markdown blog syntax
• Blog-aware
• Single compiled CSS file
• HTML / SASS changes update browser automatically
• Opening the project in PhpStorm launches all build processes and browser
• Automatically add vendor prefixes to CSS rules using values from Can I Use

 

Tools you’ll need

PhpStorm 2016.x https://www.jetbrains.com/phpstorm/
Jekyll 3.1.6 https://jekyllrb.com/
SASS 3.4.22 http://sass-lang.com/ https://github.com/sass/sass
Node.js https://nodejs.org/en/
NPM https://www.npmjs.com/

Node Js Modules
Gulp http://gulpjs.com/ Automate and enhance your workflow
Normalize SCSS https://github.com/JohnAlbin/normalize-scss , a collection of HTML element and attribute rulesets to normalize styles across all browsers
Bourbon http://bourbon.io/ a lightweight mixin library
Bourbon Neat http://neat.bourbon.io/ a mixin-based grid layout system
Browsersync https://www.browsersync.io/ a time-saving synchronised browser testing
Autoprefixer https://github.com/postcss/autoprefixer plugin to add vendor prefixes to CSS rules using values from Can I Use

1. Download and install 30-day trial of PhpStorm https://www.jetbrains.com/phpstorm/download/
2. Download and install current version of Node.js https://nodejs.org/en/
3. ~ $ sudo npm install npm -g
4. Download and install Jekyll requirements https://jekyllrb.com/docs/installation/
5. ~ $ sudo gem install jekyll -v 3.1.6 or for 10.11 sudo gem install -n /usr/local/bin jekyll -v 3.1.6

 

Creating new Sites

1. ~ $ jekyll new {path to project} i.e. jekyll new my-blog
2. ~ $ cd {path to project} i.e. cd my-blog
3. ~ $ npm install -S gulp
4. ~ $ npm install -S gulp-sass
5. ~ $ npm install -S browser-sync
6. ~ $ npm install -S normalize-scss
7. ~ $ npm install -S bourbon
8. ~ $ npm install -S bourbon-neat
9. ~ $ npm install -S gulp-autoprefixer
10. Download https://github.com/BernardRobbins/jekyll-gulp-sass-browser-sync/blob/master/gulpfile.js into {path to project}. Now, click the “Raw” button and “save as” from browser to {path to project}.
11. Changes need to be made to {path to project}/css/main.scss file.
    1.  Remove --- comment block
    2.  Add @import "normalize/import-now", "bourbon", "neat"; under @charset "utf-8";
12. Add exclude: ["node_modules", "gulpfile.js", "package.json", "css/main.scss"] to {path to project}/_config.yml
13. PhpStorm -> Create New Project from Existing Files -> Source files are in a local directory, no Web server is yet configured -> {path to project} -> click Project Root -> click Finish.
14. PhpStorm -> Settings -> Tools -> Startup Tasks -> + Add New Configuration -> Gulp.js
    Name: Jekyll
    Gulpfile: {path to project}/gulpfile.js (should be pre-filled)
    Gulp package: {path to project}/node_modules/gulp (should be pre-filled)
15. PhpStorm -> Run -> Run… -> Jekyll

You should now see a browser window that has opened showing the default Jekyll site.

_config.yml Jekyll options are listed on https://jekyllrb.com/docs/configuration/