About Website (README.md)

Site Information

• URL: http://jrockowitz.github.io/ or http://thebigbluehouse.com/
• GIT: https://github.com/jrockowitz/jrockowitz.github.io
• Style-Guide: http://jrockowitz.github.io/style-guide/
• Analytics: https://www.google.com/analytics/web/

Software/Libraries

• Jeykyll
  • Jekyll Redirect From Plugin
  • Jekyll Sitemap Generator Plugin
• github / pages-gem
• Grunt
  • grunt-contrib-concat
  • grunt-contrib-copy
  • grunt-contrib-csslint
  • grunt-contrib-cssmin
  • grunt-contrib-jshint
  • grunt-contrib-uglify
  • grunt-exec
  • grunt-responsive-images
  • grunt-sed
• Bower
• Bootstrap
• enquire.js
• Font Awesome
• jQuery
• jQuery Mobile
  • Events: Touch & Orientation

Setup

‘Hello World’ GitHub Pages

Setup GitHub Pages respository.

• GitHub Pages: Jekyll

Boilerplate Jekyll site

Replace ‘Hello World’ with a boilerplate Jekyll site.

• Quick-start guide
  • Must remove index.html_ and README.md before executing jekyll new . inside local.jrockowitz.github.io.
• Working With Github Pages
  • Add _site to .gitignore because Github maintains (and overwrites) this directory.

Commit and push changes to GitHub

cd local.jrockowitz.github.io
git add --all
git commit -am"Boilerplate Jekyll site"
git push
open http://jrockowitz.github.io/
# Refresh browser until GitHub regenerates your website.

Initial to Jekyll site

• Jekyll Configuration
  • Organizing Jekyll Pages

cd local.jrockowitz.github.io
edit _config.yml

Use NodeJs Package Manager (npm) to install Grunt and Bower.

• What is npm?
• Specifics of npm’s package.json handling
• Grunt: The JavaScript Task Runner
• Bower: A package manager for the web

# Setup and execute npm install
cd local.jrockowitz.github.io
edit package.json
npm install

# Add node_modules to .gitignore
cd local.jrockowitz.github.io
echo 'node_modules' >> ~/.gitignore

Use Bower to download jQuery and Bootstrap SASS.

• Bower: Getting Started
• jQuery
• Bootstrap for Sass

cd local.jrockowitz.github.io
edit bower.json
bower install
  
- or -

cd local.jrockowitz.github.io
bower install jquery
bower install bootstrap-sass-official

Setup basic Grunt task runner

• grunt-contrib-concat: Concatenate files.
• grunt-contrib-uglify: Minify files with UglifyJS
• grunt-exec

cd local.jrockowitz.github.io
edit GruntFile.json
grunt

Remove Jekyll’s Boilerplate SASS and HTML.

• Clear _sass/base.scss and _sass/layout.scss.

• Replace %vertical-rhythm mixin with margin-bottom: .5em; in _syntax-highlighting.scss

Integrate jQuery, Bootstrap, and main.js into Jekylly Boilerplate website.

• Adding Bootstrap to Jekyll

Add this README.md file to site.

open http://jrockowitz.github.io/readme

Build a style-guide/code snippet page

• Bootstrap: CSS
  Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.

Setup Bootstrap Navbar

• Bootstrap: Navbar
  • Bootstrap Case: Adding a Navigation Bar

Setup Bootstrap Grid

• Bootstrap: Grid system
  • Bootstrap Grids

Setup Navigation using Jekyll’s Data File and Collections

• Jekyll: Data files
  • How to create data-driven navigation in Jekyll
• Jekyll: Collections
  • How to change the default order pages in jekyll

Set Contact Form using Formspree

• You do not need a database for your contact form
  • Formspree
    Just send your form to our URL and we’ll forward it to your email.

Migrate Content into Jekyll

• Write custom migration from Drupal 7 to Jekylly using Drush

Setup Bootstrap Carousel

• Adding swipe support to Bootstrap Carousel 3.0

Generate Thumbnails

• Grunt Responsive Images

Create Image Enlarge Modal

• Bootstrap open image in modal

Responsive Grid for Image Thumbnails

• Bootstrap Grid System

Adjust Styles using Variables and CSS overrides

• https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

SEO

• Sitemaps for GitHub Pages
• Redirects on GitHub Pages
• How to add Google Analytics Tracking ID to GitHub Pages

References

GitHub Pages

• Jekyll: GitHub Pages
• GitHub: Using Jekyll with Pages

Jekyll

• Documentation
  • GitHub Pages
• Tips
• Pagination
• Photo Gallery
• Creating a fast and mobile-friendly website with Jekyll
• Todo/check list for a new jekyll blog

Liquid for Designers

• Printing / Echoing / Dumping Arrays : liquid

Bootstrap

• Style Guides
  • http://getbootstrap.com/css/
  • http://bootswatch.com/default/
  • http://www.bootply.com/render/65566
• Tutorials
  • Bootstrap 3 Tutorial
  • Bootstrap Tutorial : Tutorial Republic

HTML/Front-end tools

• HTML Ipsum

Placeholders Images

• http://placehold.it
  • http://placehold.it/150x150
• http://lorempixel.com/
  • http://lorempixel.com/400/200
• http://loremflickr.com/
  • http://loremflickr.com/320/240

Coding Guidelines/Standards

• Code guidelines: Bootstrap
• Code Guide (HTML and CSS)

TODO

• Editorial cleanup